@hitachivantara/uikit-react-core/dist/Calendar/CalendarHeader/CalendarHeader.js

UI Kit Core React components.

import { HvTypography } from "../../Typography/Typography.js";
import { isKey } from "../../utils/keyboardUtils.js";
import { HvFormElementDescriptorsContext } from "../../FormElement/context.js";
import { HvInput } from "../../Input/Input.js";
import { getFormattedDate, getLocaleDateFormat, getStringFromDate, isDate, isRange, isSameDay, parseDateString } from "../utils.js";
import { useClasses } from "./CalendarHeader.styles.js";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { useContext, useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/Calendar/CalendarHeader/CalendarHeader.tsx
var HvCalendarHeader = (props) => {
	const { id, value: valueProp, locale = "en", classes: classesProp, onChange, showEndDate, showDayOfWeek = false, onFocus, invalidDateLabel = "Invalid Date" } = useDefaultProps("HvCalendarHeader", props);
	const { classes, cx } = useClasses(classesProp);
	const { label } = useContext(HvFormElementDescriptorsContext);
	const localValue = isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
	const [dateValue, setDateValue] = useState(localValue);
	const [editedValue, setEditedValue] = useState(null);
	const [displayValue, setDisplayValue] = useState("");
	const [weekdayDisplay, setWeekdayDisplay] = useState("");
	const inputValue = editedValue ?? displayValue;
	const localeFormat = getLocaleDateFormat(locale);
	const [isValidValue, setIsValidValue] = useState(inputValue.length === 0 || inputValue && isDate(new Date(inputValue)));
	useEffect(() => {
		const valid = !localValue || isDate(new Date(localValue));
		setIsValidValue(valid);
		if (valid) {
			if (!localValue) {
				setDisplayValue("");
				setEditedValue(null);
				setWeekdayDisplay("");
				return;
			}
			const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" }).format(isDate(localValue) ? localValue : 0);
			setDisplayValue(getFormattedDate(localValue, locale));
			setEditedValue(null);
			setWeekdayDisplay(weekday);
		}
	}, [localValue, locale]);
	const handleNewDate = (event, date) => {
		const localeParsedDate = parseDateString(date, locale);
		const isValidInput = isDate(localeParsedDate);
		const dateParsed = isValidInput ? localeParsedDate : new Date(date);
		if (!isSameDay(dateParsed, dateValue)) {
			setDateValue(dateParsed);
			onChange?.(event, dateParsed);
		}
		setIsValidValue(isValidInput);
		if (isValidInput) setEditedValue(null);
	};
	const onBlurHandler = (event) => {
		if (editedValue == null) return;
		if (editedValue === "") {
			setIsValidValue(true);
			setEditedValue(null);
			return;
		}
		handleNewDate(event, editedValue);
	};
	const keyDownHandler = (event) => {
		if (!isKey(event, "Enter") || editedValue == null || editedValue === "") return;
		event.preventDefault();
		handleNewDate(event, editedValue);
	};
	const onFocusHandler = (event) => {
		if (!localValue) return;
		const formattedDate = isValidValue && isDate(localValue) ? getStringFromDate(localValue, locale) : editedValue;
		setEditedValue(formattedDate);
		onFocus?.(event, formattedDate);
	};
	const onChangeHandler = (event, val) => {
		setEditedValue(val);
	};
	const isInvalid = !isValidValue && inputValue !== "";
	return /* @__PURE__ */ jsxs("div", {
		id,
		className: cx(classes.root, { [classes.invalid]: isInvalid }),
		children: [showDayOfWeek && /* @__PURE__ */ jsx(HvTypography, {
			className: classes.headerDayOfWeek,
			children: weekdayDisplay || "\xA0"
		}), /* @__PURE__ */ jsx(HvInput, {
			type: "text",
			placeholder: localeFormat,
			value: inputValue,
			"aria-labelledby": label?.[0]?.id,
			onBlur: onBlurHandler,
			onFocus: onFocusHandler,
			onChange: onChangeHandler,
			onKeyDown: keyDownHandler,
			status: isInvalid ? "invalid" : "valid",
			statusMessage: invalidDateLabel
		})]
	});
};
HvCalendarHeader.formElementType = "HvCalendarHeader";
//#endregion
export { HvCalendarHeader };