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

Core React components for the NEXT Design System.

import { jsx, jsxs } from "react/jsx-runtime";
import { useContext } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { setId } from "../utils/setId.js";
import { useClasses } from "./Calendar.styles.js";
import { staticClasses } from "./Calendar.styles.js";
import { DEFAULT_LOCALE, isRange } from "./utils.js";
import { HvFormElementContext, HvFormElementValueContext } from "../FormElement/context.js";
import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
const HvCalendar = (props) => {
  const {
    classes: classesProp,
    id: idProp,
    locale = DEFAULT_LOCALE,
    value: valueProp,
    visibleMonth,
    visibleYear,
    rightVisibleMonth,
    rightVisibleYear,
    minimumDate,
    maximumDate,
    startAdornment,
    onChange,
    onInputChange,
    onVisibleDateChange,
    invalidDateLabel,
    ...others
  } = useDefaultProps("HvCalendar", props);
  const { classes } = useClasses(classesProp);
  const context = useContext(HvFormElementContext);
  const elementValue = useContext(HvFormElementValueContext);
  const value = valueProp ?? elementValue;
  const id = idProp ?? setId(context.id, "single-calendar");
  const rangeMode = isRange(value);
  const rightCalendarId = setId(id, "single-calendar-right");
  const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
  const singleCalendar = /* @__PURE__ */ jsx(
    HvSingleCalendar,
    {
      id,
      locale,
      value,
      visibleMonth: clampedMonth,
      visibleYear,
      minimumDate,
      maximumDate,
      onChange,
      onInputChange: (evt, date) => {
        onInputChange?.(evt, date, "left");
      },
      onVisibleDateChange,
      invalidDateLabel,
      ...others
    }
  );
  const rangeCalendar = /* @__PURE__ */ jsxs("div", { className: classes.rangeCalendarContainer, children: [
    /* @__PURE__ */ jsx(
      HvSingleCalendar,
      {
        className: classes.singleCalendar,
        id,
        locale,
        value,
        visibleMonth: clampedMonth,
        visibleYear,
        minimumDate,
        maximumDate,
        onChange,
        onInputChange: (evt, date) => {
          onInputChange?.(evt, date, "left");
        },
        onVisibleDateChange: (event, action, index) => onVisibleDateChange?.(event, action, index, "left"),
        invalidDateLabel,
        ...others
      }
    ),
    /* @__PURE__ */ jsx(
      HvSingleCalendar,
      {
        className: classes.singleCalendar,
        id: rightCalendarId,
        locale,
        value,
        visibleMonth: rightVisibleMonth,
        visibleYear: rightVisibleYear,
        minimumDate,
        maximumDate,
        onChange,
        onInputChange: (evt, date) => {
          onInputChange?.(evt, date, "right");
        },
        onVisibleDateChange: (event, action, index) => {
          onVisibleDateChange?.(event, action, index, "right");
        },
        showEndDate: true,
        invalidDateLabel,
        ...others
      }
    )
  ] });
  return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
    startAdornment,
    rangeMode ? rangeCalendar : singleCalendar
  ] });
};
export {
  HvCalendar,
  staticClasses as calendarClasses
};