@pisell/date-picker 1.0.0

package/lib/DateRangeCalendar/DateRangeCalendar.js

@@ -0,0 +1,683 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/DateRangeCalendar/DateRangeCalendar.tsx
+var DateRangeCalendar_exports = {};
+__export(DateRangeCalendar_exports, {
+  DateRangeCalendar: () => DateRangeCalendar
+});
+module.exports = __toCommonJS(DateRangeCalendar_exports);
+var React = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_clsx = __toESM(require("clsx"));
+var import_useEventCallback = __toESM(require("@mui/utils/useEventCallback"));
+var import_useMediaQuery = __toESM(require("@mui/material/useMediaQuery"));
+var import_utils = require("@mui/base/utils");
+var import_styles = require("@mui/material/styles");
+var import_utils2 = require("@mui/utils");
+var import_internals = require("@mui/x-date-pickers/internals");
+var import_releaseInfo = require("../internals/utils/releaseInfo");
+var import_dateRangeCalendarClasses = require("./dateRangeCalendarClasses");
+var import_date_utils = require("../internals/utils/date-utils");
+var import_date_range_manager = require("../internals/utils/date-range-manager");
+var import_DateRangePickerDay = require("../DateRangePickerDay");
+var import_valueManagers = require("../internals/utils/valueManagers");
+var import_useDragRange = require("./useDragRange");
+var import_useRangePosition = require("../internals/hooks/useRangePosition");
+var releaseInfo = (0, import_releaseInfo.getReleaseInfo)();
+var DateRangeCalendarRoot = (0, import_styles.styled)("div", {
+  name: "MuiDateRangeCalendar",
+  slot: "Root",
+  overridesResolver: (_, styles) => styles.root
+})({
+  display: "flex",
+  flexDirection: "row"
+});
+var DateRangeCalendarMonthContainer = (0, import_styles.styled)("div", {
+  name: "MuiDateRangeCalendar",
+  slot: "Container",
+  overridesResolver: (_, styles) => styles.monthContainer
+})(({ theme }) => ({
+  "&:not(:last-of-type)": {
+    borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
+  }
+}));
+var DateRangeCalendarArrowSwitcher = (0, import_styles.styled)(import_internals.PickersArrowSwitcher)({
+  padding: "16px 16px 8px 16px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+});
+var DAY_RANGE_SIZE = 40;
+var weeksContainerHeight = (DAY_RANGE_SIZE + import_internals.DAY_MARGIN * 2) * 6;
+var warnInvalidCurrentMonthCalendarPosition = (0, import_internals.buildWarning)([
+  "The `currentMonthCalendarPosition` prop must be an integer between `1` and the amount of calendars rendered.",
+  "For example if you have 2 calendars rendered, it should be equal to either 1 or 2."
+]);
+var DayCalendarForRange = (0, import_styles.styled)(import_internals.DayCalendar)(({ theme }) => ({
+  minWidth: 312,
+  minHeight: weeksContainerHeight,
+  [`&.${import_dateRangeCalendarClasses.dateRangeCalendarClasses.dayDragging}`]: {
+    [`& .${import_DateRangePickerDay.dateRangePickerDayClasses.day}`]: {
+      cursor: "grabbing"
+    },
+    [`& .${import_DateRangePickerDay.dateRangePickerDayClasses.root}:not(.${import_DateRangePickerDay.dateRangePickerDayClasses.rangeIntervalDayHighlightStart}):not(.${import_DateRangePickerDay.dateRangePickerDayClasses.rangeIntervalDayHighlightEnd}) .${import_DateRangePickerDay.dateRangePickerDayClasses.day}:not(.${import_DateRangePickerDay.dateRangePickerDayClasses.notSelectedDate})`]: {
+      // we can't override `PickersDay` background color here, because it's styles take precedence
+      opacity: 0.6
+    }
+  },
+  [`&:not(.${import_dateRangeCalendarClasses.dateRangeCalendarClasses.dayDragging}) .${import_DateRangePickerDay.dateRangePickerDayClasses.dayOutsideRangeInterval}`]: {
+    "@media (pointer: fine)": {
+      "&:hover": {
+        border: `1px solid ${(theme.vars || theme).palette.grey[500]}`
+      }
+    }
+  }
+}));
+function useDateRangeCalendarDefaultizedProps(props, name) {
+  const utils = (0, import_internals.useUtils)();
+  const defaultDates = (0, import_internals.useDefaultDates)();
+  const themeProps = (0, import_styles.useThemeProps)({
+    props,
+    name
+  });
+  return {
+    ...themeProps,
+    renderLoading: themeProps.renderLoading ?? (() => /* @__PURE__ */ React.createElement("span", { "data-mui-test": "loading-progress" }, "...")),
+    reduceAnimations: themeProps.reduceAnimations ?? import_internals.defaultReduceAnimations,
+    loading: props.loading ?? false,
+    disablePast: props.disablePast ?? false,
+    disableFuture: props.disableFuture ?? false,
+    minDate: (0, import_internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
+    maxDate: (0, import_internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
+    calendars: themeProps.calendars ?? 2,
+    disableDragEditing: themeProps.disableDragEditing ?? false
+  };
+}
+var useUtilityClasses = (ownerState) => {
+  const { classes, isDragging } = ownerState;
+  const slots = {
+    root: ["root"],
+    monthContainer: ["monthContainer"],
+    dayCalendar: [isDragging && "dayDragging"]
+  };
+  return (0, import_utils2.unstable_composeClasses)(slots, import_dateRangeCalendarClasses.getDateRangeCalendarUtilityClass, classes);
+};
+var DateRangeCalendar = React.forwardRef(function DateRangeCalendar2(inProps, ref) {
+  const props = useDateRangeCalendarDefaultizedProps(inProps, "MuiDateRangeCalendar");
+  const shouldHavePreview = (0, import_useMediaQuery.default)(import_internals.DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
+    defaultMatches: false
+  });
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    className,
+    disableFuture,
+    disablePast,
+    minDate,
+    maxDate,
+    shouldDisableDate,
+    reduceAnimations,
+    onMonthChange,
+    defaultCalendarMonth,
+    rangePosition: rangePositionProp,
+    defaultRangePosition: inDefaultRangePosition,
+    onRangePositionChange: inOnRangePositionChange,
+    calendars,
+    currentMonthCalendarPosition = 1,
+    components,
+    componentsProps,
+    slots: innerSlots,
+    slotProps: innerSlotProps,
+    loading,
+    renderLoading,
+    disableHighlightToday,
+    readOnly,
+    disabled,
+    showDaysOutsideCurrentMonth,
+    dayOfWeekFormatter,
+    disableAutoMonthSwitching,
+    autoFocus,
+    fixedWeekNumber,
+    disableDragEditing,
+    displayWeekNumber,
+    timezone: timezoneProp,
+    ...other
+  } = props;
+  const { value, handleValueChange, timezone } = (0, import_internals.useControlledValueWithTimezone)({
+    name: "DateRangeCalendar",
+    timezone: timezoneProp,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    valueManager: import_valueManagers.rangeValueManager
+  });
+  const utils = (0, import_internals.useUtils)();
+  const localeText = (0, import_internals.useLocaleText)();
+  const now = (0, import_internals.useNow)(timezone);
+  const slots = innerSlots ?? (0, import_internals.uncapitalizeObjectKeys)(components);
+  const slotProps = innerSlotProps ?? componentsProps;
+  const { rangePosition, onRangePositionChange } = (0, import_useRangePosition.useRangePosition)({
+    rangePosition: rangePositionProp,
+    defaultRangePosition: inDefaultRangePosition,
+    onRangePositionChange: inOnRangePositionChange
+  });
+  const handleDatePositionChange = (0, import_useEventCallback.default)((position) => {
+    if (rangePosition !== position) {
+      onRangePositionChange(position);
+    }
+  });
+  const handleSelectedDayChange = (0, import_useEventCallback.default)(
+    (newDate, selectionState, allowRangeFlip = false) => {
+      const { nextSelection, newRange } = (0, import_date_range_manager.calculateRangeChange)({
+        newDate,
+        utils,
+        range: value,
+        rangePosition,
+        allowRangeFlip
+      });
+      onRangePositionChange(nextSelection);
+      const isFullRangeSelected = rangePosition === "end" && (0, import_date_utils.isRangeValid)(utils, newRange);
+      handleValueChange(newRange, isFullRangeSelected ? "finish" : "partial");
+    }
+  );
+  const handleDrop = (0, import_useEventCallback.default)((newDate) => {
+    handleSelectedDayChange(newDate, void 0, true);
+  });
+  const shouldDisableDragEditing = disableDragEditing || disabled || readOnly;
+  const valueDayRange = React.useMemo(
+    () => [
+      value[0] == null || !utils.isValid(value[0]) ? value[0] : utils.startOfDay(value[0]),
+      value[1] == null || !utils.isValid(value[1]) ? value[1] : utils.endOfDay(value[1])
+    ],
+    [value, utils]
+  );
+  const { isDragging, rangeDragDay, draggingDatePosition, ...dragEventHandlers } = (0, import_useDragRange.useDragRange)({
+    disableDragEditing: shouldDisableDragEditing,
+    onDrop: handleDrop,
+    onDatePositionChange: handleDatePositionChange,
+    utils,
+    dateRange: valueDayRange,
+    timezone
+  });
+  const ownerState = { ...props, isDragging };
+  const classes = useUtilityClasses(ownerState);
+  const draggingRange = React.useMemo(() => {
+    if (!valueDayRange[0] || !valueDayRange[1] || !rangeDragDay) {
+      return [null, null];
+    }
+    const newRange = (0, import_date_range_manager.calculateRangeChange)({
+      utils,
+      range: valueDayRange,
+      newDate: rangeDragDay,
+      rangePosition,
+      allowRangeFlip: true
+    }).newRange;
+    return newRange[0] !== null && newRange[1] !== null ? [utils.startOfDay(newRange[0]), utils.endOfDay(newRange[1])] : newRange;
+  }, [rangePosition, rangeDragDay, utils, valueDayRange]);
+  const wrappedShouldDisableDate = React.useMemo(() => {
+    if (!shouldDisableDate) {
+      return void 0;
+    }
+    return (dayToTest) => shouldDisableDate(dayToTest, draggingDatePosition || rangePosition);
+  }, [shouldDisableDate, rangePosition, draggingDatePosition]);
+  const {
+    calendarState,
+    changeFocusedDay,
+    changeMonth,
+    handleChangeMonth,
+    onMonthSwitchingAnimationEnd
+  } = (0, import_internals.useCalendarState)({
+    value: value[0] || value[1],
+    defaultCalendarMonth,
+    disableFuture,
+    disablePast,
+    disableSwitchToMonthOnDayFocus: true,
+    maxDate,
+    minDate,
+    onMonthChange,
+    reduceAnimations,
+    shouldDisableDate: wrappedShouldDisableDate,
+    timezone
+  });
+  const prevValue = React.useRef(null);
+  React.useEffect(() => {
+    var _a, _b;
+    const date = rangePosition === "start" ? value[0] : value[1];
+    if (!date || !utils.isValid(date)) {
+      return;
+    }
+    const prevDate = rangePosition === "start" ? (_a = prevValue.current) == null ? void 0 : _a[0] : (_b = prevValue.current) == null ? void 0 : _b[1];
+    prevValue.current = value;
+    if (disableAutoMonthSwitching && prevDate && utils.isEqual(prevDate, date)) {
+      return;
+    }
+    const displayingMonthRange = calendars - 1;
+    const currentMonthNumber = utils.getMonth(calendarState.currentMonth);
+    const requestedMonthNumber = utils.getMonth(date);
+    if (!utils.isSameYear(calendarState.currentMonth, date) || requestedMonthNumber < currentMonthNumber || requestedMonthNumber > currentMonthNumber + displayingMonthRange) {
+      const newMonth = rangePosition === "start" ? date : (
+        // If need to focus end, scroll to the state when "end" is displaying in the last calendar
+        utils.addMonths(date, -displayingMonthRange)
+      );
+      changeMonth(newMonth);
+    }
+  }, [rangePosition, value]);
+  const selectNextMonth = React.useCallback(() => {
+    changeMonth(utils.addMonths(calendarState.currentMonth, 1));
+  }, [changeMonth, calendarState.currentMonth, utils]);
+  const selectPreviousMonth = React.useCallback(() => {
+    changeMonth(utils.addMonths(calendarState.currentMonth, -1));
+  }, [changeMonth, calendarState.currentMonth, utils]);
+  const isNextMonthDisabled = (0, import_internals.useNextMonthDisabled)(calendarState.currentMonth, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = (0, import_internals.usePreviousMonthDisabled)(calendarState.currentMonth, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  const baseDateValidationProps = {
+    disablePast,
+    disableFuture,
+    maxDate,
+    minDate
+  };
+  const commonViewProps = {
+    disableHighlightToday,
+    readOnly,
+    disabled
+  };
+  const minDateWithDisabled = disabled && value[0] || minDate;
+  const maxDateWithDisabled = disabled && value[1] || maxDate;
+  const [rangePreviewDay, setRangePreviewDay] = React.useState(null);
+  const CalendarTransitionProps = React.useMemo(
+    () => ({
+      onMouseLeave: () => setRangePreviewDay(null)
+    }),
+    []
+  );
+  const previewingRange = (0, import_date_range_manager.calculateRangePreview)({
+    utils,
+    range: valueDayRange,
+    newDate: rangePreviewDay,
+    rangePosition
+  });
+  const handleDayMouseEnter = (0, import_useEventCallback.default)(
+    (event, newPreviewRequest) => {
+      if (!(0, import_date_utils.isWithinRange)(utils, newPreviewRequest, valueDayRange)) {
+        setRangePreviewDay(newPreviewRequest);
+      } else {
+        setRangePreviewDay(null);
+      }
+    }
+  );
+  const slotsForDayCalendar = {
+    day: import_DateRangePickerDay.DateRangePickerDay,
+    ...slots
+  };
+  const slotPropsForDayCalendar = {
+    ...slotProps,
+    day: (dayOwnerState) => {
+      const { day } = dayOwnerState;
+      const isSelectedStartDate = (0, import_date_utils.isStartOfRange)(utils, day, valueDayRange);
+      const isSelectedEndDate = (0, import_date_utils.isEndOfRange)(utils, day, valueDayRange);
+      const shouldInitDragging = !shouldDisableDragEditing && valueDayRange[0] && valueDayRange[1];
+      const isElementDraggable = shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
+      let datePosition;
+      if (isSelectedStartDate) {
+        datePosition = "start";
+      } else if (isSelectedEndDate) {
+        datePosition = "end";
+      }
+      const isStartOfHighlighting = isDragging ? (0, import_date_utils.isStartOfRange)(utils, day, draggingRange) : isSelectedStartDate;
+      const isEndOfHighlighting = isDragging ? (0, import_date_utils.isEndOfRange)(utils, day, draggingRange) : isSelectedEndDate;
+      return {
+        isPreviewing: shouldHavePreview ? (0, import_date_utils.isWithinRange)(utils, day, previewingRange) : false,
+        isStartOfPreviewing: shouldHavePreview ? (0, import_date_utils.isStartOfRange)(utils, day, previewingRange) : false,
+        isEndOfPreviewing: shouldHavePreview ? (0, import_date_utils.isEndOfRange)(utils, day, previewingRange) : false,
+        isHighlighting: (0, import_date_utils.isWithinRange)(utils, day, isDragging ? draggingRange : valueDayRange),
+        isStartOfHighlighting,
+        isEndOfHighlighting: isDragging ? (0, import_date_utils.isEndOfRange)(utils, day, draggingRange) : isSelectedEndDate,
+        onMouseEnter: shouldHavePreview ? handleDayMouseEnter : void 0,
+        // apply selected styling to the dragging start or end day
+        isVisuallySelected: dayOwnerState.selected || isDragging && (isStartOfHighlighting || isEndOfHighlighting),
+        "data-position": datePosition,
+        ...dragEventHandlers,
+        draggable: isElementDraggable ? true : void 0,
+        ...(0, import_utils.resolveComponentProps)(slotProps == null ? void 0 : slotProps.day, dayOwnerState) ?? {}
+      };
+    }
+  };
+  const calendarMonths = React.useMemo(
+    () => Array.from({ length: calendars }).map((_, index) => index),
+    [calendars]
+  );
+  const visibleMonths = React.useMemo(() => {
+    if (process.env.NODE_ENV !== "production") {
+      if (currentMonthCalendarPosition > calendars || currentMonthCalendarPosition < 1) {
+        warnInvalidCurrentMonthCalendarPosition();
+      }
+    }
+    const firstMonth = utils.addMonths(
+      calendarState.currentMonth,
+      1 - currentMonthCalendarPosition
+    );
+    return Array.from({ length: calendars }).map((_, index) => utils.addMonths(firstMonth, index));
+  }, [utils, calendarState.currentMonth, calendars, currentMonthCalendarPosition]);
+  const focusedMonth = React.useMemo(() => {
+    if (!autoFocus) {
+      return null;
+    }
+    if (value[0] != null) {
+      return visibleMonths.find((month) => utils.isSameMonth(month, value[0]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find((month) => utils.isSameMonth(month, value[1]));
+    }
+    return visibleMonths.find((month) => utils.isSameMonth(month, now)) ?? visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
+  return /* @__PURE__ */ React.createElement(
+    DateRangeCalendarRoot,
+    {
+      ref,
+      className: (0, import_clsx.default)(className, classes.root),
+      ownerState,
+      ...other
+    },
+    calendarMonths.map((month, index) => /* @__PURE__ */ React.createElement(DateRangeCalendarMonthContainer, { key: month, className: classes.monthContainer }, calendars === 1 ? /* @__PURE__ */ React.createElement(
+      import_internals.PickersCalendarHeader,
+      {
+        views: ["day"],
+        view: "day",
+        currentMonth: calendarState.currentMonth,
+        onMonthChange: (newMonth, direction) => handleChangeMonth({ newMonth, direction }),
+        minDate: minDateWithDisabled,
+        maxDate: maxDateWithDisabled,
+        disabled,
+        disablePast,
+        disableFuture,
+        reduceAnimations,
+        slots,
+        slotProps,
+        timezone
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      DateRangeCalendarArrowSwitcher,
+      {
+        onGoToPrevious: selectPreviousMonth,
+        onGoToNext: selectNextMonth,
+        isPreviousHidden: index !== 0,
+        isPreviousDisabled: isPreviousMonthDisabled,
+        previousLabel: localeText.previousMonth,
+        isNextHidden: index !== calendars - 1,
+        isNextDisabled: isNextMonthDisabled,
+        nextLabel: localeText.nextMonth,
+        slots,
+        slotProps
+      },
+      utils.format(visibleMonths[month], "monthAndYear")
+    ), /* @__PURE__ */ React.createElement(
+      DayCalendarForRange,
+      {
+        key: index,
+        className: classes.dayCalendar,
+        ...calendarState,
+        ...baseDateValidationProps,
+        ...commonViewProps,
+        onMonthSwitchingAnimationEnd,
+        onFocusedDayChange: changeFocusedDay,
+        reduceAnimations,
+        selectedDays: value,
+        onSelectedDaysChange: handleSelectedDayChange,
+        currentMonth: visibleMonths[month],
+        TransitionProps: CalendarTransitionProps,
+        shouldDisableDate: wrappedShouldDisableDate,
+        showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
+        dayOfWeekFormatter,
+        loading,
+        renderLoading,
+        slots: slotsForDayCalendar,
+        slotProps: slotPropsForDayCalendar,
+        autoFocus: month === focusedMonth,
+        fixedWeekNumber,
+        displayWeekNumber,
+        timezone
+      }
+    )))
+  );
+});
+DateRangeCalendar.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
+  autoFocus: import_prop_types.default.bool,
+  /**
+   * The number of calendars to render.
+   * @default 2
+   */
+  calendars: import_prop_types.default.oneOf([1, 2, 3]),
+  classes: import_prop_types.default.object,
+  className: import_prop_types.default.string,
+  /**
+   * Overridable components.
+   * @default {}
+   * @deprecated Please use `slots`.
+   */
+  components: import_prop_types.default.object,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   * @deprecated Please use `slotProps`.
+   */
+  componentsProps: import_prop_types.default.object,
+  /**
+   * Position the current month is rendered in.
+   * @default 1
+   */
+  currentMonthCalendarPosition: import_prop_types.default.oneOf([1, 2, 3]),
+  /**
+   * Formats the day of week displayed in the calendar header.
+   * @param {string} day The day of week provided by the adapter's method `getWeekdays`.
+   * @returns {string} The name to display.
+   * @default (day) => day.charAt(0).toUpperCase()
+   */
+  dayOfWeekFormatter: import_prop_types.default.func,
+  /**
+   * Default calendar month displayed when `value={[null, null]}`.
+   */
+  defaultCalendarMonth: import_prop_types.default.any,
+  /**
+   * The initial position in the edited date range.
+   * Used when the component is not controlled.
+   * @default 'start'
+   */
+  defaultRangePosition: import_prop_types.default.oneOf(["end", "start"]),
+  /**
+   * The default selected value.
+   * Used when the component is not controlled.
+   */
+  defaultValue: import_prop_types.default.arrayOf(import_prop_types.default.any),
+  /**
+   * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
+   * @default false
+   */
+  disableAutoMonthSwitching: import_prop_types.default.bool,
+  /**
+   * If `true`, the picker and text field are disabled.
+   * @default false
+   */
+  disabled: import_prop_types.default.bool,
+  /**
+   * If `true`, editing dates by dragging is disabled.
+   * @default false
+   */
+  disableDragEditing: import_prop_types.default.bool,
+  /**
+   * If `true`, disable values after the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disableFuture: import_prop_types.default.bool,
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday: import_prop_types.default.bool,
+  /**
+   * If `true`, disable values before the current date for date components, time for time components and both for date time components.
+   * @default false
+   */
+  disablePast: import_prop_types.default.bool,
+  /**
+   * If `true`, the week number will be display in the calendar.
+   */
+  displayWeekNumber: import_prop_types.default.bool,
+  /**
+   * Calendar will show more weeks in order to match this value.
+   * Put it to 6 for having fix number of week in Gregorian calendars
+   * @default undefined
+   */
+  fixedWeekNumber: import_prop_types.default.number,
+  /**
+   * If `true`, calls `renderLoading` instead of rendering the day calendar.
+   * Can be used to preload information and show it in calendar.
+   * @default false
+   */
+  loading: import_prop_types.default.bool,
+  /**
+   * Maximal selectable date.
+   */
+  maxDate: import_prop_types.default.any,
+  /**
+   * Minimal selectable date.
+   */
+  minDate: import_prop_types.default.any,
+  /**
+   * Callback fired when the value changes.
+   * @template TDate
+   * @param {DateRange<TDate>} value The new value.
+   * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
+   */
+  onChange: import_prop_types.default.func,
+  /**
+   * Callback fired on month change.
+   * @template TDate
+   * @param {TDate} month The new month.
+   */
+  onMonthChange: import_prop_types.default.func,
+  /**
+   * Callback fired when the range position changes.
+   * @param {RangePosition} rangePosition The new range position.
+   */
+  onRangePositionChange: import_prop_types.default.func,
+  /**
+   * The position in the currently edited date range.
+   * Used when the component position is controlled.
+   */
+  rangePosition: import_prop_types.default.oneOf(["end", "start"]),
+  /**
+   * Make picker read only.
+   * @default false
+   */
+  readOnly: import_prop_types.default.bool,
+  /**
+   * Disable heavy animations.
+   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   */
+  reduceAnimations: import_prop_types.default.bool,
+  /**
+   * Component displaying when passed `loading` true.
+   * @returns {React.ReactNode} The node to render when loading.
+   * @default () => "..."
+   */
+  renderLoading: import_prop_types.default.func,
+  /**
+   * Disable specific date.
+   * @template TDate
+   * @param {TDate} day The date to test.
+   * @param {string} position The date to test, 'start' or 'end'.
+   * @returns {boolean} Returns `true` if the date should be disabled.
+   */
+  shouldDisableDate: import_prop_types.default.func,
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth: import_prop_types.default.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: import_prop_types.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: import_prop_types.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: import_prop_types.default.oneOfType([
+    import_prop_types.default.arrayOf(import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.object, import_prop_types.default.bool])),
+    import_prop_types.default.func,
+    import_prop_types.default.object
+  ]),
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @see See the {@link https://mui.com/x/react-date-pickers/timezone/ timezones documention} for more details.
+   * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
+   */
+  timezone: import_prop_types.default.string,
+  /**
+   * The selected value.
+   * Used when the component is controlled.
+   */
+  value: import_prop_types.default.arrayOf(import_prop_types.default.any)
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DateRangeCalendar
+});