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

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const keyboardUtils = require("../../utils/keyboardUtils.cjs");
const setId = require("../../utils/setId.cjs");
const utils = require("../utils.cjs");
const CalendarHeader_styles = require("./CalendarHeader.styles.cjs");
const Input = require("../../Input/Input.cjs");
const context = require("../../FormElement/context.cjs");
const Typography = require("../../Typography/Typography.cjs");
const HvCalendarHeader = (props) => {
  const {
    id: idProp,
    value: valueProp,
    locale = utils.DEFAULT_LOCALE,
    classes: classesProp,
    onChange,
    showEndDate,
    showDayOfWeek = false,
    onFocus,
    invalidDateLabel = "Invalid Date"
  } = uikitReactUtils.useDefaultProps("HvCalendarHeader", props);
  const { classes, cx } = CalendarHeader_styles.useClasses(classesProp);
  const context$1 = React.useContext(context.HvFormElementContext);
  const { label } = React.useContext(context.HvFormElementDescriptorsContext);
  const localValue = utils.isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
  const [dateValue, setDateValue] = React.useState(localValue);
  const [editedValue, setEditedValue] = React.useState(null);
  const [displayValue, setDisplayValue] = React.useState("");
  const [weekdayDisplay, setWeekdayDisplay] = React.useState("");
  const id = idProp ?? setId.setId(context$1.id, "calendarHeader");
  const inputValue = editedValue ?? displayValue;
  const localeFormat = utils.getLocaleDateFormat(locale);
  const [isValidValue, setIsValidValue] = React.useState(
    inputValue.length === 0 || inputValue && utils.isDate(new Date(inputValue))
  );
  React.useEffect(() => {
    const valid = !localValue || utils.isDate(new Date(localValue));
    setIsValidValue(valid);
    if (valid) {
      if (!localValue) {
        setDisplayValue("");
        setEditedValue(null);
        setWeekdayDisplay("");
        return;
      }
      const weekday = new Intl.DateTimeFormat(locale, {
        weekday: "short"
      }).format(utils.isDate(localValue) ? localValue : 0);
      setDisplayValue(utils.getFormattedDate(localValue, locale));
      setEditedValue(null);
      setWeekdayDisplay(weekday);
    }
  }, [localValue, locale]);
  const handleNewDate = (event, date) => {
    const localeParsedDate = utils.parseDateString(date, locale);
    const isValidInput = utils.isDate(localeParsedDate);
    const dateParsed = isValidInput ? localeParsedDate : new Date(date);
    if (!utils.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 (!keyboardUtils.isKey(event, "Enter") || editedValue == null || editedValue === "")
      return;
    event.preventDefault();
    handleNewDate(event, editedValue);
  };
  const onFocusHandler = (event) => {
    if (!localValue) return;
    const formattedDate = isValidValue && utils.isDate(localValue) ? utils.getStringFromDate(localValue, locale) : editedValue;
    setEditedValue(formattedDate);
    onFocus?.(event, formattedDate);
  };
  const onChangeHandler = (event, val) => {
    setEditedValue(val);
  };
  const isInvalid = !isValidValue && inputValue !== "";
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      id,
      className: cx(classes.root, {
        [classes.invalid]: isInvalid
      }),
      children: [
        showDayOfWeek && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.headerDayOfWeek, children: weekdayDisplay || " " }),
        /* @__PURE__ */ jsxRuntime.jsx(
          Input.HvInput,
          {
            type: "text",
            id: setId.setId(id, "header-input"),
            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";
exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;
exports.HvCalendarHeader = HvCalendarHeader;