@povio/ui 3.4.0-rc.42 → 3.4.0-rc.44

package/dist/{Calendar-BaGjTLHS.js → Calendar-H9E8lACh.js}

@@ -2,7 +2,7 @@ import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
 import { t as ChevronLeft } from "./chevron-left-VO8YZrXZ.js";
 import { t as ChevronRight } from "./chevron-right-C_M98bh3.js";
 import { t as ChevronUp } from "./chevron-up-CHRnDSA3.js";
-import { i as CalendarGrid } from "./DatePickerInput-Bo0qxUEY.js";
+import { i as CalendarGrid } from "./DatePickerInput-DcPW7kKS.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, h as $bdb11010cef70236$export$f680877a34711e37 } from "./utils-D-KKbY-n.js";
 import { t as $d4ee10de306f2510$export$4282f70798064fe0 } from "./DOMFunctions-BrQjsnDh.js";

package/dist/{Checkbox-BPbSqonT.js → Checkbox-Bg_KpTR1.js}

@@ -15,7 +15,7 @@ import { t as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-BVczUvgv
 import { t as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-BTtw_Syz.js";
 import { n as $ee014567cb39d3f0$export$ff05c3ac10437e03, t as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-CKUcoaMX.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { t as FormFieldError } from "./FormFieldError-CFg0Wn3i.js";
 import { t as CheckContent } from "./CheckContent-DzWpxKGq.js";
 import $HgANd$react, { createContext, forwardRef, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -389,7 +389,10 @@ const CheckboxComponent = (props) => {
 				...innerProps,
 				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
 				isSelected: field.value,
-				onChange: field.onChange,
+				onChange: (value) => {
+					field.onChange(value);
+					field.onBlur();
+				},
 				onBlur: field.onBlur,
 				name: field.name,
 				isDirty,

package/dist/{DatePicker-BJ2wsMwp.js → DatePicker-DyAL-7Ze.js}

@@ -1,12 +1,12 @@
 import { t as UIConfig } from "./uiConfig.context-BG4jfp9p.js";
-import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-Bo0qxUEY.js";
+import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-DcPW7kKS.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { f as $5dc95899b306f630$export$c9058316764c140e } from "./utils-D-KKbY-n.js";
 import { d as useCalendarState, i as getStaticDateTimeFocusTarget, o as DateTimeDialogFooter, p as useDatePickerState, s as DateTimeDialog, t as getStaticCalendarDateSegments } from "./staticDateTimeSegments-Cefwvojy.js";
 import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-74MZZLC0.js";
-import { r as $6057a3d2a53a12fd$export$42df105a73306d51, t as Calendar } from "./Calendar-BaGjTLHS.js";
+import { r as $6057a3d2a53a12fd$export$42df105a73306d51, t as Calendar } from "./Calendar-H9E8lACh.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { t as FormField } from "./FormField-Cl-t5Wi1.js";
 import { t as TooltipWrapper } from "./TooltipWrapper-_N-GOMaV.js";
 import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-F7xAex_x.js";
@@ -18,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 const DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, onValueCommit, ...rest } = props;
 	const as = asProp ?? ui.input.as;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
@@ -128,6 +128,7 @@ const DatePickerBase = (props) => {
 	const onApply = () => {
 		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
 		state.setValue(newValue);
+		onValueCommit?.();
 		state.toggle();
 	};
 	const onMonthYearChange = (selectedDate) => {
@@ -151,6 +152,7 @@ const DatePickerBase = (props) => {
 	const onInputClear = () => {
 		onChange?.(null);
 		dialogState.setValue(null);
+		onValueCommit?.();
 	};
 	const syncDialogFromControlledValue = () => {
 		dialogState.setValue(state.value);
@@ -234,7 +236,8 @@ const DatePickerBase = (props) => {
 				dateGranularity: granularity,
 				format,
 				timeZone: effectiveTimeZone,
-				onClear: onInputClear
+				onClear: onInputClear,
+				onValueCommit
 			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -343,7 +346,10 @@ const DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxVal
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onClear: () => props.onChange?.(null),
+			onClear: () => {
+				props.onChange?.(null);
+				props.onValueCommit?.();
+			},
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -399,6 +405,7 @@ const DatePickerComponent = ({ fullIso = true, granularity = "day", minValue, ma
 				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
 				value: field.value ?? null,
 				onChange: (value) => field.onChange(value ?? null),
+				onValueCommit: field.onBlur,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,

package/dist/{DatePicker-aWuhaUgu.d.ts → DatePicker-KFZRDJfS.d.ts}

@@ -24,11 +24,12 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
   placeholder?: string;
   inputClassName?: string;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  onValueCommit?: () => void;
   shouldUpdateDateOnMonthYearChange?: boolean;
   granularity?: DatePickerGranularity;
   format?: string;
 }
-interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue" | "onValueCommit"> {
   value?: string | null;
   onChange?: (value: string | null) => void;
   fullIso?: boolean;

package/dist/{DatePickerInput-Bo0qxUEY.js → DatePickerInput-DcPW7kKS.js}

@@ -421,7 +421,7 @@ const renderDatePickerTodayIcon = (todayIcon, options) => {
 };
 //#endregion
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, displayContent, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, displayContent, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, onValueCommit, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
 	let effectiveTimeZone = getLocalTimeZone();
@@ -488,6 +488,7 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, field
 			fieldProps.onChange?.(today(effectiveTimeZone));
 			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
 		}
+		onValueCommit?.();
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
 	const todayIconButton = renderDatePickerTodayIcon(todayIcon, {

package/dist/{DateRangePicker-DQ6OxWBk.js → DateRangePicker-CNkQIrwx.js}

@@ -3,7 +3,7 @@ import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
 import { t as ChevronLeft } from "./chevron-left-VO8YZrXZ.js";
 import { t as ChevronRight } from "./chevron-right-C_M98bh3.js";
 import { n as ChevronsLeft, t as ChevronsRight } from "./chevrons-right-BXdmZ2TS.js";
-import { i as CalendarGrid, n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-Bo0qxUEY.js";
+import { i as CalendarGrid, n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-DcPW7kKS.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $5dc95899b306f630$export$c9058316764c140e, h as $bdb11010cef70236$export$f680877a34711e37 } from "./utils-D-KKbY-n.js";
 import { t as $d4ee10de306f2510$export$4282f70798064fe0 } from "./DOMFunctions-BrQjsnDh.js";
@@ -15,18 +15,18 @@ import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-D09S1dN
 import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-74MZZLC0.js";
 import { n as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-tBB7tXBj.js";
 import { n as $e5be200c675c3b3a$export$a763b9476acd3eb, r as $e5be200c675c3b3a$export$dad6ae84456c676a, t as $e5be200c675c3b3a$export$75ee7c75d68f5b0e } from "./useFormValidationState-Bpry7Uk5.js";
-import { t as Toggle } from "./Toggle-D1M-fop2.js";
+import { t as Toggle } from "./Toggle-Cf8jQ991.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
 import { t as Typography } from "./Typography-AcUd9df8.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { PillButton } from "./components/pill-button.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { t as FormField } from "./FormField-Cl-t5Wi1.js";
 import "./i18n-BDjNuy4Z.js";
 import { t as TooltipWrapper } from "./TooltipWrapper-_N-GOMaV.js";
 import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-F7xAex_x.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
-import { t as Select } from "./Select-BLFZVKdH.js";
+import { t as Select } from "./Select-DPG_tS7y.js";
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { useFocusWithin } from "@react-aria/interactions";
@@ -541,7 +541,7 @@ const hydrateRelativeDateRangeValue = (value, currentDate = today(getLocalTimeZo
 const DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, mode = "absolute", relativeValue, relativeOptions = [], onRelativeChange, enableRelativeMode, onModeChange, minValue, maxValue, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, onValueCommit, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, allowPartialRange: allowPartialRangeProp, mode = "absolute", relativeValue, relativeOptions = [], onRelativeChange, enableRelativeMode, onModeChange, minValue, maxValue, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -930,6 +930,7 @@ const DateRangePickerBase = (props) => {
 			const preset = presets.find((option) => option.value === activePreset);
 			handledRelativeValueRef.current = activePreset;
 			onRelativeChange?.(activePreset, preset?.clampedValue ?? null);
+			onValueCommit?.();
 			state.toggle();
 			return;
 		}
@@ -946,6 +947,7 @@ const DateRangePickerBase = (props) => {
 			}
 		}
 		state.toggle();
+		onValueCommit?.();
 	};
 	const onTodayPress = () => {
 		const todayDate = today(effectiveTimeZone);
@@ -966,6 +968,7 @@ const DateRangePickerBase = (props) => {
 			setActivePreset(null);
 			handledRelativeValueRef.current = null;
 			onRelativeChange?.(null, null);
+			onValueCommit?.();
 			return;
 		}
 		fieldRangeRef.current = null;
@@ -979,6 +982,7 @@ const DateRangePickerBase = (props) => {
 			isSelecting: false
 		});
 		setHoverDate(null);
+		onValueCommit?.();
 	};
 	const syncSelectionFromControlledValue = () => {
 		if (mode === "relative") {
@@ -1193,7 +1197,8 @@ const DateRangePickerBase = (props) => {
 				className: inputClassName,
 				onOpenDropdown,
 				timeZone: effectiveTimeZone,
-				onClear: onInputClear
+				onClear: onInputClear,
+				onValueCommit
 			}), /* @__PURE__ */ jsx(DateTimeDialog, {
 				hideSidebar,
 				sidebar: /* @__PURE__ */ jsxs("div", {
@@ -1398,6 +1403,7 @@ const DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStatic
 			onClear: () => {
 				props.onChange?.(null);
 				props.onRelativeChange?.(null);
+				props.onValueCommit?.();
 			},
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
@@ -1479,6 +1485,7 @@ const DateRangePickerComponent = ({ fullIso = true, minValue, maxValue, renderSt
 				value: field.value ?? null,
 				onChange: (value) => field.onChange(value ?? null),
 				onBlur: field.onBlur,
+				onValueCommit: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				isFormControlDisabled: !!controlWithOptions._options?.disabled,

package/dist/{DateRangePicker-DpKWDDlC.d.ts → DateRangePicker-DcZ1l894.d.ts}

@@ -25,6 +25,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
   placeholder?: string;
   inputClassName?: string;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  onValueCommit?: () => void;
   allowPartialRange?: boolean;
   mode?: "absolute" | "relative";
   relativeValue?: string | null;
@@ -50,7 +51,7 @@ interface DateRangeResolvedValue {
   start: string;
   end: string;
 }
-interface DateRangePickerSharedProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue" | "mode" | "relativeValue" | "relativeOptions" | "onRelativeChange" | "onModeChange"> {
+interface DateRangePickerSharedProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue" | "mode" | "relativeValue" | "relativeOptions" | "onRelativeChange" | "onModeChange" | "onValueCommit"> {
   fullIso?: boolean;
   minValue?: DateValue$1 | string;
   maxValue?: DateValue$1 | string;

package/dist/{DateTimePicker-5u_9ch2c.js → DateTimePicker-C6RmNdPP.js}

@@ -1,12 +1,12 @@
 import { t as UIConfig } from "./uiConfig.context-BG4jfp9p.js";
-import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-Bo0qxUEY.js";
+import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-DcPW7kKS.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { f as $5dc95899b306f630$export$c9058316764c140e } from "./utils-D-KKbY-n.js";
 import { d as useCalendarState, i as getStaticDateTimeFocusTarget, n as getStaticCalendarDateTimeSegments, o as DateTimeDialogFooter, p as useDatePickerState, s as DateTimeDialog } from "./staticDateTimeSegments-Cefwvojy.js";
 import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-74MZZLC0.js";
-import { r as $6057a3d2a53a12fd$export$42df105a73306d51, t as Calendar } from "./Calendar-BaGjTLHS.js";
+import { r as $6057a3d2a53a12fd$export$42df105a73306d51, t as Calendar } from "./Calendar-H9E8lACh.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { t as FormField } from "./FormField-Cl-t5Wi1.js";
 import { t as TooltipWrapper } from "./TooltipWrapper-_N-GOMaV.js";
 import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-F7xAex_x.js";
@@ -18,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 const DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, shouldShrinkInput, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: timeZoneProp, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, onValueCommit, value, disableDropdown, isTimeOptional, placeholder, inputClassName, shouldShrinkInput, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, isClearableIfDisabled, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: timeZoneProp, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -121,6 +121,7 @@ const DateTimePickerBase = (props) => {
 		const newValue = dialogState.value ?? null;
 		onChange?.(newValue);
 		dialogState.setValue(newValue);
+		onValueCommit?.();
 		state.close();
 	};
 	const onMonthYearChange = (selectedDate) => {
@@ -146,6 +147,7 @@ const DateTimePickerBase = (props) => {
 	const onInputClear = () => {
 		onChange?.(null);
 		dialogState.setValue(null);
+		onValueCommit?.();
 	};
 	const syncDialogFromControlledValue = () => {
 		dialogState.setValue(state.value);
@@ -216,7 +218,8 @@ const DateTimePickerBase = (props) => {
 				timeZone: effectiveTimeZone,
 				isTimeOptional,
 				format,
-				onClear: onInputClear
+				onClear: onInputClear,
+				onValueCommit
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -305,7 +308,10 @@ const DateTimePickerInner = ({ fullIso: _fullIso = true, renderStaticInput, isFo
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
-			onClear: () => props.onChange?.(null),
+			onClear: () => {
+				props.onChange?.(null);
+				props.onValueCommit?.();
+			},
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx(props.shouldShrinkInput ? "min-w-0" : "min-w-input-width-min-width", props.inputClassName),
@@ -360,6 +366,7 @@ const DateTimePickerComponent = ({ fullIso = true, renderStaticInput, ...props }
 				value: field.value ?? null,
 				onChange: (value) => field.onChange(value ?? null),
 				onBlur: field.onBlur,
+				onValueCommit: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				isFormControlDisabled: !!controlWithOptions._options?.disabled,

package/dist/{DateTimePicker-BoTa_gTC.d.ts → DateTimePicker-DWlstLhf.d.ts}

@@ -28,8 +28,9 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
   timeZone?: string;
   format?: string;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  onValueCommit?: () => void;
 }
-interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
+interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange" | "onValueCommit"> {
   value?: string | null;
   onChange?: (value: string | null) => void;
   fullIso?: boolean;

package/dist/{FileUpload-DJFp2ZI8.js → FileUpload-D_kEAfO0.js}

@@ -10,7 +10,7 @@ import { t as Typography } from "./Typography-AcUd9df8.js";
 import { t as Button } from "./Button-7HZojyTP.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { TextButton } from "./components/text-button.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { t as FormField } from "./FormField-Cl-t5Wi1.js";
 import "./i18n-BDjNuy4Z.js";
 import { t as FileUtils } from "./file.utils-DqQxnuAm.js";
@@ -569,7 +569,7 @@ const fileUploadDropZoneDefinition = UIOverrides.defineConfig({
 //#region src/components/inputs/File/FileUpload.tsx
 const FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
-	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, browseButtonProps, cancelButtonProps, onInvalidFileType, defaultState, ...rest } = props;
+	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, browseButtonProps, cancelButtonProps, onInvalidFileType, onChange, defaultState, ...rest } = props;
 	const ui = UIConfig.useConfig();
 	const fileUploadDropZoneCva = UIOverrides.useCva("fileUpload.dropZoneCva", fileUploadDropZoneDefinition);
 	const getInitialState = () => {
@@ -585,6 +585,10 @@ const FileUploadBase = (props) => {
 		return allowsMultiple ? items : items.slice(0, 1);
 	};
 	const [uploadState, setUploadState] = useState(getInitialState);
+	const emitFiles = useCallback((files) => {
+		if (allowsMultiple) onChange?.(files);
+		else onChange?.(files[0] ?? null);
+	}, [allowsMultiple, onChange]);
 	const formFieldProps = {
 		error,
 		label,
@@ -603,7 +607,10 @@ const FileUploadBase = (props) => {
 		const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
 		if (invalidFiles.length > 0) if (allowsMultiple) onInvalidFileType?.(invalidFiles.map((file) => file.name));
 		else onInvalidFileType?.(invalidFiles[0].name);
-		if (acceptedFiles.length === 0 || !fileUpload) return;
+		if (acceptedFiles.length === 0) return;
+		const existingFiles = allowsMultiple ? uploadState.flatMap((state) => state.file ? [state.file] : []) : [];
+		emitFiles([...existingFiles, ...acceptedFiles]);
+		if (!fileUpload) return;
 		if (!allowsMultiple) setUploadState([]);
 		const newUploadState = [];
 		acceptedFiles.forEach((file) => {
@@ -643,9 +650,14 @@ const FileUploadBase = (props) => {
 					id: res.id
 				} : state));
 			});
-			if (clearOnSuccess) setUploadState([]);
+			if (clearOnSuccess) {
+				setUploadState([]);
+				emitFiles([]);
+			}
 		} catch (error) {
-			setUploadState((prev) => prev.filter((_, i) => i < startIndex));
+			const remainingState = uploadState.slice(0, startIndex);
+			setUploadState(remainingState);
+			emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
 			throw error;
 		}
 	};
@@ -665,15 +677,23 @@ const FileUploadBase = (props) => {
 	};
 	const handleRemove = useCallback((id) => {
 		fileRemove?.({ id });
-		setUploadState((prev) => prev.filter((state) => state.id !== id));
-	}, [fileRemove]);
+		const remainingState = uploadState.filter((state) => state.id !== id);
+		setUploadState(remainingState);
+		emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
+	}, [
+		emitFiles,
+		fileRemove,
+		uploadState
+	]);
 	const handleCancelUpload = useCallback((index) => {
 		const findState = uploadState[index];
 		if (findState) {
 			findState.abortController?.abort("canceled by user");
-			setUploadState((prev) => prev.filter((_, i) => i !== index));
+			const remainingState = uploadState.filter((_, i) => i !== index);
+			setUploadState(remainingState);
+			emitFiles(remainingState.flatMap((state) => state.file ? [state.file] : []));
 		}
-	}, [uploadState]);
+	}, [emitFiles, uploadState]);
 	return /* @__PURE__ */ jsxs(FormField, {
 		...formFieldProps,
 		labelProps,
@@ -753,7 +773,10 @@ const FileUploadComponent = (props) => {
 				...innerProps,
 				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
 				value: field.value,
-				onChange: field.onChange,
+				onChange: ((value) => {
+					field.onChange(value);
+					field.onBlur();
+				}),
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})

package/dist/{Form-BjwyXqkN.d.ts → Form-Cnm0yRXZ.d.ts}

@@ -1,5 +1,5 @@
 import { c as UIForm, l as UseFormProps, o as FormSubmitErrorHandler, s as FormSubmitHandler } from "./form.binding-Cu03pQ8Y.js";
-import { c as InputComponentProps, i as DefaultComponentType, r as AllowedComponentType, u as InputDefBaseProps } from "./dynamicInputs-p4ATehFR.js";
+import { c as InputComponentProps, i as DefaultComponentType, r as AllowedComponentType, u as InputDefBaseProps } from "./dynamicInputs-DhCSXGpC.js";
 import { DependencyList, ReactNode } from "react";
 import { z } from "zod";
 //#region src/hooks/useAutosave.d.ts

package/dist/{InputItem-DxWZR7tz.js → InputItem-BgpoT7wO.js}

@@ -1,21 +1,21 @@
 import { t as PasswordInput } from "./PasswordInput-CMKZF3YS.js";
-import { t as Checkbox } from "./Checkbox-BPbSqonT.js";
-import { t as Slider } from "./Slider-DHFimpYt.js";
-import { t as DateRangePicker } from "./DateRangePicker-DQ6OxWBk.js";
-import { t as Toggle } from "./Toggle-D1M-fop2.js";
-import { t as TextArea } from "./TextArea-C1o9LQmC.js";
+import { t as Checkbox } from "./Checkbox-Bg_KpTR1.js";
+import { t as Slider } from "./Slider-DpjeijYH.js";
+import { t as DateRangePicker } from "./DateRangePicker-CNkQIrwx.js";
+import { t as Toggle } from "./Toggle-Cf8jQ991.js";
+import { t as TextArea } from "./TextArea-Bm3QhIRz.js";
 import { TextInput } from "./components/text-input.js";
 import { Autocomplete } from "./components/autocomplete.js";
 import { CheckboxGroup } from "./components/checkbox-group.js";
-import { t as DatePicker } from "./DatePicker-BJ2wsMwp.js";
-import { t as Select } from "./Select-BLFZVKdH.js";
-import { t as DateTimePicker } from "./DateTimePicker-5u_9ch2c.js";
+import { t as DatePicker } from "./DatePicker-DyAL-7Ze.js";
+import { t as Select } from "./Select-DPG_tS7y.js";
+import { t as DateTimePicker } from "./DateTimePicker-C6RmNdPP.js";
 import { NumberInput } from "./components/number-input.js";
-import { t as NumberRangeInput } from "./NumberRangeInput-vYLzGc5z.js";
+import { t as NumberRangeInput } from "./NumberRangeInput-CW7X27p1.js";
 import { QueryAutocomplete } from "./components/query-autocomplete.js";
 import { QuerySelect } from "./components/query-select.js";
-import { t as Segment } from "./Segment-DJ4LRllP.js";
-import { t as TimePicker } from "./TimePicker-BnBipyWE.js";
+import { t as Segment } from "./Segment-BnyGK1kI.js";
+import { t as TimePicker } from "./TimePicker-Bf82rbFG.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/InputItem.tsx

package/dist/{InputUpload-DNMrD6CB.js → InputUpload-BJpTDs3D.js}

@@ -9,7 +9,7 @@ import { t as Typography } from "./Typography-AcUd9df8.js";
 import { t as Button } from "./Button-7HZojyTP.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import { TextButton } from "./components/text-button.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { t as FormField } from "./FormField-Cl-t5Wi1.js";
 import "./i18n-BDjNuy4Z.js";
 import { a as inputSizeDefinition } from "./input.cva-KYGD4Bdz.js";
@@ -220,7 +220,10 @@ const InputUploadComponent = (props) => {
 				...innerProps,
 				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
 				value: field.value,
-				onChange: field.onChange,
+				onChange: ((value) => {
+					field.onChange(value);
+					field.onBlur();
+				}),
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})

package/dist/{Inputs-CwkP8B9O.d.ts → Inputs-Cm1abCeb.d.ts}

@@ -1,5 +1,5 @@
 import { c as UIForm } from "./form.binding-Cu03pQ8Y.js";
-import { l as InputDef } from "./dynamicInputs-p4ATehFR.js";
+import { l as InputDef } from "./dynamicInputs-DhCSXGpC.js";
 import { ReactNode } from "react";
 import { z } from "zod";
 //#region src/components/inputs/Inputs/Inputs.d.ts

package/dist/{Inputs-D845qezj.js → Inputs-DtjIuT7_.js}

@@ -1,4 +1,4 @@
-import { t as InputItem } from "./InputItem-DxWZR7tz.js";
+import { t as InputItem } from "./InputItem-BgpoT7wO.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/Inputs.tsx
 function Inputs({ form, inputDefs, children }) {

package/dist/{NumberRangeInput-1vdHmE8h.d.ts → NumberRangeInput-1ic7kLIS.d.ts}

@@ -33,8 +33,9 @@ interface NumberRangeInputBaseProps extends FormFieldProps, InputVariantProps, O
   onMinChange?: (value: number | null) => void;
   onMaxChange?: (value: number | null) => void;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  onValueCommit?: () => void;
 }
-type NumberRangeInputProps = NumberRangeInputBaseProps & {
+type NumberRangeInputProps = Omit<NumberRangeInputBaseProps, "onValueCommit"> & {
   renderStaticInput?: boolean;
 };
 type ControlledNumberRangeInputProps<TFieldValues extends FieldValues> = ControlProps<NumberRangeInputProps, TFieldValues>;

package/dist/{NumberRangeInput-vYLzGc5z.js → NumberRangeInput-CW7X27p1.js}

@@ -5,7 +5,7 @@ import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-74MZZL
 import { n as $81397a9303501bda$export$23f548e970bdf099, r as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, t as getStaticNumberDisplayValue } from "./numberStatic.utils-DcnGigJ6.js";
 import { n as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "./Input-BefLtZJe.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as FieldController } from "./form.binding-TF1u0Y89.js";
+import { t as FieldController } from "./form.binding-DAAmi5nC.js";
 import { r as FormFieldLabel, t as FormField } from "./FormField-Cl-t5Wi1.js";
 import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
 import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-_N-GOMaV.js";
@@ -66,7 +66,7 @@ const NumberRangeValueField = ({ label, value, placeholder, isDisabled, isInvali
 		})]
 	});
 };
-const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, isClearableIfDisabled, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, ...numberFieldProps }) => /* @__PURE__ */ jsx(TooltipWrapper, {
+const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassName, maxInputClassName, inputBaseClassName, inputSizeClassName, formFieldProps, headerProps, rangeValue, effectiveError, minPlaceholder, maxPlaceholder, minLabel, maxLabel, hideInnerLabels, isDirty, isClearable, isClearableIfDisabled, autoFocusOnMount, isDisabled, isRequired, isEmpty, isHovered, isFocused, isFocusVisible, focusWithinProps, hoverProps, onRangeSideChange, onRangeSideClear, onBlur, onValueCommit, ...numberFieldProps }) => /* @__PURE__ */ jsx(TooltipWrapper, {
 	as,
 	error: effectiveError,
 	triggerTabIndex: as === "inline" ? -1 : void 0,
@@ -117,6 +117,7 @@ const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassNam
 						isClearableIfDisabled,
 						onClear: () => {
 							onRangeSideClear("min");
+							onValueCommit?.();
 						},
 						className: minInputClassName
 					}),
@@ -141,6 +142,7 @@ const NumberRangeField = ({ ref, as, className, inputClassName, minInputClassNam
 						isClearableIfDisabled,
 						onClear: () => {
 							onRangeSideClear("max");
+							onValueCommit?.();
 						},
 						className: maxInputClassName
 					})
@@ -166,7 +168,7 @@ const NumberRangeInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, isClearable: isClearableProps, isClearableIfDisabled, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, inputClassName, minInputClassName, maxInputClassName, value, minValue, maxValue, minPlaceholder = "Min", maxPlaceholder = "Max", minLabel = "Minimum", maxLabel = "Maximum", invalidRangeError = "Minimum cannot be greater than maximum", hideInnerLabels = true, isDirty, autoFocusOnMount, onChange, onMinChange, onMaxChange, onBlur, onValueCommit, isClearable: isClearableProps, isClearableIfDisabled, as: asProp, variant: variantProps, size: sizeProps, hideLabel: hideLabelProps, ...rest } = props;
 	const isClearable = isClearableProps ?? ui.input.isClearable;
 	const as = asProp ?? ui.input.as;
 	const variant = variantProps ?? ui.input.variant;
@@ -255,7 +257,8 @@ const NumberRangeInputBase = (props) => {
 		hoverProps,
 		onRangeSideChange: updateRange,
 		onRangeSideClear: clearRangeSide,
-		onBlur
+		onBlur,
+		onValueCommit
 	});
 };
 const NumberRangeInputInner = ({ renderStaticInput, isFormControlDisabled, ...props }) => {
@@ -330,7 +333,13 @@ const NumberRangeInputInner = ({ renderStaticInput, isFormControlDisabled, ...pr
 							...dataAttributeProps,
 							"data-rac": true
 						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
-							onClear: () => {},
+							onClear: () => {
+								props.onChange?.({
+									...staticValue,
+									min: null
+								});
+								props.onValueCommit?.();
+							},
 							show: staticValue.min !== null,
 							renderStatic: true
 						})]
@@ -360,7 +369,13 @@ const NumberRangeInputInner = ({ renderStaticInput, isFormControlDisabled, ...pr
 							...dataAttributeProps,
 							"data-rac": true
 						}), isClearable && (!isDisabled || props.isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
-							onClear: () => {},
+							onClear: () => {
+								props.onChange?.({
+									...staticValue,
+									max: null
+								});
+								props.onValueCommit?.();
+							},
 							show: staticValue.max !== null,
 							renderStatic: true
 						})]
@@ -386,6 +401,7 @@ const NumberRangeInputComponent = ({ renderStaticInput, ...props }) => {
 				value: field.value ?? EMPTY_RANGE,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
+				onValueCommit: field.onBlur,
 				isDisabled: field.disabled || !!controlWithOptions._options?.disabled || props.isDisabled,
 				isFormControlDisabled: !!controlWithOptions._options?.disabled,
 				error: props.error ?? error?.message,