@mui/x-date-pickers 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -1,41 +1,39 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DesktopDateTimePickerLayout = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _PickersLayout = require("../PickersLayout");
+var _usePickerContext = require("../hooks/usePickerContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
  */
 const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__PURE__*/React.forwardRef(function DesktopDateTimePickerLayout(props, ref) {
-  const isRtl = (0, _RtlProvider.useRtl)();
   const {
     toolbar,
     tabs,
     content,
     actionBar,
-    shortcuts
+    shortcuts,
+    ownerState
   } = (0, _PickersLayout.usePickerLayout)(props);
+  const {
+    orientation
+  } = (0, _usePickerContext.usePickerContext)();
   const {
     sx,
     className,
-    isLandscape,
     classes
   } = props;
   const isActionBarVisible = actionBar && (actionBar.props.actions?.length ?? 0) > 0;
-  const ownerState = (0, _extends2.default)({}, props, {
-    isRtl
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutRoot, {
     ref: ref,
     className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.root, classes?.root, className),
@@ -49,8 +47,9 @@ const DesktopDateTimePickerLayout = exports.DesktopDateTimePickerLayout = /*#__P
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
     ownerState: ownerState,
-    children: [isLandscape ? shortcuts : toolbar, isLandscape ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
+    children: [orientation === 'landscape' ? shortcuts : toolbar, orientation === 'landscape' ? toolbar : shortcuts, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PickersLayout.PickersLayoutContentWrapper, {
       className: (0, _clsx.default)(_PickersLayout.pickersLayoutClasses.contentWrapper, classes?.contentWrapper),
+      ownerState: ownerState,
       sx: {
         display: 'grid'
       },
@@ -74,38 +73,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * If `true`, the component is disabled.
-   * When disabled, the value cannot be changed and no interaction is possible.
-   * @default false
-   */
-  disabled: _propTypes.default.bool,
-  isLandscape: _propTypes.default.bool.isRequired,
-  /**
-   * `true` if the application is in right-to-left direction.
-   */
-  isRtl: _propTypes.default.bool.isRequired,
-  isValid: _propTypes.default.func.isRequired,
-  onAccept: _propTypes.default.func.isRequired,
-  onCancel: _propTypes.default.func.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  onClear: _propTypes.default.func.isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  onDismiss: _propTypes.default.func.isRequired,
-  onOpen: _propTypes.default.func.isRequired,
-  onSelectShortcut: _propTypes.default.func.isRequired,
-  onSetToday: _propTypes.default.func.isRequired,
-  onViewChange: _propTypes.default.func.isRequired,
-  /**
-   * Force rendering in particular orientation.
-   */
-  orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
-  /**
-   * If `true`, the component is read-only.
-   * When read-only, the value cannot be changed but the user can interact with the interface.
-   * @default false
-   */
-  readOnly: _propTypes.default.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -119,9 +86,5 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  value: _propTypes.default.any,
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
-  wrapperVariant: _propTypes.default.oneOf(['desktop', 'mobile'])
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;

package/node/DesktopTimePicker/DesktopTimePicker.js

@@ -15,15 +15,12 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
-var _icons = require("../icons");
 var _useDesktopPicker = require("../internals/hooks/useDesktopPicker");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _timeUtils = require("../internals/utils/time-utils");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -35,7 +32,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
@@ -53,7 +49,6 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = defaultizedProps.ampmInClock ?? true;
-  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === _timeViewRenderers.renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
@@ -68,34 +63,23 @@ const DesktopTimePicker = exports.DesktopTimePicker = /*#__PURE__*/React.forward
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: (0, _extends2.default)({
-      field: _TimeField.TimeField,
-      openPickerIcon: _icons.ClockIcon
+      field: _TimeField.TimeField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps)),
       toolbar: (0, _extends2.default)({
         hidden: true,
         ampmInClock
-      }, defaultizedProps.slotProps?.toolbar),
-      actionBar: (0, _extends2.default)({
-        actions: actionBarActions
-      }, defaultizedProps.slotProps?.actionBar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
     renderPicker
   } = (0, _useDesktopPicker.useDesktopPicker)({
+    ref,
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullTime',
-      contextTranslation: translations.openTimePickerDialogue,
-      propsTranslation: props.localeText?.openTimePickerDialogue
-    }),
     validator: _validation.validateTime
   });
   return renderPicker();
@@ -124,8 +108,8 @@ DesktopTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: _propTypes.default.bool,
   /**

package/node/DigitalClock/DigitalClock.js

@@ -30,12 +30,10 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
 var _utils = require("../internals/utils/utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["ampm", "timeStep", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "onChange", "view", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "views", "skipDisabled", "timezone"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     list: ['list'],
@@ -56,7 +54,7 @@ const DigitalClockRoot = (0, _styles.styled)(_PickerViewRoot.PickerViewRoot, {
   maxHeight: _dimensions.DIGITAL_CLOCK_VIEW_HEIGHT,
   variants: [{
     props: {
-      alreadyRendered: true
+      hasDigitalClockAlreadyBeenRendered: true
     },
     style: {
       '@media (prefers-reduced-motion: no-preference)': {
@@ -140,6 +138,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       views = ['hours'],
@@ -156,20 +155,24 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
-  const ownerState = React.useMemo(() => (0, _extends2.default)({}, props, {
-    alreadyRendered: !!containerRef.current
-  }), [props]);
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    hasDigitalClockAlreadyBeenRendered: !!containerRef.current
+  });
+  const classes = useUtilityClasses(classesProp);
   const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
   const clockItemProps = (0, _useSlotProps.default)({
     elementType: ClockItem,
     externalSlotProps: slotProps?.digitalClockItem,
-    ownerState: {},
+    ownerState,
     className: classes.item
   });
   const valueOrReferenceDate = (0, _useClockReferenceDate.useClockReferenceDate)({

package/node/MobileDatePicker/MobileDatePicker.js

@@ -14,14 +14,12 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _utils = require("@mui/utils");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _shared = require("../DatePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _DateField = require("../DateField");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _dateUtils = require("../internals/utils/date-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -33,7 +31,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
  */
 const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date pickers
@@ -52,9 +49,7 @@ const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRe
       field: _DateField.DateField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps)),
       toolbar: (0, _extends2.default)({
         hidden: false
       }, defaultizedProps.slotProps?.toolbar)
@@ -63,15 +58,10 @@ const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRe
   const {
     renderPicker
   } = (0, _useMobilePicker.useMobilePicker)({
+    ref,
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: _validation.validateDate
   });
   return renderPicker();
@@ -90,8 +80,8 @@ MobileDatePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: _propTypes.default.bool,
   /**

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -15,14 +15,12 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _dateViewRenderers = require("../dateViewRenderers");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _dateTimeUtils = require("../internals/utils/date-time-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -34,7 +32,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
@@ -58,9 +55,7 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
       field: _DateTimeField.DateTimeField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps)),
       toolbar: (0, _extends2.default)({
         hidden: false,
         ampmInClock
@@ -73,15 +68,10 @@ const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.f
   const {
     renderPicker
   } = (0, _useMobilePicker.useMobilePicker)({
+    ref,
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullDate',
-      contextTranslation: translations.openDatePickerDialogue,
-      propsTranslation: props.localeText?.openDatePickerDialogue
-    }),
     validator: _validation.validateDateTime
   });
   return renderPicker();
@@ -110,8 +100,8 @@ MobileDateTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: _propTypes.default.bool,
   /**

package/node/MobileTimePicker/MobileTimePicker.js

@@ -15,13 +15,11 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _timeViewRenderers = require("../timeViewRenderers");
 var _timeUtils = require("../internals/utils/time-utils");
-var _getPickersLocalization = require("../locales/utils/getPickersLocalization");
 /**
  * Demos:
  *
@@ -33,7 +31,6 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
@@ -54,9 +51,7 @@ const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRe
       field: _TimeField.TimeField
     }, defaultizedProps.slots),
     slotProps: (0, _extends2.default)({}, defaultizedProps.slotProps, {
-      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps), {
-        ref
-      }),
+      field: ownerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(defaultizedProps.slotProps?.field, ownerState), (0, _validation.extractValidationProps)(defaultizedProps)),
       toolbar: (0, _extends2.default)({
         hidden: false,
         ampmInClock
@@ -66,15 +61,10 @@ const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRe
   const {
     renderPicker
   } = (0, _useMobilePicker.useMobilePicker)({
+    ref,
     props,
     valueManager: _valueManagers.singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: (0, _getPickersLocalization.buildGetOpenDialogAriaText)({
-      utils,
-      formatKey: 'fullTime',
-      contextTranslation: translations.openTimePickerDialogue,
-      propsTranslation: props.localeText?.openTimePickerDialogue
-    }),
     validator: _validation.validateTime
   });
   return renderPicker();
@@ -103,8 +93,8 @@ MobileTimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: _propTypes.default.bool,
   /**

package/node/MonthCalendar/MonthCalendar.js

@@ -14,9 +14,10 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _createStyled = require("@mui/system/createStyled");
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/utils");
-var _PickersMonth = require("./PickersMonth");
+var _MonthCalendarButton = require("./MonthCalendarButton");
 var _useUtils = require("../internals/hooks/useUtils");
 var _monthCalendarClasses = require("./monthCalendarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
@@ -26,7 +27,7 @@ var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
@@ -44,6 +45,7 @@ function useMonthCalendarDefaultizedProps(props, name) {
     disableFuture: false,
     disablePast: false
   }, themeProps, {
+    monthsPerRow: themeProps.monthsPerRow ?? 3,
     minDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: (0, _dateUtils.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -51,15 +53,32 @@ function useMonthCalendarDefaultizedProps(props, name) {
 const MonthCalendarRoot = (0, _styles.styled)('div', {
   name: 'MuiMonthCalendar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'monthsPerRow'
 })({
   display: 'flex',
   flexWrap: 'wrap',
-  alignContent: 'stretch',
-  padding: '0 4px',
+  justifyContent: 'space-evenly',
+  rowGap: 16,
+  padding: '8px 0',
   width: _dimensions.DIALOG_WIDTH,
   // avoid padding increasing width over defined
-  boxSizing: 'border-box'
+  boxSizing: 'border-box',
+  variants: [{
+    props: {
+      monthsPerRow: 3
+    },
+    style: {
+      columnGap: 24
+    }
+  }, {
+    props: {
+      monthsPerRow: 4
+    },
+    style: {
+      columnGap: 0
+    }
+  }]
 });
 /**
  * Demos:
@@ -73,6 +92,7 @@ const MonthCalendarRoot = (0, _styles.styled)('div', {
 const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
+      autoFocus,
       className,
       classes: classesProp,
       value: valueProp,
@@ -86,11 +106,10 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
       onChange,
       shouldDisableMonth,
       readOnly,
-      autoFocus = false,
       onMonthFocus,
       hasFocus,
       onFocusedViewChange,
-      monthsPerRow = 3,
+      monthsPerRow,
       timezone: timezoneProp,
       gridLabelId,
       slots,
@@ -106,6 +125,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
@@ -216,7 +236,8 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
     role: "radiogroup",
-    "aria-labelledby": gridLabelId
+    "aria-labelledby": gridLabelId,
+    monthsPerRow: monthsPerRow
   }, other, {
     children: (0, _dateUtils.getMonthsInYear)(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
@@ -224,7 +245,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
       const monthLabel = utils.format(month, 'month');
       const isSelected = monthNumber === selectedMonth;
       const isDisabled = disabled || isMonthDisabled(month);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersMonth.PickersMonth, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MonthCalendarButton.MonthCalendarButton, {
         selected: isSelected,
         value: monthNumber,
         onClick: handleMonthSelection,
@@ -236,9 +257,9 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
         onBlur: handleMonthBlur,
         "aria-current": todayMonth === monthNumber ? 'date' : undefined,
         "aria-label": monthLabel,
-        monthsPerRow: monthsPerRow,
         slots: slots,
         slotProps: slotProps,
+        classes: classesProp,
         children: monthText
       }, monthText);
     })