@povio/ui 3.4.0-rc.2 → 3.4.0-rc.22

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

@@ -1,422 +0,0 @@
-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";
-import { datePickerInputContentRowDefinition } 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, getStaticDateTimeFocusTarget } from "../shared/staticDateTimeSegments.js";
-import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { InputFrame } from "../../Skeleton/InputFrame.js";
-import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
-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 { 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, 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 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 = useDatePickerState({
-		...rest,
-		defaultValue: normalizedValue ?? rest.defaultValue ?? null,
-		shouldCloseOnSelect: false,
-		shouldForceLeadingZeros
-	});
-	const state = useDatePickerState({
-		...rest,
-		shouldForceLeadingZeros,
-		value: normalizedValue,
-		onChange: (val_0) => {
-			let normalizedValue_0 = val_0;
-			if (val_0) normalizedValue_0 = normalizeByGranularity(val_0);
-			if (normalizedValue_0 && (rest.minValue && normalizedValue_0 < rest?.minValue || rest?.maxValue && normalizedValue_0 > rest?.maxValue)) {
-				state.setValue(state.value);
-				return;
-			}
-			onChange?.(normalizedValue_0);
-			dialogState.setValue(normalizedValue_0);
-			if (normalizedValue_0) {
-				calendarState.setFocusedDate(normalizedValue_0);
-				return;
-			}
-			calendarState.setFocusedDate(today(effectiveTimeZone));
-		},
-		shouldCloseOnSelect: false
-	});
-	const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker({
-		...rest,
-		label,
-		shouldForceLeadingZeros
-	}, state, datePickerRef);
-	const { calendarProps } = useDatePicker({
-		...rest,
-		label,
-		shouldForceLeadingZeros
-	}, dialogState, datePickerRef);
-	const { locale } = useLocale();
-	const calendarState = useCalendarState({
-		...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);
-		state.toggle();
-	};
-	const onMonthYearChange = (selectedDate) => {
-		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
-		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(effectiveTimeZone)).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);
-	};
-	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: mergeRefs(ref, datePickerInputRef),
-				as,
-				groupProps,
-				fieldProps: {
-					...fieldProps,
-					onBlur: (event) => {
-						fieldProps.onBlur?.(event);
-						handleBlur(state.value);
-					}
-				},
-				fieldValue: normalizedValue,
-				isValueControlled: true,
-				hasValue: normalizedValue != null,
-				buttonProps,
-				isDirty,
-				isDisabled,
-				disableManualEntry,
-				autoFixYear,
-				isInvalid: !!error,
-				disableDropdown,
-				variant,
-				size,
-				isClearable,
-				headerProps,
-				todayIcon,
-				todayIconButtonSize,
-				todayIconButtonComponent,
-				todayIconPlacement,
-				onOpenDropdown,
-				placeholder,
-				className: inputClassName,
-				dateGranularity: granularity,
-				format,
-				timeZone: effectiveTimeZone,
-				onClear: onInputClear
-			}), (!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
-				})
-			})]
-		})
-	});
-};
-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();
-	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) => {
-			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;
-	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;
-		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),
-			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: mergeRefs(props.ref, inputRef),
-		granularity,
-		value: parseCalendarDate(normalizedValue),
-		onChange: (value) => props.onChange?.(formatCalendarDate(value))
-	});
-};
-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: (value) => field_0.onChange(value ?? null),
-				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
-			})
-		});
-	}
-	return /* @__PURE__ */ jsx(DatePickerInner, {
-		...props,
-		fullIso,
-		granularity,
-		minValue,
-		maxValue,
-		renderStaticInput
-	});
-};
-//#endregion
-export { DatePicker };

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

@@ -1,45 +0,0 @@
-import { CalendarDate } from '@internationalized/date';
-import { FocusEvent, Ref } from 'react';
-import { DateValue } from 'react-aria';
-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';
-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" | "onBlur"> {
-    ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
-    disableDropdown?: boolean;
-    isClearable?: boolean;
-    hideSidebar?: 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;
-    allowPartialRange?: boolean;
-}
-export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
-    value?: {
-        start: string | null;
-        end: string | null;
-    } | null;
-    onChange?: (value: {
-        start: string | null;
-        end: string | null;
-    } | null) => void;
-    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, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-export {};