@povio/ui 2.3.0-rc.18 → 2.3.0-rc.19

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

@@ -25,6 +25,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     shouldUpdateDateOnMonthYearChange?: boolean;
     granularity?: DatePickerGranularity;
     format?: string;
+    fireBlurOnChange?: boolean;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

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

@@ -26,7 +26,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 var DATE_PICKER_TIME_ZONE = "UTC";
 var 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, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, 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, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, ...rest } = props;
 	const as = asProp ?? ui.input.as;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
@@ -40,6 +40,7 @@ var DatePickerBase = (props) => {
 	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
 	const granularity = granularityProp ?? ui.dateInput.granularity;
 	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const fireBlurOnChange = fireBlurOnChangeProp ?? ui.dateInput.fireBlurOnChange;
 	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -94,7 +95,7 @@ var DatePickerBase = (props) => {
 			}
 			onChange?.(normalizedValue);
 			dialogState.setValue(normalizedValue);
-			debouncedBlur(normalizedValue);
+			if (fireBlurOnChange) debouncedBlur(normalizedValue);
 			if (normalizedValue) {
 				calendarState.setFocusedDate(normalizedValue);
 				return;
@@ -134,7 +135,7 @@ var DatePickerBase = (props) => {
 		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
 		state.setValue(newValue);
 		state.toggle();
-		handleBlur(newValue);
+		if (fireBlurOnChange) handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
@@ -208,7 +209,8 @@ var DatePickerBase = (props) => {
 				className: inputClassName,
 				dateGranularity: granularity,
 				format,
-				timeZone: DATE_PICKER_TIME_ZONE
+				timeZone: DATE_PICKER_TIME_ZONE,
+				fireBlurOnChange
 			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

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

@@ -23,6 +23,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    fireBlurOnChange?: boolean;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {

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

@@ -31,7 +31,7 @@ var DATE_PICKER_TIME_ZONE = "UTC";
 var 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, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, ...rest } = props;
+	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, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -43,6 +43,7 @@ var DateRangePickerBase = (props) => {
 	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
 	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
 	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const fireBlurOnChange = fireBlurOnChangeProp ?? ui.dateInput.fireBlurOnChange;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {
@@ -62,7 +63,7 @@ var DateRangePickerBase = (props) => {
 			if (isValidRange(newValue)) return;
 			onChange?.(newValue);
 			handleCalendarStatesChange(newValue);
-			debouncedBlur(newValue);
+			if (fireBlurOnChange) debouncedBlur(newValue);
 		},
 		shouldCloseOnSelect: false
 	});
@@ -350,7 +351,7 @@ var DateRangePickerBase = (props) => {
 		} : dialogState.value;
 		if (valueToApply) {
 			state.setValue(valueToApply);
-			handleBlur(valueToApply);
+			if (fireBlurOnChange) handleBlur(valueToApply);
 		}
 		state.toggle();
 	};
@@ -513,7 +514,8 @@ var DateRangePickerBase = (props) => {
 				placeholder,
 				className: inputClassName,
 				onOpenDropdown: () => state.toggle(),
-				timeZone: DATE_PICKER_TIME_ZONE
+				timeZone: DATE_PICKER_TIME_ZONE,
+				fireBlurOnChange
 			}), /* @__PURE__ */ jsx(DateTimeDialog, {
 				hideSidebar,
 				sidebar: /* @__PURE__ */ jsx("div", {

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

@@ -25,6 +25,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     timeZone?: string;
     format?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    fireBlurOnChange?: boolean;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

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

@@ -24,7 +24,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, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: _timeZone, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: _timeZone, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
 	const as = asProp ?? ui.input.as;
@@ -37,6 +37,7 @@ var DateTimePickerBase = (props) => {
 	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
 	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
 	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const fireBlurOnChange = fireBlurOnChangeProp ?? ui.dateInput.fireBlurOnChange;
 	const setDateValueOnDateSelection = setDateValueOnDateSelectionProp ?? ui.dateInput.setDateValueOnDateSelection;
 	const effectiveTimeZone = "UTC";
 	const formFieldProps = {
@@ -85,7 +86,7 @@ var DateTimePickerBase = (props) => {
 			onChange?.(val_0);
 			dialogState.setValue(val_0);
 			calendarState.setFocusedDate(val_0 || today(effectiveTimeZone));
-			debouncedBlur(val_0);
+			if (fireBlurOnChange) debouncedBlur(val_0);
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -124,7 +125,7 @@ var DateTimePickerBase = (props) => {
 		const newValue = dialogState.value;
 		state.setValue(newValue);
 		state.toggle();
-		handleBlur(newValue);
+		if (fireBlurOnChange) handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!shouldUpdateDateOnMonthYearChange) return;
@@ -207,7 +208,8 @@ var DateTimePickerBase = (props) => {
 				className: inputClassName,
 				timeZone: effectiveTimeZone,
 				isTimeOptional,
-				format
+				format,
+				fireBlurOnChange
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

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

@@ -14,6 +14,7 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    fireBlurOnChange?: boolean;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;