[DateRangePicker] Remove calendars prop on Mobile (#11752)

mui · Jan 22, 2024 · a6ac672 · a6ac672
1 parent 70f236b
commit a6ac672
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 24 deletions.
diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json
@@ -1,10 +1,6 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" } },
-    "calendars": {
-      "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
-      "default": "2"
-    },
     "closeOnSelect": {
       "type": { "name": "bool" },
       "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."

diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json
@@ -3,7 +3,7 @@
     "autoFocus": { "type": { "name": "bool" } },
     "calendars": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
-      "default": "2"
+      "default": "1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise."
     },
     "currentMonthCalendarPosition": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },

diff --git a/...translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json b/...translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json
@@ -4,9 +4,6 @@
     "autoFocus": {
       "description": "If <code>true</code>, 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 <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
-    "calendars": {
-      "description": "The number of calendars to render on <strong>desktop</strong>."
-    },
     "closeOnSelect": {
       "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
     },

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts
@@ -96,11 +96,6 @@ export interface ExportedDateRangeCalendarProps<TDate>
    * @param {TDate} month The new month.
    */
   onMonthChange?: (month: TDate) => void;
-  /**
-   * The number of calendars to render.
-   * @default 2
-   */
-  calendars?: 1 | 2 | 3;
   /**
    * Position the current month is rendered in.
    * @default 1
@@ -138,6 +133,11 @@ export interface DateRangeCalendarProps<TDate>
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date range selection is complete.
    */
   onChange?: (value: DateRange<TDate>, selectionState?: PickerSelectionState) => void;
+  /**
+   * The number of calendars to render.
+   * @default 2
+   */
+  calendars?: 1 | 2 | 3;
   className?: string;
   classes?: Partial<DateRangeCalendarClasses>;
   /**

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -44,6 +44,7 @@ const MobileDateRangePicker = React.forwardRef(function MobileDateRangePicker<TD
   const props = {
     ...defaultizedProps,
     viewRenderers,
+    // Force one calendar on mobile to avoid layout issues
     calendars: 1,
     views: ['day'] as const,
     openTo: 'day' as const,
@@ -87,11 +88,6 @@ MobileDateRangePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * The number of calendars to render on **desktop**.
-   * @default 2
-   */
-  calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.types.ts
@@ -21,11 +21,6 @@ export interface MobileDateRangePickerSlotProps<TDate>
 export interface MobileDateRangePickerProps<TDate>
   extends BaseDateRangePickerProps<TDate>,
     MobileRangeOnlyPickerProps<TDate> {
-  /**
-   * The number of calendars to render on **desktop**.
-   * @default 2
-   */
-  calendars?: 1 | 2 | 3;
   /**
    * Overridable component slots.
    * @default {}

diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx
@@ -81,7 +81,7 @@ StaticDateRangePicker.propTypes = {
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render.
-   * @default 2
+   * @default 1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise.
    */
   calendars: PropTypes.oneOf([1, 2, 3]),
   className: PropTypes.string,

diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.types.ts
@@ -21,6 +21,11 @@ export interface StaticDateRangePickerSlotProps<TDate>
 export interface StaticDateRangePickerProps<TDate>
   extends BaseDateRangePickerProps<TDate>,
     MakeOptional<StaticRangeOnlyPickerProps, 'displayStaticWrapperAs'> {
+  /**
+   * The number of calendars to render.
+   * @default 1 if `displayStaticWrapperAs === 'mobile'`, 2 otherwise.
+   */
+  calendars?: 1 | 2 | 3;
   /**
    * Overridable component slots.
    * @default {}