@povio/ui 2.3.0-rc.9 → 2.3.1

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

@@ -1,43 +1,22 @@
-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 { getStaticCalendarDateTimeSegments } 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 { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 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, 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;
-	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 autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
-	const setDateValueOnDateSelection = setDateValueOnDateSelectionProp ?? ui.dateInput.setDateValueOnDateSelection;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {
@@ -57,16 +36,9 @@ var DateTimePickerBase = (props) => {
 	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 { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
+	useImperativeHandle(ref, () => ({ clear: () => {
+		datePickerInputRef.current?.clear();
+	} }));
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -82,11 +54,10 @@ var DateTimePickerBase = (props) => {
 		...rest,
 		shouldForceLeadingZeros,
 		value,
-		onChange: (val_0) => {
-			onChange?.(val_0);
-			dialogState.setValue(val_0);
-			calendarState.setFocusedDate(val_0 || today(getLocalTimeZone()));
-			debouncedBlur(val_0);
+		onChange: (val) => {
+			onChange?.(val);
+			dialogState.setValue(val);
+			calendarState.setFocusedDate(val || today(effectiveTimeZone));
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -122,10 +93,8 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value;
-		state.setValue(newValue);
+		state.setValue(dialogState.value);
 		state.toggle();
-		handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!shouldUpdateDateOnMonthYearChange) return;
@@ -181,9 +150,9 @@ var DateTimePickerBase = (props) => {
 				groupProps,
 				fieldProps: {
 					...fieldProps,
-					onBlur: (e_0) => {
-						fieldProps.onBlur?.(e_0);
-						onInputBlur(e_0);
+					onBlur: (e) => {
+						fieldProps.onBlur?.(e);
+						onInputBlur(e);
 					}
 				},
 				buttonProps,
@@ -197,15 +166,13 @@ var DateTimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
-				todayIconButtonSize,
-				todayIconPlacement,
 				isRequired,
 				disableManualEntry,
-				autoFixYear,
 				placeholder,
 				onOpenDropdown: () => state.toggle(),
 				className: inputClassName,
 				timeZone: effectiveTimeZone,
+				autoFixYear,
 				isTimeOptional,
 				format
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
@@ -227,36 +194,13 @@ var DateTimePickerBase = (props) => {
 					datePickerState: dialogState,
 					onApply,
 					onMonthYearChange,
-					granularity: "day",
-					setDateValueOnDateSelection
+					granularity: "day"
 				})
 			})]
 		})
 	});
 };
-var DateTimePicker = ({ fullIso = true, 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;
+var DateTimePicker = ({ fullIso = true, ...props }) => {
 	let effectiveTimeZone = getLocalTimeZone();
 	if (props.timeZone) effectiveTimeZone = props.timeZone;
 	const formatDateValue = (dateValue) => {
@@ -268,53 +212,6 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		if (isoString == null) return isoString;
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, effectiveTimeZone);
 	};
-	if (!renderInput) {
-		const dateTimeValue = rawValue ? parseDateValue(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 = getStaticCalendarDateTimeSegments({
-			value: dateTimeValue,
-			locale,
-			shouldForceLeadingZeros,
-			isDisabled,
-			hidePlaceholder: as === "floating" && !dateTimeValue
-		});
-		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: dateTimeValue === null,
-				dataIsFilled: dateTimeValue !== null,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: dateTimeValue !== 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.dateTimeIcon : void 0,
-			children: staticSegments
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -322,7 +219,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: parseDateValue(field.value),
 				onChange: (value) => field.onChange(formatDateValue(value)),
 				onBlur: field.onBlur,
@@ -334,9 +231,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 	}
 	return /* @__PURE__ */ jsx(DateTimePickerBase, {
 		...props,
-		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateValue(props.value),
-		onChange: (value_0) => props.onChange?.(formatDateValue(value_0))
+		onChange: (value) => props.onChange?.(formatDateValue(value))
 	});
 };
 //#endregion

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

@@ -1,10 +1,10 @@
-import { Ref, FocusEvent } from 'react';
+import { Ref } from 'react';
 import { AriaTimeFieldProps, TimeValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label" | "onBlur"> {
+interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label"> {
     ref?: Ref<HTMLDivElement>;
     disableDropdown?: boolean;
     date?: string | null;
@@ -13,15 +13,13 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     disableManualEntry?: boolean;
     placeholder?: string;
     inputClassName?: string;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;
     onChange?: (value: string | null) => void;
     fullIso?: boolean;
     timeZone?: string;
-    renderStaticInput?: boolean;
 }
 export type ControlledTimePickerProps<TFieldValues extends FieldValues> = ControlProps<TimePickerProps, TFieldValues>;
-export declare const TimePicker: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePicker: <TFieldValues extends FieldValues>(props: ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};