@povio/ui 2.2.9-rc.1 → 2.2.9-rc.3

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -1,12 +1,12 @@
 import { CalendarDate, DateValue } from '@internationalized/date';
-import { Ref } from 'react';
+import { Ref, FocusEvent } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isClearable?: boolean;
@@ -16,6 +16,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     disableManualEntry?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -5,6 +5,7 @@ import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -12,13 +13,14 @@ import { useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { CalendarDate, createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
+var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -39,6 +41,10 @@ var DatePickerBase = (props) => {
 	useImperativeHandle(ref, () => ({ clear: () => {
 		datePickerInputRef.current?.clear();
 	} }));
+	const handleBlur = (val) => {
+		onBlur?.({ target: { value: val } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -57,6 +63,7 @@ var DatePickerBase = (props) => {
 			onChange?.(val);
 			dialogState.setValue(val);
 			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+			debouncedBlur(val);
 		},
 		shouldCloseOnSelect: false
 	});
@@ -88,8 +95,10 @@ var DatePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		state.toggle();
+		handleBlur(newValue);
 	};
 	const onTodayPress = () => {
 		dialogState.setValue(today(getLocalTimeZone()));
@@ -114,7 +123,10 @@ var DatePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps,
+				fieldProps: {
+					...fieldProps,
+					placeholderValue: PLACEHOLDER_VALUE
+				},
 				buttonProps,
 				isDirty,
 				isDisabled,
@@ -129,7 +141,7 @@ var DatePickerBase = (props) => {
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName
-			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
 					isValid: !dialogState.isInvalid && !!dialogState.value,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import { CalendarDate } from '@internationalized/date';
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DateRangePickerStateOptions } from 'react-stately';
@@ -7,7 +7,7 @@ import { DatePickerInputHandle } from '../shared/DatePickerInput';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isClearable?: boolean;
@@ -18,6 +18,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     disableManualEntry?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -6,6 +6,7 @@ import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,7 +24,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -43,6 +44,7 @@ var DateRangePickerBase = (props) => {
 			if (isValidRange(newValue)) return;
 			onChange?.(newValue);
 			handleCalendarStatesChange(newValue);
+			debouncedBlur(newValue);
 		},
 		shouldCloseOnSelect: false
 	});
@@ -60,6 +62,10 @@ var DateRangePickerBase = (props) => {
 	useImperativeHandle(ref, () => ({ clear: () => {
 		datePickerInputRef.current?.clear();
 	} }));
+	const handleBlur = (newValue) => {
+		onBlur?.({ target: { value: newValue } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const formFieldProps = {
 		error: error || validationRangeError,
 		label,
@@ -321,7 +327,10 @@ var DateRangePickerBase = (props) => {
 			start: rangeSelection.start,
 			end: rangeSelection.end
 		} : dialogState.value;
-		if (valueToApply) state.setValue(valueToApply);
+		if (valueToApply) {
+			state.setValue(valueToApply);
+			handleBlur(valueToApply);
+		}
 		state.toggle();
 	};
 	const onTodayPress = () => {

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
@@ -6,7 +6,7 @@ import { DatePickerInputHandle } from '../shared/DatePickerInput';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<DateValue>, "granularity" | "shouldCloseOnSelect" | "label"> {
+interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<DateValue>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isTimeOptional?: boolean;
@@ -16,6 +16,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     disableManualEntry?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -5,6 +5,7 @@ import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
@@ -16,7 +17,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -37,6 +38,10 @@ var DateTimePickerBase = (props) => {
 	useImperativeHandle(ref, () => ({ clear: () => {
 		datePickerInputRef.current?.clear();
 	} }));
+	const handleBlur = (val) => {
+		onBlur?.({ target: { value: val } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -56,6 +61,7 @@ var DateTimePickerBase = (props) => {
 			onChange?.(val);
 			dialogState.setValue(val);
 			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+			debouncedBlur(val);
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -91,8 +97,10 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		state.toggle();
+		handleBlur(newValue);
 	};
 	const onTodayPress = () => {
 		dialogState.setValue(toCalendarDateTime(now(getLocalTimeZone())));

package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
+import { Ref, FocusEvent } from 'react';
 import { AriaTimeFieldProps, TimeValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label"> {
+interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label" | "onBlur"> {
     ref?: Ref<HTMLDivElement>;
     disableDropdown?: boolean;
     date?: string | null;
@@ -13,6 +13,7 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     disableManualEntry?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -4,6 +4,7 @@ import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,7 +19,7 @@ import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -40,11 +41,18 @@ var TimePickerBase = (props) => {
 		defaultValue: value || rest.defaultValue,
 		locale
 	});
+	const handleBlur = (val) => {
+		onBlur?.({ target: { value: val } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const state = useTimeFieldState({
 		...rest,
 		isDisabled,
 		value,
-		onChange,
+		onChange: (val) => {
+			onChange?.(val);
+			debouncedBlur(val);
+		},
 		locale
 	});
 	useEffect(() => {
@@ -72,8 +80,10 @@ var TimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		setIsOpen(false);
+		handleBlur(newValue);
 	};
 	const onOpenChange = (open) => {
 		setIsOpen(open);

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -41,6 +41,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			if (endFieldProps) endFieldProps.onChange?.(null);
 			setCanClear(false);
 			fieldProps.onBlur?.(null);
+			endFieldProps?.onBlur?.(null);
 		},
 		getContainer: () => containerRef.current
 	}));
@@ -51,7 +52,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		dateFieldRef.current?.clearField();
 		fieldProps.onChange?.(null);
 		endDateFieldRef.current?.clearField();
+		endFieldProps?.onChange?.(null);
 		setCanClear(false);
+		fieldProps.onBlur?.(null);
+		endFieldProps?.onBlur?.(null);
 	};
 	const onToday = () => {
 		if (isDateTime) {
@@ -62,6 +66,8 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			fieldProps.onChange?.(today(getLocalTimeZone()));
 			if (endFieldProps) endFieldProps.onChange?.(today(getLocalTimeZone()));
 		}
+		fieldProps.onBlur?.(null);
+		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -74,7 +74,10 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 				as
 			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
 			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => state.setValue(null),
+				onClear: () => {
+					state.setValue(null);
+					fieldProps.onBlur?.(null);
+				},
 				show: canClear
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -75,6 +75,8 @@ var TextInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", as === "inline" && "h-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
+			"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+			"data-is-required": isRequired || void 0,
 			children: /* @__PURE__ */ jsx("div", {
 				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 					variant,

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -11,23 +11,21 @@ declare const componentRegistry: {
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly select: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/Select').ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends (...args: any) => import('@tanstack/react-query').UseQueryResult<TSelectItem[]>>({ query, queryParams, queryOptions, ...props }: import('../../../types/common').OmitDiscriminatedUnion<import('../Selection/Autocomplete/Autocomplete').AutocompleteProps<Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never>, "onChange" | "value" | "items" | "selectionMode" | "isLoading" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent" | "onSearchChange"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never> & {
-        query: Parameters<TQueryFn>[0] extends {
-            search?: string;
-        } ? TQueryFn : never;
-        queryParams?: Omit<Parameters<TQueryFn>[0], "search"> | undefined;
+    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('../../../types/common').OmitDiscriminatedUnion<import('../Selection/shared/SelectBase').SelectBaseProps<TKey>, "onChange" | "value" | "items" | "selectionMode" | "isLoading" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, TKey> & {
+        query: TQueryFn;
+        queryParams?: Parameters<TQueryFn>[0] | undefined;
         queryOptions?: Parameters<TQueryFn>[1] | undefined;
+        queryMap?: ((data: Exclude<ReturnType<TQueryFn>["data"], undefined>) => import('../Selection/shared/select.types').SelectItem<TKey>[]) | undefined;
+        isInitialQueryDisabled?: boolean;
     })) => import("react/jsx-runtime").JSX.Element;
+    readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     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;
     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;
     readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../../../text-editor.js').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;

package/dist/components/inputs/Inputs/InputItem.js

@@ -13,6 +13,8 @@ import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.j
 import { Slider } from "../Slider/Slider.js";
 import { Toggle } from "../Toggle/Toggle.js";
 import { Segment } from "../../segment/Segment.js";
+import { QuerySelect } from "../Selection/Select/QuerySelect.js";
+import { TextEditor } from "../TextEditor/TextEditor.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/InputItem.tsx
 var componentRegistry = {
@@ -24,6 +26,7 @@ var componentRegistry = {
 	passwordInput: PasswordInput,
 	textArea: TextArea,
 	select: Select,
+	querySelect: QuerySelect,
 	autocomplete: Autocomplete,
 	queryAutocomplete: QueryAutocomplete,
 	segment: Segment,
@@ -31,6 +34,7 @@ var componentRegistry = {
 	dateTimePicker: DateTimePicker,
 	timePicker: TimePicker,
 	dateRangePicker: DateRangePicker,
+	textEditor: TextEditor,
 	unknown: null
 };
 function InputItem({ form, inputDef }) {

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts

@@ -1,19 +1,4 @@
-import { UseQueryResult } from '@tanstack/react-query';
-import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { AutocompleteProps } from './Autocomplete';
-import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
-import { OmitDiscriminatedUnion } from '../../../../types/common';
-type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any) => UseQueryResult<Array<TSelectItem>>;
-type TKey<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-    id: infer InferredKey extends Key;
-} ? InferredKey : never;
-type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TKey<TQueryFn>>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey<TQueryFn>> & {
-    query: Parameters<TQueryFn>[0] extends {
-        search?: string;
-    } ? TQueryFn : never;
-    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
-    queryOptions?: Parameters<TQueryFn>[1];
-};
-export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { QueryAutocompleteProps, QueryFn } from './queryAutocomplete.types';
+import { SelectItem } from '../shared/select.types';
+export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,35 @@
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.js";
+import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
+var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
+	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
-	const { data: items, isLoading } = query({
+	const mapItems = (data) => {
+		const extractedData = Array.isArray(data) ? data : data.pages.flatMap((page) => page.items ?? []);
+		return queryMap?.(extractedData) ?? extractedData;
+	};
+	const { items, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: (data) => mapItems(data),
 		search,
-		...queryParams
-	}, queryOptions);
+		initialQueryState: props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
+	});
+	const { isInitialQueryDisabled: _, ...restProps } = props;
 	return /* @__PURE__ */ jsx(Autocomplete, {
-		...props,
-		items: items ?? [],
+		...restProps,
+		items,
 		onSearchChange: setSearch,
 		isClientSearchDisabled: true,
-		isLoading
+		isLoading,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0
 	});
 };
 //#endregion

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

@@ -0,0 +1,30 @@
+import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { AutocompleteProps } from './Autocomplete';
+import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
+export interface QueryAutocompleteInfinitePage<TSelectItem extends SelectItem = SelectItem> {
+    items: Array<TSelectItem>;
+    totalItems?: number;
+}
+export type QueryResult<TSelectItem extends SelectItem = SelectItem> = UseQueryResult<Array<TSelectItem>> | UseInfiniteQueryResult<QueryAutocompleteInfinitePage<TSelectItem>>;
+export type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any[]) => QueryResult<TSelectItem>;
+export type QueryAutocompleteExtractedData<TSelectItem extends SelectItem = SelectItem> = Array<TSelectItem>;
+export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TSelectItem["id"]>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TSelectItem["id"]> & {
+    query: Parameters<TQueryFn>[0] extends {
+        search?: string;
+    } ? TQueryFn : never;
+    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
+    queryOptions?: Parameters<TQueryFn>[1];
+    queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TSelectItem["id"]>[];
+    isInitialQueryDisabled?: boolean;
+};
+export interface UseQueryAutocompleteOptions<TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>, TKey extends Key = QueryAutocompleteExtractedData<TSelectItem>[number]["id"]> {
+    query: TQueryFn;
+    queryParams?: Parameters<TQueryFn>[0];
+    queryOptions?: Parameters<TQueryFn>[1];
+    queryMap?: (data: QueryAutocompleteExtractedData<TSelectItem>) => SelectItem<TKey>[];
+    initialQueryState?: boolean;
+    search: string;
+}

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

@@ -0,0 +1,15 @@
+import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
+import { SelectBaseProps } from '../shared/SelectBase';
+import { QueryDataType, QueryFn } from '../shared/querySelect.utils';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
+import { Key } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key> = OmitDiscriminatedUnion<SelectBaseProps<TKey>, "items" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey> & {
+    query: TQueryFn;
+    queryParams?: Parameters<TQueryFn>[0];
+    queryOptions?: Parameters<TQueryFn>[1];
+    queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
+    isInitialQueryDisabled?: boolean;
+};
+export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, queryMap, ...props }: QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { SelectBase } from "../shared/SelectBase.js";
+import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
+import { getQueryItems } from "../shared/querySelect.utils.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+//#region src/components/inputs/Selection/Select/QuerySelect.tsx
+var QuerySelect = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { items, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: (data) => getQueryItems(data, queryMap),
+		initialQueryState: props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled
+	});
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref, isInitialQueryDisabled: _, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				items,
+				isLoading,
+				hasLoadMore: hasNextPage,
+				onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+				value: field.value,
+				onChange: (value) => {
+					field.onChange(value);
+					field.onBlur?.();
+				},
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message,
+				onMouseEnter: handleEnableQuery,
+				onFocusCapture: handleEnableQuery
+			})
+		});
+	}
+	const { isInitialQueryDisabled: _, ...restProps } = props;
+	return /* @__PURE__ */ jsx(SelectBase, {
+		...restProps,
+		items,
+		isLoading,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery
+	});
+};
+//#endregion
+export { QuerySelect };

package/dist/components/inputs/Selection/shared/SelectBase.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, ReactElement, Ref } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { Key } from 'react-aria-components';
 import { FormFieldProps } from '../../FormField/FormField';
@@ -25,5 +25,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 };
 export declare const SelectBase: <TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(dProps: SelectBaseProps<TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectDesktopProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
 import { useLabel, usePreventScroll } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
-var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
+var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
 	const popoverCva = UIStyle.useCva("popover.cva", popover);
 	const formFieldProps = {
@@ -119,6 +119,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 					children: /* @__PURE__ */ jsx("div", {
 						...fieldProps,
 						ref: mergeRefs(ref, triggerRef),
+						onMouseEnter,
+						onFocusCapture,
 						children: customTrigger
 					})
 				}) : /* @__PURE__ */ jsx(SelectInput, {

package/dist/components/inputs/Selection/shared/SelectInput.d.ts

@@ -4,12 +4,12 @@ import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { SelectBaseProps } from './SelectBase';
 import { SelectItem } from './select.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange" | "onMouseEnter" | "onFocusCapture"> {
     isInvalid?: boolean;
     className?: string;
     fieldProps?: AriaFieldProps;
     headerProps?: FormFieldHeaderProps;
     onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
 }
-export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,7 +14,7 @@ import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/Selection/shared/SelectInput.tsx
-var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, ...props }) => {
+var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, onMouseEnter, onFocusCapture, ...props }) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const { t } = useTranslation("ui");
@@ -83,6 +83,8 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 		"data-is-required": isRequired || void 0,
 		"data-is-dirty": isDirty || void 0,
 		"data-select-input": "",
+		onMouseEnter,
+		onFocusCapture,
 		...hoverProps,
 		...focusWithinProps,
 		children: [

package/dist/components/inputs/Selection/shared/SelectMobile.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
 import { SelectBaseProps } from './SelectBase';
 type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
-export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ 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 }) => {
+var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, 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,
@@ -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,

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.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

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

@@ -25,6 +25,12 @@ export declare namespace UIConfig {
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
         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">;

package/dist/config/uiConfig.context.js

@@ -34,6 +34,8 @@ var UIConfig;
 			hideSearchIcon: false,
 			fireBlurOnChange: false
 		},
+		queryAutocomplete: { isInitialQueryDisabled: false },
+		querySelect: { isInitialQueryDisabled: false },
 		toggle: { variant: "default" },
 		slider: {
 			minValue: 0,

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" | "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/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.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,7 @@ 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 { 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 +103,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";

package/package.json

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