@povio/ui 3.3.0-rc.4 → 3.4.0-rc.1

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

@@ -1,5 +1,6 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FieldController } from "../../shared/form.binding.js";
 import { FormField } from "../../FormField/FormField.js";
 import { Calendar } from "../shared/Calendar.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
@@ -12,21 +13,18 @@ import { getStaticCalendarDateSegments, getStaticDateTimeFocusTarget } from "../
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } 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 { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 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, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, 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, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
 	const as = asProp ?? ui.input.as;
 	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const variant = variantProp ?? ui.input.variant;
@@ -41,7 +39,6 @@ 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 timeZone = ui.dateInput.timeZone;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
@@ -79,7 +76,6 @@ var DatePickerBase = (props) => {
 	const handleBlur = (val) => {
 		onBlur?.({ target: { value: val } });
 	};
-	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const normalizedValue = value ?? null;
 	const dialogState = useDatePickerState({
 		...rest,
@@ -100,7 +96,6 @@ var DatePickerBase = (props) => {
 			}
 			onChange?.(normalizedValue_0);
 			dialogState.setValue(normalizedValue_0);
-			if (fireBlurOnChange) debouncedBlur(normalizedValue_0);
 			if (normalizedValue_0) {
 				calendarState.setFocusedDate(normalizedValue_0);
 				return;
@@ -140,7 +135,6 @@ var DatePickerBase = (props) => {
 		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
 		state.setValue(newValue);
 		state.toggle();
-		if (fireBlurOnChange) handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
@@ -162,8 +156,19 @@ var DatePickerBase = (props) => {
 	const onInputClear = () => {
 		onChange?.(null);
 		dialogState.setValue(null);
-		if (fireBlurOnChange) handleBlur(null);
 	};
+	const syncDialogFromControlledValue = () => {
+		dialogState.setValue(state.value);
+		if (state.value) {
+			calendarState.setFocusedDate(normalizeByGranularity(state.value));
+			return;
+		}
+		calendarState.setFocusedDate(today(effectiveTimeZone));
+	};
+	useEffect(() => {
+		if (!state.isOpen) return;
+		syncDialogFromControlledValue();
+	}, [state.isOpen]);
 	useEffect(() => {
 		if (!state.isOpen) return;
 		if (granularity !== "year") return;
@@ -180,11 +185,13 @@ var DatePickerBase = (props) => {
 		normalizeByGranularity,
 		effectiveTimeZone
 	]);
-	const onOpenChange = (isOpen) => {
+	const onOpenChange = (_isOpen) => {
+		state.toggle();
+		syncDialogFromControlledValue();
+	};
+	const onOpenDropdown = () => {
+		syncDialogFromControlledValue();
 		state.toggle();
-		if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
-		if (!state.value) calendarState.setFocusedDate(today(effectiveTimeZone));
-		if (!isOpen) dialogState.setValue(state.value);
 	};
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
@@ -225,13 +232,12 @@ var DatePickerBase = (props) => {
 				todayIconButtonSize,
 				todayIconButtonComponent,
 				todayIconPlacement,
-				onOpenDropdown: () => state.toggle(),
+				onOpenDropdown,
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,
 				format,
 				timeZone: effectiveTimeZone,
-				fireBlurOnChange,
 				onClear: onInputClear
 			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
@@ -258,11 +264,7 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-var DatePickerInner = (t0) => {
-	const $ = c(28);
-	const { fullIso: t1, granularity: t2, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props } = t0;
-	const fullIso = t1 === void 0 ? true : t1;
-	const granularity = t2 === void 0 ? "day" : t2;
+var DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
 	const { locale } = useLocale();
@@ -273,76 +275,42 @@ var DatePickerInner = (t0) => {
 		inputRef,
 		renderInput,
 		setRenderInput,
-		getFocusTarget: _temp,
-		getPressTarget: _temp2
+		getFocusTarget: (input, staticTarget) => {
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
+		},
+		getPressTarget: (input_0) => {
+			const container_0 = input_0.getContainer?.() ?? input_0;
+			if (!(container_0 instanceof HTMLElement)) return null;
+			return container_0.querySelector("[data-static-press-action]");
+		}
 	});
 	const normalizedValue = props.value ?? null;
-	let t3;
-	if ($[0] !== granularity) {
-		t3 = (date) => {
-			if (granularity === "year") return date.set({
-				month: 1,
-				day: 1
-			});
-			if (granularity === "month") return date.set({ day: 1 });
-			return date;
-		};
-		$[0] = granularity;
-		$[1] = t3;
-	} else t3 = $[1];
-	const normalizeByGranularity = t3;
-	let t4;
-	if ($[2] !== fullIso || $[3] !== normalizeByGranularity) {
-		t4 = (calendarDate) => {
-			if (calendarDate === null) return null;
-			const normalizedDate = normalizeByGranularity(calendarDate);
-			if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
-			const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
-			return DateTime.fromJSDate(date_0, { zone: "UTC" }).toISODate();
-		};
-		$[2] = fullIso;
-		$[3] = normalizeByGranularity;
-		$[4] = t4;
-	} else t4 = $[4];
-	const formatCalendarDate = t4;
-	let t5;
-	if ($[5] !== fullIso || $[6] !== normalizeByGranularity) {
-		t5 = (formattedDate) => {
-			if (formattedDate == null) return null;
-			if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
-			const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
-			return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
-		};
-		$[5] = fullIso;
-		$[6] = normalizeByGranularity;
-		$[7] = t5;
-	} else t5 = $[7];
-	const parseCalendarDate = t5;
-	let t6;
-	if ($[8] !== minValue || $[9] !== parseCalendarDate) {
-		t6 = typeof minValue === "string" ? parseCalendarDate(minValue) : minValue;
-		$[8] = minValue;
-		$[9] = parseCalendarDate;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== maxValue || $[12] !== parseCalendarDate) {
-		t7 = typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue;
-		$[11] = maxValue;
-		$[12] = parseCalendarDate;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== t6 || $[15] !== t7) {
-		t8 = {
-			minValue: t6,
-			maxValue: t7
-		};
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
-	const dateLimits = t8;
+	const normalizeByGranularity = (date) => {
+		if (granularity === "year") return date.set({
+			month: 1,
+			day: 1
+		});
+		if (granularity === "month") return date.set({ day: 1 });
+		return date;
+	};
+	const formatCalendarDate = (calendarDate) => {
+		if (calendarDate === null) return null;
+		const normalizedDate = normalizeByGranularity(calendarDate);
+		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
+		const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
+		return DateTime.fromJSDate(date_0, { zone: "UTC" }).toISODate();
+	};
+	const parseCalendarDate = (formattedDate) => {
+		if (formattedDate == null) return null;
+		if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
+		const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
+		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
+	};
+	const dateLimits = {
+		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
+	};
 	if (!renderInput) {
 		const dateValue = normalizedValue ? parseCalendarDate(normalizedValue) : null;
 		const as = props.as ?? ui.input.as;
@@ -400,163 +368,54 @@ var DatePickerInner = (t0) => {
 			trailingClassName: "py-0! pl-0!",
 			action: showDropdown ? {
 				icon: ui.dateInput.calendarIcon,
-				onClick: _temp3,
+				onClick: () => {},
 				altText: ""
 			} : void 0,
 			children: staticSegments
 		});
 	}
-	const T0 = DatePickerBase;
-	const t9 = mergeRefs(props.ref, inputRef);
-	const t10 = parseCalendarDate(normalizedValue);
-	let t11;
-	if ($[17] !== formatCalendarDate || $[18] !== props) {
-		t11 = (value) => props.onChange?.(formatCalendarDate(value));
-		$[17] = formatCalendarDate;
-		$[18] = props;
-		$[19] = t11;
-	} else t11 = $[19];
-	let t12;
-	if ($[20] !== T0 || $[21] !== dateLimits || $[22] !== granularity || $[23] !== props || $[24] !== t10 || $[25] !== t11 || $[26] !== t9) {
-		t12 = /* @__PURE__ */ jsx(T0, {
-			...props,
-			...dateLimits,
-			ref: t9,
-			granularity,
-			value: t10,
-			onChange: t11
-		});
-		$[20] = T0;
-		$[21] = dateLimits;
-		$[22] = granularity;
-		$[23] = props;
-		$[24] = t10;
-		$[25] = t11;
-		$[26] = t9;
-		$[27] = t12;
-	} else t12 = $[27];
-	return t12;
+	return /* @__PURE__ */ jsx(DatePickerBase, {
+		...props,
+		...dateLimits,
+		ref: mergeRefs(props.ref, inputRef),
+		granularity,
+		value: parseCalendarDate(normalizedValue),
+		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+	});
 };
-var DatePicker = (t0) => {
-	const $ = c(33);
-	let maxValue;
-	let minValue;
-	let props;
-	let renderStaticInput;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({fullIso: t1, granularity: t2, minValue, maxValue, renderStaticInput, ...props} = t0);
-		$[0] = t0;
-		$[1] = maxValue;
-		$[2] = minValue;
-		$[3] = props;
-		$[4] = renderStaticInput;
-		$[5] = t1;
-		$[6] = t2;
-	} else {
-		maxValue = $[1];
-		minValue = $[2];
-		props = $[3];
-		renderStaticInput = $[4];
-		t1 = $[5];
-		t2 = $[6];
-	}
-	const fullIso = t1 === void 0 ? true : t1;
-	const granularity = t2 === void 0 ? "day" : t2;
-	if ("formControl" in props && props.formControl) {
-		let formControl;
-		let innerProps;
-		let ref;
-		if ($[7] !== props) {
-			({formControl, ref, ...innerProps} = props);
-			$[7] = props;
-			$[8] = formControl;
-			$[9] = innerProps;
-			$[10] = ref;
-		} else {
-			formControl = $[8];
-			innerProps = $[9];
-			ref = $[10];
-		}
-		const controlWithOptions = formControl.control;
-		let t3;
-		if ($[11] !== controlWithOptions._options?.disabled || $[12] !== fullIso || $[13] !== granularity || $[14] !== innerProps || $[15] !== maxValue || $[16] !== minValue || $[17] !== props.error || $[18] !== props.isDisabled || $[19] !== ref || $[20] !== renderStaticInput) {
-			t3 = (t4) => {
-				const { field, fieldState: t5 } = t4;
-				const { error, isDirty } = t5;
-				return /* @__PURE__ */ jsx(DatePickerInner, {
-					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value ?? null,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
-					isDirty,
-					isDisabled: field.disabled || props.isDisabled,
-					isFormControlDisabled: !!controlWithOptions._options?.disabled,
-					error: props.error ?? error?.message,
-					fullIso,
-					granularity,
-					minValue,
-					maxValue,
-					renderStaticInput
-				});
-			};
-			$[11] = controlWithOptions._options?.disabled;
-			$[12] = fullIso;
-			$[13] = granularity;
-			$[14] = innerProps;
-			$[15] = maxValue;
-			$[16] = minValue;
-			$[17] = props.error;
-			$[18] = props.isDisabled;
-			$[19] = ref;
-			$[20] = renderStaticInput;
-			$[21] = t3;
-		} else t3 = $[21];
-		let t4;
-		if ($[22] !== formControl.control || $[23] !== formControl.name || $[24] !== t3) {
-			t4 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
-				render: t3
-			});
-			$[22] = formControl.control;
-			$[23] = formControl.name;
-			$[24] = t3;
-			$[25] = t4;
-		} else t4 = $[25];
-		return t4;
-	}
-	let t3;
-	if ($[26] !== fullIso || $[27] !== granularity || $[28] !== maxValue || $[29] !== minValue || $[30] !== props || $[31] !== renderStaticInput) {
-		t3 = /* @__PURE__ */ jsx(DatePickerInner, {
-			...props,
-			fullIso,
-			granularity,
-			minValue,
-			maxValue,
-			renderStaticInput
+var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...props }) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field: field_0, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerInner, {
+				...innerProps,
+				ref: mergeRefs(ref, field_0.ref),
+				value: field_0.value ?? null,
+				onChange: field_0.onChange,
+				onBlur: field_0.onBlur,
+				isDirty,
+				isDisabled: field_0.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				fullIso,
+				granularity,
+				minValue,
+				maxValue,
+				renderStaticInput
+			})
 		});
-		$[26] = fullIso;
-		$[27] = granularity;
-		$[28] = maxValue;
-		$[29] = minValue;
-		$[30] = props;
-		$[31] = renderStaticInput;
-		$[32] = t3;
-	} else t3 = $[32];
-	return t3;
+	}
+	return /* @__PURE__ */ jsx(DatePickerInner, {
+		...props,
+		fullIso,
+		granularity,
+		minValue,
+		maxValue,
+		renderStaticInput
+	});
 };
-function _temp(input, staticTarget) {
-	const container = input.getContainer?.() ?? input;
-	return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget) : null;
-}
-function _temp2(input_0) {
-	const container_0 = input_0.getContainer?.() ?? input_0;
-	if (!(container_0 instanceof HTMLElement)) return null;
-	return container_0.querySelector("[data-static-press-action]");
-}
-function _temp3() {}
 //#endregion
 export { DatePicker };

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

@@ -1,7 +1,7 @@
 import { CalendarDate } from '@internationalized/date';
 import { FocusEvent, Ref } from 'react';
 import { DateValue } from 'react-aria';
-import { FieldValues } from 'react-hook-form';
+import { FieldValues } from '../../shared/form.binding';
 import { DateRangePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
 import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
@@ -24,7 +24,6 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    fireBlurOnChange?: boolean;
     allowPartialRange?: boolean;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {