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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { useRef } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { isDateRangeProp, isSameDay, isSameMonth, dateInProvidedValueRange, checkIfDateIsDisabled } from "../utils.js";
import { useClasses } from "./CalendarCell.styles.js";
import { staticClasses } from "./CalendarCell.styles.js";
import { HvButtonBase } from "../../ButtonBase/ButtonBase.js";
import { HvTypography } from "../../Typography/Typography.js";
const HvCalendarCell = (props) => {
  const {
    classes: classesProp,
    onChange,
    calendarValue,
    firstDayOfCurrentMonth,
    value,
    isDateSelectionMode,
    today,
    locale,
    minimumDate,
    maximumDate,
    rangeMode = false,
    ...others
  } = useDefaultProps("HvCalendarCell", props);
  const { classes, cx } = useClasses(classesProp);
  const buttonEl = useRef(null);
  const startDate = isDateRangeProp(calendarValue) ? calendarValue.startDate : void 0;
  const endDate = isDateRangeProp(calendarValue) ? calendarValue.endDate : void 0;
  const isCellToday = isSameDay(value, today);
  const isCellSelected = isSameDay(calendarValue, value);
  const inMonth = isSameMonth(value, firstDayOfCurrentMonth);
  const isCellAfterStartingDate = rangeMode && value && startDate ? value >= startDate : false;
  const isCellStartingDate = rangeMode ? isSameDay(value, startDate) : false;
  const isDateInSelectionRange = calendarValue && rangeMode ? dateInProvidedValueRange(value, calendarValue) : false;
  const isDateDisabled = checkIfDateIsDisabled(value, minimumDate, maximumDate);
  const startBookend = isSameDay(startDate, value);
  const endBookend = isSameDay(endDate, value);
  const isSelecting = isDateSelectionMode && isCellAfterStartingDate;
  const handleClick = (event) => {
    if (value) {
      onChange?.(event, value);
      if (buttonEl.current) setTimeout(() => buttonEl?.current?.focus());
    }
  };
  const renderDate = () => /* @__PURE__ */ jsx(
    HvButtonBase,
    {
      ref: buttonEl,
      className: classes.cellContainer,
      onClick: handleClick,
      disabled: isDateDisabled || !inMonth,
      "data-in-month": inMonth,
      ...others,
      children: /* @__PURE__ */ jsx(
        HvTypography,
        {
          component: "span",
          variant: isCellToday ? "label" : "body",
          className: cx(classes.calendarDate, {
            [classes.calendarDateSelected]: inMonth && isCellSelected,
            [classes.calendarDateNotInMonth]: !inMonth,
            [classes.calendarDateInSelectionRange]: inMonth && rangeMode && isDateInSelectionRange,
            [classes.calendarDateDisabled]: isDateDisabled,
            [classes.startBookend]: inMonth && (startBookend && rangeMode || isCellStartingDate && isDateSelectionMode),
            [classes.endBookend]: inMonth && endBookend && rangeMode
          }),
          children: value?.getDate()
        }
      )
    }
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cx(classes.dateWrapper, {
        [classes.cellsInRange]: inMonth && rangeMode && isSelecting,
        [classes.cellsOutsideRange]: rangeMode && !isSelecting
      }),
      "data-calendar-cell": "calendarCell",
      children: renderDate()
    }
  );
};
export {
  HvCalendarCell,
  staticClasses as calendarCellClasses,
  HvCalendarCell as default
};