@povio/ui 2.2.9-rc.2 → 2.2.9-rc.4

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/Inputs/InputItem.d.ts

@@ -11,13 +11,7 @@ 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 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 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;
     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;
@@ -54,8 +48,8 @@ type TypeBasedInputDef<TSchemaType extends Record<string, any>, T extends InputC
 interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends keyof TSchemaType> {
     type?: never;
     name: K;
-    label?: never;
-    placeholder?: never;
+    label?: string;
+    placeholder?: string;
     props?: never;
     inputWrapper?: never;
     render: (formControl: {

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

@@ -4,7 +4,7 @@ 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> & {
+export 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];
@@ -12,4 +12,3 @@ type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn
     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/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/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/index.d.ts

@@ -94,6 +94,8 @@ 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 { 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,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 { 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";
@@ -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.9-rc.2",
+  "version": "2.2.9-rc.4",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",