@mui/x-date-pickers-pro 7.0.0-beta.6 → 7.0.0-beta.7

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-beta.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🦥 The Lazy loading feature is now stable and the `lazyLoading` feature flag was removed from the `experimentalFeatures` prop.
+- 🌍 Improve Japanese (ja-JP) locale for the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### Breaking changes
+
+- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
+- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+  The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
+
+#### `@mui/x-data-grid@7.0.0-beta.7`
+
+- [DataGrid] Fix focus visible style on scrollbar (#12402) @oliviertassinari
+- [DataGrid] Fix the issue where pressing the Delete key resets various cell values to an empty string. (#12216) @sooster910
+- [DataGrid] Make `rowCount` part of the state (#12381) @MBilalShafi
+- [DataGrid] Make column resizing and autosizing available in Community plan (#12420) @cherniavskii
+- [DataGrid] Remove `baseSwitch` slot (#12439) @romgrk
+- [l10n] Improve Japanese (ja-JP) locale (#12398) @makoto14
+
+#### `@mui/x-data-grid-pro@7.0.0-beta.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-beta.7`, plus:
+
+- [DataGridPro] Add `inputRef` to the props passed to `colDef.renderHeaderFilter` (#12328) @vovarudomanenko
+- [DataGridPro] Fix filler rendered for no reason when there are pinned columns (#12440) @cherniavskii
+- [DataGridPro] Make lazy loading feature stable (#12421) @cherniavskii
+- [DataGridPro] Render pinned and non-pinned column headers in one row (#12376) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.0.0-beta.7` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.7`, plus:
+
+- [DataGridPremium] Fix auto-scroll not working when selecting cell range (#12267) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.0.0-beta.7`
+
+- [fields] Fix `tabIndex` on accessible field DOM structure (#12311) @flaviendelangle
+- [fields] Fix items alignment on multi input range fields (#12312) @flaviendelangle
+- [pickers] Improve the customization of the range picker calendar header (#11988) @flaviendelangle
+- [pickers] Keep the existing time when looking for closest enabled date (#12377) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-beta.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-beta.7`.
+
+### Charts
+
+#### `@mui/x-charts@7.0.0-beta.7`
+
+- [charts] Fix axis highlight when axis is reversed (#12407) @alexfauquette
+
+### Tree View
+
+#### Breaking changes
+
+The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency:
+
+```diff
+ <SimpleTreeView
+-  onNodeFocus={onNodeFocus}
++  onItemFocus={onItemFocus}
+ />
+```
+
+#### `@mui/x-tree-view@7.0.0-beta.7`
+
+- [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte
+- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle
+- [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte
+
+### Docs
+
+- [docs] Add `legacy` bundle drop mention in migration pages (#12424) @LukasTy
+- [docs] Add missing luxon `Info` import (#12427) @LukasTy
+- [docs] Improve slots definitions for charts (#12408) @alexfauquette
+- [docs] Polish What's new in MUI X blog titles (#12309) @oliviertassinari
+- [docs] Replace `rel="noreferrer"` by `rel="noopener"` @oliviertassinari
+- [docs] Update `date-fns` `weekStarsOn` overriding example (#12416) @LukasTy
+
+### Core
+
+- [core] Fix CI (#12414) @flaviendelangle
+- [core] Fix PR deploy link for Tree View doc pages (#12411) @flaviendelangle
+
 ## 7.0.0-beta.6
 
 _Mar 8, 2024_
@@ -1731,7 +1827,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus:
   The Firefox browser currently does not support this behavior because the [getWeekInfo](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/getWeekInfo) API is not yet implemented.
 
   ```ts
-  import { Settings } from 'luxon';
+  import { Settings, Info } from 'luxon';
 
   Settings.defaultWeekSettings = {
     firstDay: 1,
@@ -2521,6 +2617,26 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.7
+
+_Mar 14, 2024_
+
+We'd like to offer a big thanks to @LukasTy who made this release possible.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.7`
+
+- [pickers] Keep the existing time when looking for closest enabled date (#12410) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.7` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.19.7`.
+
+### Docs
+
+- [docs] Add Pickers custom start of week section (#12425) @LukasTy
+
 ## 6.19.6
 
 _Mar 1, 2024_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -11,8 +11,7 @@ import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license';
-import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, PickersArrowSwitcher, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DayCalendar, useDefaultReduceAnimations, useCalendarState, useDefaultDates, useUtils, useNow, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone, useViews } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internals/utils/date-utils';
@@ -22,6 +21,7 @@ import { rangeValueManager } from '../internals/utils/valueManagers';
 import { useDragRange } from './useDragRange';
 import { useRangePosition } from '../internals/hooks/useRangePosition';
 import { DAY_RANGE_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
+import { PickersRangeCalendarHeader } from '../PickersRangeCalendarHeader';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
@@ -44,12 +44,6 @@ const DateRangeCalendarMonthContainer = styled('div', {
     borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
   }
 }));
-const DateRangeCalendarArrowSwitcher = styled(PickersArrowSwitcher)({
-  padding: '12px 16px 4px 16px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between'
-});
 const weeksContainerHeight = (DAY_RANGE_SIZE + DAY_MARGIN * 2) * 6;
 const warnInvalidCurrentMonthCalendarPosition = 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.']);
 const DayCalendarForRange = styled(DayCalendar)(({
@@ -192,7 +186,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     autoFocus
   });
   const utils = useUtils();
-  const localeText = useLocaleText();
   const now = useNow(timezone);
   const {
     rangePosition,
@@ -290,15 +283,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     shouldDisableDate: wrappedShouldDisableDate,
     timezone
   });
-
-  // When disabled, limit the view to the selected date
-  const minDateWithDisabled = disabled && value[0] || minDate;
-  const maxDateWithDisabled = disabled && value[1] || maxDate;
-  const CalendarHeader = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : PickersCalendarHeader;
+  const CalendarHeader = (_slots$calendarHeader = slots == null ? void 0 : slots.calendarHeader) != null ? _slots$calendarHeader : PickersRangeCalendarHeader;
   const calendarHeaderProps = useSlotProps({
     elementType: CalendarHeader,
     externalSlotProps: slotProps == null ? void 0 : slotProps.calendarHeader,
     additionalProps: {
+      calendars,
       views: ['day'],
       view: 'day',
       currentMonth: calendarState.currentMonth,
@@ -306,15 +296,15 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         newMonth,
         direction
       }),
-      minDate: minDateWithDisabled,
-      maxDate: maxDateWithDisabled,
+      minDate,
+      maxDate,
       disabled,
       disablePast,
       disableFuture,
       reduceAnimations,
+      timezone,
       slots,
-      slotProps,
-      timezone
+      slotProps
     },
     ownerState: props
   });
@@ -344,22 +334,6 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     }
   }, [rangePosition, value]); // eslint-disable-line
 
-  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 = useNextMonthDisabled(calendarState.currentMonth, {
-    disableFuture,
-    maxDate,
-    timezone
-  });
-  const isPreviousMonthDisabled = usePreviousMonthDisabled(calendarState.currentMonth, {
-    disablePast,
-    minDate,
-    timezone
-  });
   const baseDateValidationProps = {
     disablePast,
     disableFuture,
@@ -467,23 +441,14 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
     children: [/*#__PURE__*/_jsx(Watermark, {
       packageName: "x-date-pickers-pro",
       releaseInfo: releaseInfo
-    }), calendarMonths.map((month, index) => {
-      var _calendarHeaderProps$;
+    }), calendarMonths.map(monthIndex => {
+      const month = visibleMonths[monthIndex];
       return /*#__PURE__*/_jsxs(DateRangeCalendarMonthContainer, {
         className: classes.monthContainer,
-        children: [calendars === 1 ? /*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps)) : /*#__PURE__*/_jsx(DateRangeCalendarArrowSwitcher, {
-          onGoToPrevious: selectPreviousMonth,
-          onGoToNext: selectNextMonth,
-          isPreviousHidden: index !== 0,
-          isPreviousDisabled: isPreviousMonthDisabled,
-          previousLabel: localeText.previousMonth,
-          isNextHidden: index !== calendars - 1,
-          isNextDisabled: isNextMonthDisabled,
-          nextLabel: localeText.nextMonth,
-          slots: slots,
-          slotProps: slotProps,
-          children: utils.formatByString(visibleMonths[month], (_calendarHeaderProps$ = calendarHeaderProps.format) != null ? _calendarHeaderProps$ : `${utils.formats.month} ${utils.formats.year}`)
-        }), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
+        children: [/*#__PURE__*/_jsx(CalendarHeader, _extends({}, calendarHeaderProps, {
+          month: month,
+          monthIndex: monthIndex
+        })), /*#__PURE__*/_jsx(DayCalendarForRange, _extends({
           className: classes.dayCalendar
         }, calendarState, baseDateValidationProps, commonViewProps, {
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
@@ -491,7 +456,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           reduceAnimations: reduceAnimations,
           selectedDays: value,
           onSelectedDaysChange: handleSelectedDayChange,
-          currentMonth: visibleMonths[month],
+          currentMonth: month,
           TransitionProps: CalendarTransitionProps,
           shouldDisableDate: wrappedShouldDisableDate,
           showDaysOutsideCurrentMonth: calendars === 1 && showDaysOutsideCurrentMonth,
@@ -500,12 +465,12 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: visibleMonths[month] === focusedMonth,
+          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone
-        }), index)]
-      }, month);
+        }))]
+      }, monthIndex);
     })]
   }));
 });

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -3,13 +3,14 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { Theme } from '@mui/material/styles';
 import { PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
-import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
 import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DayRangeValidationProps } from '../internals/models';
 import { DateRange } from '../models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
 import { UseRangePositionProps } from '../internals/hooks/useRangePosition';
+import { PickersRangeCalendarHeaderProps } from '../PickersRangeCalendarHeader';
 export type DateRangePosition = 'start' | 'end';
 export interface DateRangeCalendarSlots<TDate extends PickerValidDate> extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots<TDate>, 'day'>, PickersCalendarHeaderSlots {
     /**
@@ -17,7 +18,7 @@ export interface DateRangeCalendarSlots<TDate extends PickerValidDate> extends P
      * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
      * @default PickersCalendarHeader
      */
-    calendarHeader?: React.ElementType<PickersCalendarHeaderProps<TDate>>;
+    calendarHeader?: React.ElementType<PickersRangeCalendarHeaderProps<TDate>>;
     /**
      * Custom component for day in range pickers.
      * Check the [DateRangePickersDay](https://mui.com/x/api/date-pickers/date-range-picker-day/) component.

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -31,7 +31,7 @@ const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Root',
@@ -46,7 +46,9 @@ const MultiInputDateRangeFieldSeparator = styled(props => {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -31,7 +31,7 @@ const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Root',
@@ -46,7 +46,9 @@ const MultiInputDateTimeRangeFieldSeparator = styled(props => {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -31,7 +31,7 @@ const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((prop
   ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "baseline"
+  alignItems: "center"
 }, props))), {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Root',
@@ -46,7 +46,9 @@ const MultiInputTimeRangeFieldSeparator = styled(props => {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator
-})({});
+})({
+  lineHeight: '1.4375em' // 23px
+});
 /**
  * Demos:
  *

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { PickersRangeCalendarHeaderProps } from './PickersRangeCalendarHeader.types';
+type PickersRangeCalendarHeaderComponent = (<TDate extends PickerValidDate>(props: PickersRangeCalendarHeaderProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+    propTypes?: any;
+};
+declare const PickersRangeCalendarHeader: PickersRangeCalendarHeaderComponent;
+export { PickersRangeCalendarHeader };

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["calendars", "month", "monthIndex"];
+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, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils } from '@mui/x-date-pickers/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+const PickersRangeCalendarHeaderContentMultipleCalendars = styled(PickersArrowSwitcher)({
+  padding: '12px 16px 4px 16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const PickersRangeCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersRangeCalendarHeader(props, ref) {
+  const utils = useUtils();
+  const localeText = useLocaleText();
+  const {
+      calendars,
+      month,
+      monthIndex
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    format,
+    slots,
+    slotProps,
+    currentMonth,
+    onMonthChange,
+    disableFuture,
+    disablePast,
+    minDate,
+    maxDate,
+    timezone
+  } = props;
+  const isNextMonthDisabled = useNextMonthDisabled(currentMonth, {
+    disableFuture,
+    maxDate,
+    timezone
+  });
+  const isPreviousMonthDisabled = usePreviousMonthDisabled(currentMonth, {
+    disablePast,
+    minDate,
+    timezone
+  });
+  if (calendars === 1) {
+    return /*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+      ref: ref
+    }));
+  }
+  const selectNextMonth = () => onMonthChange(utils.addMonths(currentMonth, 1), 'left');
+  const selectPreviousMonth = () => onMonthChange(utils.addMonths(currentMonth, -1), 'right');
+  return /*#__PURE__*/_jsx(PickersRangeCalendarHeaderContentMultipleCalendars, {
+    ref: ref,
+    onGoToPrevious: selectPreviousMonth,
+    onGoToNext: selectNextMonth,
+    isPreviousHidden: monthIndex !== 0,
+    isPreviousDisabled: isPreviousMonthDisabled,
+    previousLabel: localeText.previousMonth,
+    isNextHidden: monthIndex !== calendars - 1,
+    isNextDisabled: isNextMonthDisabled,
+    nextLabel: localeText.nextMonth,
+    slots: slots,
+    slotProps: slotProps,
+    children: utils.formatByString(month, format != null ? format : `${utils.formats.month} ${utils.formats.year}`)
+  });
+});
+process.env.NODE_ENV !== "production" ? PickersRangeCalendarHeader.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn 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,
+  className: PropTypes.string,
+  currentMonth: PropTypes.object.isRequired,
+  disabled: PropTypes.bool,
+  disableFuture: PropTypes.bool,
+  disablePast: PropTypes.bool,
+  /**
+   * Format used to display the date.
+   * @default `${adapter.formats.month} ${adapter.formats.year}`
+   */
+  format: PropTypes.string,
+  labelId: PropTypes.string,
+  maxDate: PropTypes.object.isRequired,
+  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,
+  onMonthChange: PropTypes.func.isRequired,
+  onViewChange: PropTypes.func,
+  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]),
+  timezone: PropTypes.string.isRequired,
+  view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
+} : void 0;
+export { PickersRangeCalendarHeader };

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.d.ts

@@ -0,0 +1,18 @@
+import { PickerValidDate } from '@mui/x-date-pickers/models';
+import { ExportedPickersCalendarHeaderProps, PickersCalendarHeaderProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+export interface PickersRangeCalendarHeaderProps<TDate extends PickerValidDate> extends PickersCalendarHeaderProps<TDate> {
+    /**
+     * The number of calendars rendered.
+     */
+    calendars: 1 | 2 | 3;
+    /**
+     * Month used for this header.
+     */
+    month: TDate;
+    /**
+     * Index of the month used for this header.
+     */
+    monthIndex: number;
+}
+export interface ExportedPickersRangeCalendarHeaderProps<TDate extends PickerValidDate> extends ExportedPickersCalendarHeaderProps<TDate> {
+}

package/PickersRangeCalendarHeader/PickersRangeCalendarHeader.types.js

@@ -0,0 +1 @@
+export {};

package/PickersRangeCalendarHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { PickersRangeCalendarHeader } from './PickersRangeCalendarHeader';
+export type { PickersRangeCalendarHeaderProps, ExportedPickersRangeCalendarHeaderProps, } from './PickersRangeCalendarHeader.types';

package/PickersRangeCalendarHeader/index.js

@@ -0,0 +1 @@
+export { PickersRangeCalendarHeader } from './PickersRangeCalendarHeader';

package/PickersRangeCalendarHeader/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/PickersRangeCalendarHeader/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -14,6 +14,7 @@ export * from './SingleInputDateRangeField';
 export * from './SingleInputTimeRangeField';
 export * from './SingleInputDateTimeRangeField';
 export * from './DateRangeCalendar';
+export * from './PickersRangeCalendarHeader';
 export * from './DateRangePicker';
 export * from './DesktopDateRangePicker';
 export * from './MobileDateRangePicker';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-beta.6
+ * @mui/x-date-pickers-pro v7.0.0-beta.7
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -24,6 +24,7 @@ export * from './SingleInputDateTimeRangeField';
 
 // Calendars
 export * from './DateRangeCalendar';
+export * from './PickersRangeCalendarHeader';
 
 // New pickers
 export * from './DateRangePicker';

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMDM3MDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat