@hitachivantara/uikit-react-core/dist/cjs/Calendar/SingleCalendar/SingleCalendar.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 keyboardUtils = require("../../utils/keyboardUtils.cjs");
const setId = require("../../utils/setId.cjs");
const CalendarHeader = require("../CalendarHeader/CalendarHeader.cjs");
const model = require("../model.cjs");
const utils = require("../utils.cjs");
const CalendarCell = require("./CalendarCell.cjs");
const SingleCalendar_styles = require("./SingleCalendar.styles.cjs");
const ComposedNavigation = require("../CalendarNavigation/ComposedNavigation/ComposedNavigation.cjs");
const MonthSelector = require("../CalendarNavigation/MonthSelector/MonthSelector.cjs");
const Panel = require("../../Panel/Panel.cjs");
const Typography = require("../../Typography/Typography.cjs");
const HvSingleCalendar = ({
  classes: classesProp,
  className,
  id,
  locale = utils.DEFAULT_LOCALE,
  value,
  visibleMonth,
  visibleYear,
  minimumDate,
  maximumDate,
  onChange,
  onInputChange,
  onVisibleDateChange,
  showEndDate,
  showDayOfWeek,
  invalidDateLabel,
  children,
  ...others
}) => {
  const { classes, cx } = SingleCalendar_styles.useClasses(classesProp);
  const today = /* @__PURE__ */ new Date();
  const localValue = value ?? today;
  const [calViewMode, setCalViewMode] = React.useState("calendar");
  const rangeMode = utils.isRange(localValue);
  const isDateSelectionMode = rangeMode && !utils.isDate(localValue.endDate);
  const calModel = rangeMode ? model.generateCalendarModel(localValue.startDate, visibleMonth, visibleYear) : model.generateCalendarModel(localValue, visibleMonth, visibleYear);
  const firstDayOfCurrentMonth = new Date(calModel.year, calModel.month - 1, 1);
  const firstDayOfCurrentMonthTime = firstDayOfCurrentMonth.getTime();
  const listWeekdayNames = React.useMemo(() => utils.getWeekdayNamesList(locale), [locale]);
  const handleChange = (event, date) => {
    event?.preventDefault();
    onChange?.(event, date);
  };
  const handleInputChange = (event, date) => {
    event?.preventDefault();
    onInputChange?.(event, date);
  };
  const getNavChild = (event, siblings, i) => {
    if (keyboardUtils.isKey(event, "ArrowLeft")) return siblings[i - 1];
    if (keyboardUtils.isKey(event, "ArrowRight")) return siblings[i + 1];
    if (keyboardUtils.isKey(event, "ArrowUp")) return siblings[i - 7];
    if (keyboardUtils.isKey(event, "ArrowDown")) return siblings[i + 7];
    return void 0;
  };
  const handleKeyDown = (event) => {
    const el = document?.activeElement;
    const parent = el?.parentElement?.parentElement;
    const siblings = parent != null ? Array.from(
      parent.getElementsByClassName(classes.cellContainer)
    ) : [];
    const elIndex = el ? siblings.indexOf(el) : 0;
    if (keyboardUtils.isKey(event, "Enter")) {
      el.focus();
      return;
    }
    const child = getNavChild(event, siblings, elIndex);
    if (child) {
      const inMonth = child.getAttribute("data-in-month");
      if (inMonth === "true") {
        event?.preventDefault();
        child?.focus();
      }
    }
  };
  const renderWeekLabel = (dayName, index) => /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", className: classes.calendarDay, children: dayName }, index);
  const renderCalendarDate = (currentDate) => {
    return /* @__PURE__ */ jsxRuntime.jsx(
      CalendarCell.HvCalendarCell,
      {
        classes,
        tabIndex: currentDate.getTime() === firstDayOfCurrentMonthTime ? 0 : -1,
        onChange: handleChange,
        onKeyDown: handleKeyDown,
        value: currentDate,
        today,
        calendarValue: localValue,
        rangeMode,
        isDateSelectionMode,
        locale,
        firstDayOfCurrentMonth,
        maximumDate,
        minimumDate
      },
      currentDate.toString()
    );
  };
  return /* @__PURE__ */ jsxRuntime.jsxs(Panel.HvPanel, { id, className: cx(classes.root, className), ...others, children: [
    /* @__PURE__ */ jsxRuntime.jsx(
      CalendarHeader.HvCalendarHeader,
      {
        id: setId.setId(id, "header"),
        locale,
        value,
        onChange: handleInputChange,
        showEndDate: showEndDate && !isDateSelectionMode,
        showDayOfWeek,
        invalidDateLabel
      }
    ),
    calViewMode === "calendar" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        ComposedNavigation.HvComposedNavigation,
        {
          id,
          locale,
          onChange: onVisibleDateChange,
          onViewModeChange: setCalViewMode,
          visibleYear: visibleYear || today.getFullYear(),
          visibleMonth: visibleMonth || today.getMonth() + 1
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsxs(
        "div",
        {
          className: classes.calendarGrid,
          "aria-controls": CalendarHeader.HvCalendarHeader?.[0]?.id,
          children: [
            listWeekdayNames.map(renderWeekLabel),
            calModel.dates.map(renderCalendarDate)
          ]
        }
      )
    ] }),
    calViewMode === "monthly" && /* @__PURE__ */ jsxRuntime.jsx(
      MonthSelector.HvMonthSelector,
      {
        id,
        locale,
        onChange: onVisibleDateChange,
        onViewModeChange: setCalViewMode,
        visibleMonth: visibleMonth || today.getMonth() + 1,
        rangeMode
      }
    )
  ] });
};
exports.singleCalendarClasses = SingleCalendar_styles.staticClasses;
exports.HvSingleCalendar = HvSingleCalendar;