@mui/x-date-pickers-pro/PickersRangeCalendarHeader/PickersRangeCalendarHeader.mjs

The Pro plan edition of the MUI X Date and Time Picker components.

'use client';

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
const _excluded = ["calendars", "month", "monthIndex", "labelId"],
  _excluded2 = ["format", "slots", "slotProps", "currentMonth", "onMonthChange", "disableFuture", "disablePast", "minDate", "maxDate", "timezone", "reduceAnimations", "views", "view"];
import * as React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
import { PickersArrowSwitcher, useNextMonthDisabled, usePreviousMonthDisabled } from '@mui/x-date-pickers/internals';
import { usePickerAdapter, usePickerTranslations } from '@mui/x-date-pickers/hooks';
import { jsx as _jsx } from "react/jsx-runtime";
const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher, {
  slot: 'internal'
})({
  padding: '12px 16px 4px 16px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between'
});
const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
  const adapter = usePickerAdapter();
  const translations = usePickerTranslations();
  const {
      calendars,
      month,
      monthIndex,
      labelId
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  const {
      format,
      slots,
      slotProps,
      currentMonth,
      onMonthChange,
      disableFuture,
      disablePast,
      minDate,
      maxDate,
      timezone
      // omit props that are not used in the PickersArrowSwitcher
    } = other,
    otherRangeProps = _objectWithoutPropertiesLoose(other, _excluded2);
  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
    disableFuture,
    maxDate,
    timezone
  });
  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
    disablePast,
    minDate,
    timezone
  });
  if (calendars === 1) {
    return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
      labelId: labelId,
      ref: ref
    }));
  }
  const selectNextMonth = () => onMonthChange(adapter.addMonths(currentMonth, 1));
  const selectPreviousMonth = () => onMonthChange(adapter.addMonths(currentMonth, -1));
  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, _extends({}, otherRangeProps, {
    ref: ref,
    onGoToPrevious: selectPreviousMonth,
    onGoToNext: selectNextMonth,
    isPreviousHidden: monthIndex !== 0,
    isPreviousDisabled: isPreviousMonthDisabled,
    previousLabel: translations.previousMonth,
    isNextHidden: monthIndex !== calendars - 1,
    isNextDisabled: isNextMonthDisabled,
    nextLabel: translations.nextMonth,
    slots: slots,
    slotProps: slotProps,
    labelId: labelId,
    children: adapter.formatByString(month, format ?? `${adapter.formats.month} ${adapter.formats.year}`)
  }));
});
if (process.env.NODE_ENV !== "production") PickersRangeCalendarHeader.displayName = "PickersRangeCalendarHeader";
process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes /* remove-proptypes */ = {
  // ----------------------------- Warning --------------------------------
  // | These PropTypes are generated from the TypeScript type definitions |
  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
  // ----------------------------------------------------------------------
  /**
   * The number of calendars rendered.
   */
  calendars: PropTypes.oneOf([1, 2, 3]).isRequired,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: PropTypes.object,
  /**
   * A CSS class name applied to the root element.
   */
  className: PropTypes.string,
  /**
   * The first visible month.
   */
  currentMonth: PropTypes.object.isRequired,
  /**
   * If `true`, the view cannot be switched.
   * The switch button is hidden and a click on the label does nothing.
   */
  disabled: PropTypes.bool,
  /**
   * If `true`, disable values after the current date.
   */
  disableFuture: PropTypes.bool,
  /**
   * If `true`, disable values before the current date.
   */
  disablePast: PropTypes.bool,
  /**
   * Format used to display the date.
   * @default `${adapter.formats.month} ${adapter.formats.year}`
   */
  format: PropTypes.string,
  /**
   * Id of the calendar text element.
   * It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
   */
  labelId: PropTypes.string,
  /**
   * Maximal selectable date.
   */
  maxDate: PropTypes.object.isRequired,
  /**
   * Minimal selectable date.
   */
  minDate: PropTypes.object.isRequired,
  /**
   * Month used for this header.
   */
  month: PropTypes.object.isRequired,
  /**
   * Index of the month used for this header.
   */
  monthIndex: PropTypes.number.isRequired,
  /**
   * Callback fired when the displayed month changes.
   * @param {PickerValidDate} date The new displayed month.
   */
  onMonthChange: PropTypes.func.isRequired,
  /**
   * Callback fired when the view changes.
   * @param {DateView} view The new view.
   */
  onViewChange: PropTypes.func,
  /**
   * If `true`, disable heavy animations.
   */
  reduceAnimations: PropTypes.bool.isRequired,
  /**
   * The props used for each component slot.
   * @default {}
   */
  slotProps: PropTypes.object,
  /**
   * Overridable component slots.
   * @default {}
   */
  slots: PropTypes.object,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
  /**
   * The timezone used to compare dates.
   */
  timezone: PropTypes.string.isRequired,
  /**
   * The visible view.
   */
  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
  /**
   * Available views.
   */
  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
} : void 0;
export { PickersRangeCalendarHeader };