@povio/ui 2.2.8 → 2.2.9-rc.10

package/dist/components/inputs/Selection/shared/SelectMobile.js

@@ -13,8 +13,8 @@ import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
 //#region src/components/inputs/Selection/shared/SelectMobile.tsx
-var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
-	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
+	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -62,6 +62,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
 				...fieldProps,
 				ref,
+				onMouseEnter,
+				onFocusCapture,
 				children: customTrigger
 			}) : /* @__PURE__ */ jsx(SelectInput, {
 				ref,
@@ -79,8 +81,12 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 				onBlur: void 0,
 				fieldProps,
 				headerProps,
+				leadingContent,
+				trailingContent,
 				collapseAfter,
-				selectedTagsType
+				selectedTagsType,
+				isRequired,
+				isDirty
 			}), /* @__PURE__ */ jsx(BottomSheet, {
 				isOpen,
 				onOpenChange: handleOpenChange,

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -0,0 +1,6 @@
+import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { SelectItem } from './select.types';
+export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
+export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
+export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -0,0 +1,13 @@
+//#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var getQueryItems = (data, queryMap) => {
+	if (!data) return [];
+	if (queryMap) return queryMap(data);
+	if (Array.isArray(data)) return data;
+	if (typeof data === "object" && data !== null) {
+		if ("items" in data && Array.isArray(data.items)) return data.items;
+		if ("pages" in data && Array.isArray(data.pages)) return data.pages.flatMap((page) => page && typeof page === "object" && "items" in page && Array.isArray(page.items) ? page.items : []);
+	}
+	return [];
+};
+//#endregion
+export { getQueryItems };

package/dist/components/inputs/Selection/shared/select.context.d.ts

@@ -17,14 +17,15 @@ export declare namespace SelectContext {
         onClear: () => void;
         onSelectAll: () => void;
         onRemove: (val: Key) => void;
+        onBlur: () => void;
         listItems: ExtendedSelectItem[];
         selectableListItems: SelectItem[];
         selectedItems: SelectItem[];
         selectedIds: Key[];
         isMultiple: boolean;
     } & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
-    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
-    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled" | "ignoreInputValueFiltering">;
+    export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
     export const useSelect: () => Type;
     export {};
 }

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,5 +1,5 @@
-import { useSelectItems } from "./useSelectItems.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
+import { useSelectItems } from "./useSelectItems.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/inputs/Selection/shared/select.context.tsx
@@ -10,7 +10,7 @@ var SelectContext;
 		id: item.id,
 		label: item.label ?? item.name ?? ""
 	});
-	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
+	_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
 		const isMultiple = props.selectionMode === "multiple";
 		const initialSelectedItems = useMemo(() => {
 			if (!props.initialSelection) return null;
@@ -42,7 +42,7 @@ var SelectContext;
 			newItemMinLength,
 			isLoading,
 			hasLoadMore,
-			isClientSearchDisabled
+			isClientSearchDisabled: ignoreInputValueFiltering ?? isClientSearchDisabled
 		});
 		const selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [allItems, fieldState.value]);
 		const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
@@ -84,7 +84,7 @@ var SelectContext;
 			else updateValue(value);
 		}, [props.value]);
 		useEffect(() => {
-			if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
+			if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
 		}, [allListItems]);
 		const handleInputChange = useCallback((inputValue) => {
 			const newFieldState = {
@@ -144,6 +144,22 @@ var SelectContext;
 			fieldState.value,
 			onChange
 		]);
+		const onBlur = useCallback(() => {
+			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
+				const newFieldState = {
+					...fieldState,
+					inputValue: "",
+					searchValue: ""
+				};
+				setFieldState(newFieldState);
+				emitStateChanges(newFieldState);
+				setShowAll(true);
+			}
+		}, [
+			props.isSearchable,
+			isMultiple,
+			fieldState
+		]);
 		const value = useMemo(() => ({
 			fieldState,
 			isOpen,
@@ -154,6 +170,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedItems,
@@ -171,6 +188,7 @@ var SelectContext;
 			onClear,
 			onSelectAll,
 			onRemove,
+			onBlur,
 			listItems,
 			selectableListItems,
 			selectedIds,

package/dist/components/inputs/Selection/shared/select.types.d.ts

@@ -1,11 +1,11 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../../shared/form.types';
 export interface SelectItem<TKey extends Key = Key> {
     id: TKey;
     label: string;
-    content?: string | ReactElement;
+    content?: string | ReactNode;
     isDisabled?: boolean;
 }
 export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {

package/dist/components/inputs/TextEditor/TextEditor.d.ts

@@ -15,6 +15,7 @@ export interface TextEditorBaseProps extends FormFieldProps {
     onBlur?: () => void;
     as?: "default" | "filter" | "floating" | "inline" | null;
     editorClassName?: string;
+    isDirty?: boolean;
 }
 export type TextEditorProps = TextEditorBaseProps;
 export type ControlledTextEditorProps<TFieldValues extends FieldValues> = ControlProps<TextEditorProps, TFieldValues>;

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -37,7 +37,7 @@ var extensions = [
 		defaultProtocol: "https"
 	})
 ];
-var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, onChange, onBlur }) => {
+var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur }) => {
 	const contentRef = useRef(null);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -109,6 +109,8 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 			"data-focus-within": isFocused || void 0,
 			"data-focus-visible": isFocused && isFocusVisible || void 0,
 			"data-is-filled": !editor?.isEmpty,
+			"data-is-required": isRequired || void 0,
+			"data-is-dirty": isDirty || void 0,
 			...hoverProps,
 			...focusWithinProps,
 			...fieldProps,
@@ -136,13 +138,15 @@ var TextEditor = (props) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field }) => /* @__PURE__ */ jsx(TextEditorBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextEditorBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
-				isDisabled: field.disabled || props.isDisabled
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
 			})
 		});
 	}

package/dist/components/inputs/Toggle/Toggle.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggle, toggleTypography } from "./toggle.cva.js";
+import { toggle, toggleContentClassName, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -13,6 +13,7 @@ var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
@@ -32,6 +33,10 @@ var ToggleBase = (props) => {
 				variant,
 				...rest
 			}),
+			contentClassName: toggleContentClassNameMap({
+				variant,
+				...rest
+			}),
 			children
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -8,3 +8,6 @@ export interface ToggleVariantProps extends VariantProps<typeof toggle> {
 export declare const toggleTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const toggleContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -26,5 +26,6 @@ var toggleTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { toggle, toggleTypography };
+export { toggle, toggleContentClassName, toggleTypography };

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -3,6 +3,7 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
     className?: string;
+    contentClassName?: string;
 }
-export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -3,15 +3,14 @@ import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
-var CheckContent = ({ children, className, ...props }) => {
+var CheckContent = ({ children, className, contentClassName, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",
-			...props.typography,
-			className: "text-text-default-2"
-		}), className),
+			...props.typography
+		}), contentClassName, className),
 		children
 	});
 };

package/dist/config/uiConfig.context.d.ts

@@ -24,10 +24,16 @@ export declare namespace UIConfig {
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange">;
+        queryAutocomplete: {
+            isInitialQueryDisabled?: boolean;
+        };
+        querySelect: {
+            isInitialQueryDisabled?: boolean;
+        };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear">;
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;

package/dist/config/uiConfig.context.js

@@ -31,8 +31,11 @@ var UIConfig;
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
-			hideSearchIcon: false
+			hideSearchIcon: false,
+			fireBlurOnChange: false
 		},
+		queryAutocomplete: { isInitialQueryDisabled: false },
+		querySelect: { isInitialQueryDisabled: false },
 		toggle: { variant: "default" },
 		slider: {
 			minValue: 0,
@@ -40,8 +43,10 @@ var UIConfig;
 		},
 		dateInput: {
 			todayIcon: false,
+			todayIconButtonSize: "none",
 			shouldForceLeadingZeros: false,
-			disableManualEntry: false
+			disableManualEntry: false,
+			autoFixYear: false
 		},
 		actionModal: {
 			titleTypography: {

package/dist/config/uiStyle.context.d.ts

@@ -5,6 +5,7 @@ import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
 import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
 import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
 import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
+import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
 import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
 import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
@@ -30,7 +31,7 @@ export declare namespace UIStyle {
     type OptionKey = {
         [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
     }[keyof Options];
-    interface Options {
+    export interface Options {
         button: {
             cva?: Cva<ButtonVariantProps>;
             sizeCva?: Cva<ButtonVariantProps>;
@@ -46,10 +47,12 @@ export declare namespace UIStyle {
             cva?: Cva<CheckboxVariantProps>;
             iconCva?: Cva<CheckboxIconVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
+            contentClassName?: CompoundMapper<string, CheckboxVariantProps>;
         };
         radio: {
             cva?: Cva<RadioVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
+            contentClassName?: CompoundMapper<string, RadioVariantProps>;
         };
         status: {
             iconCva?: Cva<ToastVariantProps>;
@@ -74,6 +77,7 @@ export declare namespace UIStyle {
         toggle: {
             cva?: Cva<ToggleVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
+            contentClassName?: CompoundMapper<string, ToggleVariantProps>;
         };
         typography: {
             cva?: Cva<TypographyVariantProps>;
@@ -145,6 +149,7 @@ export declare namespace UIStyle {
             cva?: Cva<PopoverVariantProps>;
         };
         formField: {
+            headerCva?: Cva<FormFieldHeaderVariantProps>;
             errorLabelCva?: Cva<FormFieldErrorVariantProps>;
             helperLabelCva?: Cva<FormFieldHelperVariantProps>;
         };

package/dist/helpers/dynamicInputs.d.ts

@@ -21,14 +21,14 @@ export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
     datetime: "datePicker" | "dateTimePicker" | "timePicker";
     dateRange: "dateRangePicker";
     boolean: "toggle" | "checkbox";
-    number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
-    enum: "select" | "autocomplete" | "segment";
-    string: "textInput" | "passwordInput" | "textArea" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    number: "numberInput" | "slider" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    enum: "select" | "querySelect" | "autocomplete" | "segment";
+    string: "textInput" | "passwordInput" | "textArea" | "textEditor" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     email: "textInput";
-    array: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    array: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     object: InputComponentType;
     unknown: InputComponentType;
-    uuid: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    uuid: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
 }>;
 interface DynamicInputDefBase<TProps> {
     label?: string;

package/dist/helpers/dynamicInputs.js

@@ -81,6 +81,7 @@ var getDefaultProps = (componentType, keyType) => {
 	].includes(componentType)) props.items = getDefaultSelectionItems(unwrappedType);
 	if ([
 		"select",
+		"querySelect",
 		"autocomplete",
 		"queryAutocomplete",
 		"segment"
@@ -146,6 +147,8 @@ var populateInputDef = (schema, schemaKey, value, options) => {
 	const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
 	if ("render" in value) return {
 		name,
+		label,
+		placeholder,
 		render: value.render
 	};
 	const schemaKeyType = schema.shape[schemaKey];

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -0,0 +1,25 @@
+import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { SelectItem } from '../components/inputs/Selection/shared/select.types';
+type QueryResult<TData = any> = UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
+type QueryFn<TData = any> = (...args: any[]) => QueryResult<TData>;
+type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
+interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
+    query: TQueryFn;
+    queryParams?: Parameters<TQueryFn>[0];
+    queryOptions?: Parameters<TQueryFn>[1];
+    mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
+    initialQueryState?: boolean;
+    search?: string;
+}
+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: SelectItem<TKey>[];
+    hasNextPage: boolean;
+    fetchNextPage: (() => Promise<unknown>) | ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<any, Error>>) | undefined;
+    isFetchingNextPage: boolean;
+};
+export {};

package/dist/hooks/useQueryAutocomplete.js

@@ -0,0 +1,41 @@
+import { useMemo, useState } from "react";
+//#region src/hooks/useQueryAutocomplete.ts
+var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
+	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
+	const queryResult = query(search === void 0 ? queryParams : {
+		search,
+		...queryParams
+	}, {
+		...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 isInfiniteQuery = isInfiniteQueryResult(queryResult);
+	const handleEnableQuery = () => {
+		setIsQueryEnabled(true);
+	};
+	const infiniteQueryResult = isInfiniteQuery ? queryResult : void 0;
+	const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
+	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
+	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
+	const items = useMemo(() => {
+		if (!data) return [];
+		return mapItems(data);
+	}, [data, mapItems]);
+	return {
+		data,
+		isLoading: isLoading || isFetchingNextPage,
+		isQueryEnabled,
+		handleEnableQuery,
+		items,
+		hasNextPage,
+		fetchNextPage,
+		isFetchingNextPage
+	};
+};
+//#endregion
+export { useQueryAutocomplete };

package/dist/index.d.ts

@@ -94,6 +94,10 @@ export type { RadioVariantProps } from './components/inputs/RadioGroup/radio.cva
 export type { AutocompleteProps, ControlledAutocompleteProps, } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { Autocomplete } from './components/inputs/Selection/Autocomplete/Autocomplete';
 export { QueryAutocomplete } from './components/inputs/Selection/Autocomplete/QueryAutocomplete';
+export type { SelectBaseProps } from './components/inputs/Selection/shared/SelectBase';
+export type { DefaultInitialSelectItem, SelectAsyncProps, SelectItem, } from './components/inputs/Selection/shared/select.types';
+export type { QuerySelectProps } from './components/inputs/Selection/Select/QuerySelect';
+export { QuerySelect } from './components/inputs/Selection/Select/QuerySelect';
 export type { ControlledSelectProps, SelectProps } from './components/inputs/Selection/Select/Select';
 export { Select } from './components/inputs/Selection/Select/Select';
 export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';

package/dist/index.js

@@ -68,10 +68,10 @@ import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { Tag } from "./components/text/Tag/Tag.js";
-import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
 import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
 import { Select } from "./components/inputs/Selection/Select/Select.js";
@@ -92,6 +92,8 @@ import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/Qu
 import { Slider } from "./components/inputs/Slider/Slider.js";
 import { Toggle } from "./components/inputs/Toggle/Toggle.js";
 import { Segment } from "./components/segment/Segment.js";
+import { QuerySelect } from "./components/inputs/Selection/Select/QuerySelect.js";
+import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
 import { StringUtils } from "./utils/string.utils.js";
 import { dynamicInputs } from "./helpers/dynamicInputs.js";
 import { Form } from "./components/inputs/Inputs/Form.js";
@@ -102,7 +104,6 @@ import { Stepper } from "./components/navigation/Stepper/Stepper.js";
 import { Modal } from "./components/overlays/Modal/Modal.js";
 import { ActionModal } from "./components/overlays/ActionModal/ActionModal.js";
 import { Drawer } from "./components/overlays/Drawer/Drawer.js";
-import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
 import { TooltipEllipsis } from "./components/overlays/Tooltip/TooltipEllipsis.js";
 import { PaginationList } from "./components/shared/pagination/PaginationList.js";
 import { Pagination } from "./components/shared/pagination/Pagination.js";
@@ -135,4 +136,4 @@ import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
 import { ArrayUtils } from "./utils/array.utils.js";
 import { QueriesUtils } from "./utils/queries.utils.js";
 import { RoutingUtils } from "./utils/routing.utils.js";
-export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
+export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };

package/package.json

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