@povio/ui 2.2.12 → 2.3.0-rc.10

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

@@ -1,25 +1,29 @@
 import { CalendarDate, DateValue } from '@internationalized/date';
-import { Ref } from 'react';
+import { FocusEvent, Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
 import { DatePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
 type DatePickerGranularity = "day" | "month" | "year";
-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;
     className?: string;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;
+    autoFixYear?: boolean;
     placeholder?: string;
     inputClassName?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
     shouldUpdateDateOnMonthYearChange?: boolean;
     granularity?: DatePickerGranularity;
-    autoFixYear?: boolean;
     format?: string;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
@@ -28,7 +32,8 @@ export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "on
     fullIso?: boolean;
     minValue?: DateValue | string;
     maxValue?: DateValue | string;
+    renderStaticInput?: boolean;
 }
 export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
-export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, granularity, minValue, maxValue, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: <TFieldValues extends FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,24 +1,44 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
+import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { getStaticCalendarDateSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 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 { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+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 { Controller, useWatch } 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, 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, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, 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, format, ...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 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 normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -44,9 +64,16 @@ var DatePickerBase = (props) => {
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
+	const handleBlur = (val) => {
+		onBlur?.({ target: { value: val } });
+	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -57,15 +84,16 @@ var DatePickerBase = (props) => {
 		...rest,
 		shouldForceLeadingZeros,
 		value,
-		onChange: (val) => {
-			let normalizedValue = val;
-			if (val) normalizedValue = normalizeByGranularity(val);
+		onChange: (val_0) => {
+			let normalizedValue = val_0;
+			if (val_0) normalizedValue = normalizeByGranularity(val_0);
 			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
 				state.setValue(state.value);
 				return;
 			}
 			onChange?.(normalizedValue);
 			dialogState.setValue(normalizedValue);
+			debouncedBlur(normalizedValue);
 			if (normalizedValue) {
 				calendarState.setFocusedDate(normalizedValue);
 				return;
@@ -102,9 +130,10 @@ var DatePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		if (dialogState.value) state.setValue(normalizeByGranularity(dialogState.value));
-		if (!dialogState.value) state.setValue(dialogState.value);
+		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
+		state.setValue(newValue);
 		state.toggle();
+		handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
@@ -163,6 +192,7 @@ var DatePickerBase = (props) => {
 				isDirty,
 				isDisabled,
 				disableManualEntry,
+				autoFixYear,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -170,13 +200,14 @@ var DatePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
+				todayIconPlacement,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,
-				autoFixYear,
 				format
-			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
 					isValid: !dialogState.isInvalid && !!dialogState.value,
@@ -201,7 +232,29 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ...props }) => {
+var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
+	const { locale } = useLocale();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => {
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
+		}
+	});
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	const rawValue = watchedValue ?? props.value ?? null;
 	const normalizeByGranularity = (date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -214,19 +267,66 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ...
 		if (calendarDate === null) return null;
 		const normalizedDate = normalizeByGranularity(calendarDate);
 		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
-		const date = DateTimeUtils.fromDateValueToLocal(normalizedDate);
-		return DateTime.fromJSDate(date).toISODate();
+		const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate);
+		return DateTime.fromJSDate(date_0).toISODate();
 	};
 	const parseCalendarDate = (formattedDate) => {
 		if (formattedDate == null) return formattedDate;
 		if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
-		const date = DateTime.fromISO(formattedDate).toJSDate();
-		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date)));
+		const date_1 = DateTime.fromISO(formattedDate).toJSDate();
+		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1)));
 	};
 	const dateLimits = {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
+	if (!renderInput) {
+		const dateValue = rawValue ? parseCalendarDate(rawValue) : 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 todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticSegments = getStaticCalendarDateSegments({
+			value: dateValue,
+			locale,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !dateValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isDisabled,
+			className: clsx("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 }),
+			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
+			},
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
+			trailingClassName: "py-0! pl-0!",
+			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
+			children: staticSegments
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -235,7 +335,7 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ...
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerBase, {
 				...innerProps,
 				...dateLimits,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseCalendarDate(field.value),
 				onChange: (value) => field.onChange(formatCalendarDate(value)),
 				onBlur: field.onBlur,
@@ -248,9 +348,10 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ...
 	return /* @__PURE__ */ jsx(DatePickerBase, {
 		...props,
 		...dateLimits,
+		ref: mergeRefs(props.ref, inputRef),
 		granularity,
 		value: parseCalendarDate(props.value),
-		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+		onChange: (value_0) => props.onChange?.(formatCalendarDate(value_0))
 	});
 };
 //#endregion

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

@@ -1,24 +1,28 @@
 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';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 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;
     hideSidebar?: boolean;
     className?: string;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     isDirty?: boolean;
     disableManualEntry?: boolean;
+    autoFixYear?: boolean;
     placeholder?: string;
     inputClassName?: string;
-    autoFixYear?: boolean;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {
@@ -32,7 +36,8 @@ export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "va
     fullIso?: boolean;
     minValue?: DateValue | string;
     maxValue?: DateValue | string;
+    renderStaticInput?: boolean;
 }
 export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
-export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};