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

Core React components for the NEXT Design System.

import { jsx } from "react/jsx-runtime";
import { getMonthNamesList } from "../../utils.js";
import { useClasses } from "./MonthSelector.styles.js";
import { staticClasses } from "./MonthSelector.styles.js";
import { HvButtonBase } from "../../../ButtonBase/ButtonBase.js";
const HvMonthSelector = ({
  classes: classesProp,
  id,
  locale,
  onChange,
  onViewModeChange,
  rangeMode,
  visibleMonth,
  ...others
}) => {
  const { classes, cx } = useClasses(classesProp);
  const listMonthNamesShort = getMonthNamesList(locale, "short");
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cx(classes.calendarMonthlyGrid, {
        [classes.rangeModeWidth]: rangeMode,
        [classes.normalWidth]: !rangeMode
      }),
      children: listMonthNamesShort.map((monthName, index) => /* @__PURE__ */ jsx(
        HvButtonBase,
        {
          className: cx(classes.calendarMonthlyCell, {
            [classes.calendarMonthlyCellSelected]: index + 1 === visibleMonth
          }),
          onClick: (event) => {
            onChange?.(event, "month", index + 1);
            onViewModeChange("calendar");
          },
          ...others,
          children: monthName
        },
        monthName
      ))
    }
  );
};
export {
  HvMonthSelector,
  staticClasses as monthSelectorClasses
};