@povio/ui 3.4.0-rc.9 → 4.0.0-rc.2

package/dist/DatePicker-CgCr_Z8r.js

@@ -0,0 +1,434 @@
+import { t as UIConfig } from "./uiConfig.context-BvBsrMFI.js";
+import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, s as $ea0ea6e62ae0d7ca$export$6d095e787d2b5e1f, t as DatePickerInput } from "./DatePickerInput-B9Z_AUkC.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { r as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7 } from "./useControlledState-BMVd3AOQ.js";
+import { i as getStaticDateTimeFocusTarget, o as DateTimeDialogFooter, s as DateTimeDialog, t as getStaticCalendarDateSegments } from "./staticDateTimeSegments-B9kkwiDz.js";
+import { i as $6902a2bb26917a07$export$42df105a73306d51, r as $28aae683a942e141$export$87194bb378cc3ac2, t as Calendar } from "./Calendar-Ci0ysyfZ.js";
+import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-DDGNxVX8.js";
+import { t as FieldController } from "./form.binding-DLM7NA2s.js";
+import { t as FormField } from "./FormField-BHPdCLEV.js";
+import { t as TooltipWrapper } from "./TooltipWrapper-DYfZF2Ly.js";
+import { i as InputFrame, n as useStaticInputHandoff } from "./useStaticInputHandoff-Denoy4V_.js";
+import { t as normalizeDatePickerValue } from "./datePickerValue.utils-BxOJpTbb.js";
+import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+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, onValueCommit, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const granularity = granularityProp ?? ui.dateInput.granularity;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const timeZone = ui.dateInput.timeZone;
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
+	const normalizeByGranularity = useCallback((date) => {
+		if (granularity === "year") return date.set({
+			month: 1,
+			day: 1
+		});
+		if (granularity === "month") return date.set({ day: 1 });
+		return date;
+	}, [granularity]);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const datePickerInputRef = useRef(null);
+	const datePickerRef = useMemo(() => ({ get current() {
+		return datePickerInputRef.current?.getContainer?.() || null;
+	} }), []);
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
+	const handleBlur = (val) => {
+		onBlur?.({ target: { value: val } });
+	};
+	const normalizedValue = value ?? null;
+	const dialogState = $28aae683a942e141$export$87194bb378cc3ac2({
+		...rest,
+		defaultValue: normalizedValue ?? rest.defaultValue ?? null,
+		shouldCloseOnSelect: false,
+		shouldForceLeadingZeros
+	});
+	const state = $28aae683a942e141$export$87194bb378cc3ac2({
+		...rest,
+		shouldForceLeadingZeros,
+		value: normalizedValue,
+		onChange: (val) => {
+			let normalizedValue = normalizeDatePickerValue(val);
+			if (val) normalizedValue = normalizeByGranularity(val);
+			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
+				state.setValue(state.value);
+				return;
+			}
+			onChange?.(normalizedValue);
+			dialogState.setValue(normalizedValue);
+			if (normalizedValue) {
+				calendarState.setFocusedDate(normalizedValue);
+				return;
+			}
+			calendarState.setFocusedDate(today(effectiveTimeZone));
+		},
+		shouldCloseOnSelect: false
+	});
+	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = $6902a2bb26917a07$export$42df105a73306d51({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, state, datePickerRef);
+	const { calendarProps } = $6902a2bb26917a07$export$42df105a73306d51({
+		...rest,
+		label,
+		shouldForceLeadingZeros
+	}, dialogState, datePickerRef);
+	const { locale } = $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7();
+	const calendarState = $ea0ea6e62ae0d7ca$export$6d095e787d2b5e1f({
+		...calendarProps,
+		locale,
+		createCalendar
+	});
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const onApply = () => {
+		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
+		state.setValue(newValue);
+		onValueCommit?.();
+		state.toggle();
+	};
+	const onMonthYearChange = (selectedDate) => {
+		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
+		const baseDate = dialogState.value || state.value || today(effectiveTimeZone);
+		const updatedDate = normalizeByGranularity(baseDate.set({
+			year: selectedDate.year,
+			month: selectedDate.month
+		}));
+		dialogState.setValue(updatedDate);
+		calendarState.setFocusedDate(updatedDate);
+	};
+	const onMonthYearCommit = () => {
+		onApply();
+	};
+	const onTodayPress = () => {
+		const todayValue = normalizeByGranularity(today(effectiveTimeZone));
+		dialogState.setValue(todayValue);
+		calendarState.setFocusedDate(todayValue);
+	};
+	const onInputClear = () => {
+		onChange?.(null);
+		dialogState.setValue(null);
+		onValueCommit?.();
+	};
+	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;
+		if (dialogState.value) return;
+		const defaultYearValue = normalizeByGranularity(today(effectiveTimeZone));
+		dialogState.setValue(defaultYearValue);
+		calendarState.setFocusedDate(defaultYearValue);
+	}, [
+		state.isOpen,
+		granularity,
+		dialogState.value,
+		dialogState,
+		calendarState,
+		normalizeByGranularity,
+		effectiveTimeZone
+	]);
+	const onOpenChange = (_isOpen) => {
+		state.toggle();
+		syncDialogFromControlledValue();
+	};
+	const onOpenDropdown = () => {
+		syncDialogFromControlledValue();
+		state.toggle();
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("group relative inline-flex w-full flex-col text-left", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: [/* @__PURE__ */ jsx(DatePickerInput, {
+				ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(ref, datePickerInputRef),
+				as,
+				groupProps,
+				fieldProps: {
+					...fieldProps,
+					onBlur: (event) => {
+						fieldProps.onBlur?.(event);
+						handleBlur(state.value);
+					}
+				},
+				fieldValue: normalizedValue,
+				isValueControlled: true,
+				hasValue: normalizedValue != null,
+				buttonProps,
+				isDirty,
+				isRequired,
+				isDisabled,
+				disableManualEntry,
+				autoFixYear,
+				isInvalid: !!error,
+				disableDropdown,
+				variant,
+				size,
+				isClearable,
+				isClearableIfDisabled,
+				headerProps,
+				todayIcon,
+				todayIconButtonSize,
+				todayIconButtonComponent,
+				todayIconPlacement,
+				onOpenDropdown,
+				placeholder,
+				className: inputClassName,
+				dateGranularity: granularity,
+				format,
+				timeZone: effectiveTimeZone,
+				onClear: onInputClear,
+				onValueCommit
+			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
+				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
+					isDisabled,
+					isValid: !dialogState.isInvalid && !!dialogState.value,
+					onTodayPress,
+					onApply
+				}),
+				label,
+				triggerRef: datePickerRef,
+				dialogProps,
+				isOpen: state.isOpen,
+				onOpenChange,
+				children: /* @__PURE__ */ jsx(Calendar, {
+					state: calendarState,
+					calendarProps,
+					onApply,
+					onMonthYearChange,
+					onMonthYearCommit,
+					selectedDate: dialogState.value ?? null,
+					granularity
+				})
+			})]
+		})
+	});
+};
+const DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
+	const { locale } = $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { renderRealInput, replayStaticInputPress } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input, staticTarget, fromEnd) => {
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? getStaticDateTimeFocusTarget(container, staticTarget, fromEnd) : null;
+		},
+		getPressTarget: (input) => {
+			const container = input.getContainer?.() ?? input;
+			if (!(container instanceof HTMLElement)) return null;
+			return container.querySelector("[data-static-press-action]");
+		}
+	});
+	const normalizedValue = props.value ?? null;
+	const normalizeByGranularity = useCallback((date) => {
+		if (granularity === "year") return date.set({
+			month: 1,
+			day: 1
+		});
+		if (granularity === "month") return date.set({ day: 1 });
+		return date;
+	}, [granularity]);
+	const formatCalendarDate = (calendarDate) => {
+		if (calendarDate === null) return null;
+		const normalizedDate = normalizeByGranularity(calendarDate);
+		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
+		return DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC").toISOString().slice(0, 10);
+	};
+	const parseCalendarDate = useCallback((formattedDate) => {
+		if (formattedDate == null) return null;
+		if (fullIso) {
+			const parsedDate = DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
+			return normalizeByGranularity(parsedDate);
+		}
+		const date = /* @__PURE__ */ new Date(`${formattedDate}T00:00:00.000Z`);
+		const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date, "UTC");
+		return normalizeByGranularity(toCalendarDate(zonedDateTime));
+	}, [fullIso, normalizeByGranularity]);
+	const dateLimits = useMemo(() => ({
+		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
+	}), [
+		minValue,
+		maxValue,
+		parseCalendarDate
+	]);
+	if (!renderInput) {
+		const dateValue = normalizedValue ? parseCalendarDate(normalizedValue) : null;
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
+		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
+			isDisabled,
+			renderStatic: true,
+			size: todayIconButtonSize,
+			todayIconButtonComponent
+		});
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticSegments = getStaticCalendarDateSegments({
+			value: dateValue,
+			locale,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !dateValue,
+			disableManualEntry,
+			placeholder: props.placeholder,
+			dateGranularity: granularity
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			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),
+			contentClassName: "pr-0!",
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			contentGroup: "date-picker",
+			labelPlacement: "content-row",
+			dataAttributes: {
+				dataIsEmpty: dateValue == null,
+				dataIsFilled: dateValue != null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: dateValue != null
+			},
+			onStaticInteract: renderRealInput,
+			onStaticPress: replayStaticInputPress,
+			staticPressTarget: "action",
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			showClear: dateValue != null,
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
+			trailingClassName: "py-0! pl-0!",
+			action: showDropdown ? {
+				icon: ui.dateInput.calendarIcon,
+				onClick: () => {},
+				altText: ""
+			} : void 0,
+			children: staticSegments
+		});
+	}
+	return /* @__PURE__ */ jsx(DatePickerBase, {
+		...props,
+		...dateLimits,
+		ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(props.ref, inputRef),
+		granularity,
+		value: parseCalendarDate(normalizedValue),
+		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+	});
+};
+const DatePickerComponent = ({ 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, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerInner, {
+				...innerProps,
+				ref: $a8ea2faf2ebe4d2f$re_export$mergeRefs(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,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				fullIso,
+				granularity,
+				minValue,
+				maxValue,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(DatePickerInner, {
+		...props,
+		fullIso,
+		granularity,
+		minValue,
+		maxValue,
+		renderStaticInput
+	});
+};
+const DatePicker = memo(DatePickerComponent);
+//#endregion
+export { DatePicker as t };

package/dist/DatePicker-DyjAwAh6.d.ts

@@ -0,0 +1,44 @@
+import { n as FieldValues } from "./form.binding-DVJ5F0JE.js";
+import { t as ControlProps } from "./form.types-CecYaerF.js";
+import { n as FormFieldProps } from "./FormField-DTDj3F0A.js";
+import { n as InputVariantProps } from "./input.cva-ByFuAEIS.js";
+import { a as DatePickerTodayIconPlacement, i as DatePickerTodayIconButtonSize, n as DatePickerTodayIcon, r as DatePickerTodayIconButtonComponent, t as DatePickerInputHandle } from "./DatePickerInput-CdCtVE9z.js";
+import { FocusEvent, Ref } from "react";
+import { CalendarDate, DateValue } from "@internationalized/date";
+import { DatePickerStateOptions } from "react-stately";
+//#region src/components/inputs/DateTime/DatePicker/DatePicker.d.ts
+type DatePickerGranularity = "day" | "month" | "year";
+interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
+  ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
+  disableDropdown?: boolean;
+  isClearable?: boolean;
+  isClearableIfDisabled?: boolean;
+  className?: string;
+  todayIcon?: DatePickerTodayIcon;
+  todayIconButtonSize?: DatePickerTodayIconButtonSize;
+  todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
+  todayIconPlacement?: DatePickerTodayIconPlacement;
+  isDirty?: boolean;
+  disableManualEntry?: boolean;
+  autoFixYear?: boolean;
+  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" | "onValueCommit"> {
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+  fullIso?: boolean;
+  minValue?: DateValue | string;
+  maxValue?: DateValue | string;
+  renderStaticInput?: boolean;
+}
+type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
+declare const DatePickerComponent: <TFieldValues extends FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react").JSX.Element;
+declare const DatePicker: typeof DatePickerComponent;
+//#endregion
+export { DatePicker as n, DatePickerProps as r, ControlledDatePickerProps as t };