@povio/ui 2.1.14 → 2.1.15

package/dist/DatePickerInput.js

@@ -0,0 +1,158 @@
+import { CalendarIcon } from "./Calendar.js";
+import { DateTimeIcon } from "./DateTime.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { IconButton } from "./IconButton.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { TodayIcon } from "./Today.js";
+import { DateField } from "./DateField.js";
+import { inputSide, useInputCva } from "./input.cva.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { InputClear } from "./InputClear.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
+import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
+import useMeasure from "react-use-measure";
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown,...props }) => {
+	const inputCva = useInputCva();
+	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
+	const [canClear, setCanClear] = useState(false);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin) => {
+		setIsFocused(isFocusWithin);
+		if (!isFocusWithin) {
+			dateFieldRef.current?.autoFixYear();
+			endDateFieldRef.current?.autoFixYear();
+		}
+	} });
+	const { isFocusVisible } = useFocusVisible();
+	const dateFieldRef = useRef(null);
+	const endDateFieldRef = useRef(null);
+	const containerRef = useRef(null);
+	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			dateFieldRef.current?.clearField();
+			fieldProps.onChange?.(null);
+			endDateFieldRef.current?.clearField();
+			if (endFieldProps) endFieldProps.onChange?.(null);
+			setCanClear(false);
+			fieldProps.onBlur?.(null);
+		},
+		getContainer: () => containerRef.current
+	}));
+	const onClearChange = useCallback((canClearInput) => {
+		setCanClear(canClearInput);
+	}, []);
+	const onClear = () => {
+		dateFieldRef.current?.clearField();
+		fieldProps.onChange?.(null);
+		endDateFieldRef.current?.clearField();
+		setCanClear(false);
+	};
+	const onToday = () => {
+		if (isDateTime) {
+			const calendarDateTime = toCalendarDateTime(now(getLocalTimeZone()));
+			fieldProps.onChange?.(calendarDateTime);
+			if (endFieldProps) endFieldProps.onChange?.(calendarDateTime);
+		} else {
+			fieldProps.onChange?.(today(getLocalTimeZone()));
+			if (endFieldProps) endFieldProps.onChange?.(today(getLocalTimeZone()));
+		}
+	};
+	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+	const style = useMemo(() => {
+		return { paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
+			size,
+			type: "var"
+		})}) + ${labelWidth}px)` : "0px" };
+	}, [
+		labelWidth,
+		as,
+		size,
+		inputSideCva
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: inputCva({
+			variant,
+			as,
+			size,
+			...props,
+			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
+		}),
+		"data-rac": "",
+		"data-hovered": isHovered || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-is-empty": fieldProps.value === null || void 0,
+		"data-focus-within": isFocused || void 0,
+		"data-focus-visible": isFocused && isFocusVisible || void 0,
+		"data-has-selection": fieldProps.value !== null || void 0,
+		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		...groupProps,
+		...focusWithinProps,
+		...hoverProps,
+		children: [/* @__PURE__ */ jsxs("div", { children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+			ref: labelContentRef,
+			as,
+			...headerProps
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			style,
+			children: [
+				disableManualEntry && /* @__PURE__ */ jsx(Button, {
+					onPress: onOpenDropdown,
+					className: "absolute inset-0 z-0",
+					isDisabled
+				}),
+				todayIcon && /* @__PURE__ */ jsx(IconButton, {
+					label: "",
+					icon: TodayIcon,
+					size: "none",
+					onPress: onToday,
+					className: "relative z-1"
+				}),
+				disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+					size: "label-1",
+					className: "text-text-default-3",
+					children: placeholder
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
+					ref: dateFieldRef,
+					...fieldProps,
+					isDisabled,
+					isInvalid,
+					onClearChange,
+					hidePlaceholder,
+					disableManualEntry
+				}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
+					className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
+					children: "–"
+				}), /* @__PURE__ */ jsx(DateField, {
+					ref: endDateFieldRef,
+					...endFieldProps,
+					isDisabled,
+					isInvalid,
+					onClearChange,
+					hidePlaceholder,
+					disableManualEntry
+				})] })] })
+			]
+		})] }), /* @__PURE__ */ jsxs("div", {
+			className: "relative z-1 flex items-center gap-2",
+			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				label: "",
+				color: "secondary",
+				...buttonProps,
+				icon: isDateTime ? DateTimeIcon : CalendarIcon,
+				isDisabled
+			})]
+		})]
+	});
+};
+export { DatePickerInput };