@mui/x-date-pickers 8.0.0-alpha.4 → 8.0.0-alpha.6

package/modern/internals/hooks/usePicker/usePicker.js

@@ -45,15 +45,13 @@ export const usePicker = ({
   });
   return {
     // Picker value
-    open: pickerValueResponse.open,
-    actions: pickerValueResponse.actions,
     fieldProps: pickerValueResponse.fieldProps,
     // Picker views
     renderCurrentView: pickerViewsResponse.renderCurrentView,
     hasUIView: pickerViewsResponse.provider.hasUIView,
     shouldRestoreFocus: pickerViewsResponse.shouldRestoreFocus,
     // Picker layout
-    layoutProps: _extends({}, pickerViewsResponse.layoutProps, pickerValueResponse.layoutProps),
+    layoutProps: _extends({}, pickerValueResponse.layoutProps),
     // Picker provider
     providerProps,
     // Picker owner state

package/modern/internals/hooks/usePicker/usePickerProvider.js

@@ -53,18 +53,19 @@ export function usePickerProvider(parameters) {
     pickerOrientation: orientation,
     pickerVariant: variant
   }), [utils, valueManager, paramsFromUsePickerValue.value, paramsFromUsePickerValue.contextValue.open, orientation, variant, props.disabled, props.readOnly]);
-  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, {
+  const contextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, {
     disabled: props.disabled ?? false,
     readOnly: props.readOnly ?? false,
     variant,
     orientation
-  }), [paramsFromUsePickerValue.contextValue, variant, orientation, props.disabled, props.readOnly]);
-  const privateContextValue = React.useMemo(() => ({
+  }), [paramsFromUsePickerValue.contextValue, paramsFromUsePickerViews.contextValue, variant, orientation, props.disabled, props.readOnly]);
+  const privateContextValue = React.useMemo(() => _extends({}, paramsFromUsePickerValue.privateContextValue, {
     ownerState
-  }), [ownerState]);
+  }), [paramsFromUsePickerValue, ownerState]);
   return {
     localeText,
     contextValue,
+    actionsContextValue: paramsFromUsePickerValue.actionsContextValue,
     privateContextValue
   };
 }

package/modern/internals/hooks/usePicker/usePickerValue.js

@@ -251,49 +251,6 @@ export const usePickerValue = ({
       hasBeenModifiedSinceMount: true
     }));
   }
-  const handleClear = useEventCallback(() => {
-    updateDate({
-      value: valueManager.emptyValue,
-      name: 'setValueFromAction',
-      pickerAction: 'clear'
-    });
-  });
-  const handleAccept = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'accept'
-    });
-  });
-  const handleDismiss = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastPublishedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'dismiss'
-    });
-  });
-  const handleCancel = useEventCallback(() => {
-    updateDate({
-      value: dateState.lastCommittedValue,
-      name: 'setValueFromAction',
-      pickerAction: 'cancel'
-    });
-  });
-  const handleSetToday = useEventCallback(() => {
-    updateDate({
-      value: valueManager.getTodayValue(utils, timezone, valueType),
-      name: 'setValueFromAction',
-      pickerAction: 'today'
-    });
-  });
-  const handleOpen = useEventCallback(event => {
-    event.preventDefault();
-    setOpen(true);
-  });
-  const handleClose = useEventCallback(event => {
-    event?.preventDefault();
-    setOpen(false);
-  });
   const handleChange = useEventCallback((newValue, selectionState = 'partial') => updateDate({
     name: 'setValueFromView',
     value: newValue,
@@ -310,15 +267,6 @@ export const usePickerValue = ({
     value: newValue,
     context
   }));
-  const actions = {
-    onClear: handleClear,
-    onAccept: handleAccept,
-    onDismiss: handleDismiss,
-    onCancel: handleCancel,
-    onSetToday: handleSetToday,
-    onOpen: handleOpen,
-    onClose: handleClose
-  };
   const fieldResponse = {
     value: dateState.draft,
     onChange: handleChangeFromField
@@ -327,8 +275,8 @@ export const usePickerValue = ({
   const viewResponse = {
     value: valueWithoutError,
     onChange: handleChange,
-    onClose: handleClose,
-    open
+    open,
+    setOpen
   };
   const isValid = testedValue => {
     const error = validator({
@@ -339,28 +287,62 @@ export const usePickerValue = ({
     });
     return !valueManager.hasError(error);
   };
-  const layoutResponse = _extends({}, actions, {
+  const layoutResponse = {
     value: valueWithoutError,
     onChange: handleChange,
     onSelectShortcut: handleSelectShortcut,
     isValid
+  };
+  const clearValue = useEventCallback(() => updateDate({
+    value: valueManager.emptyValue,
+    name: 'setValueFromAction',
+    pickerAction: 'clear'
+  }));
+  const setValueToToday = useEventCallback(() => updateDate({
+    value: valueManager.getTodayValue(utils, timezone, valueType),
+    name: 'setValueFromAction',
+    pickerAction: 'today'
+  }));
+  const acceptValueChanges = useEventCallback(() => updateDate({
+    value: dateState.lastPublishedValue,
+    name: 'setValueFromAction',
+    pickerAction: 'accept'
+  }));
+  const cancelValueChanges = useEventCallback(() => updateDate({
+    value: dateState.lastCommittedValue,
+    name: 'setValueFromAction',
+    pickerAction: 'cancel'
+  }));
+  const dismissViews = useEventCallback(() => {
+    updateDate({
+      value: dateState.lastPublishedValue,
+      name: 'setValueFromAction',
+      pickerAction: 'dismiss'
+    });
   });
-  const contextValue = React.useMemo(() => {
-    return {
-      open,
-      setOpen
-    };
-  }, [open, setOpen]);
+  const actionsContextValue = React.useMemo(() => ({
+    setOpen,
+    clearValue,
+    setValueToToday,
+    acceptValueChanges,
+    cancelValueChanges
+  }), [setOpen, clearValue, setValueToToday, acceptValueChanges, cancelValueChanges]);
+  const contextValue = React.useMemo(() => _extends({}, actionsContextValue, {
+    open
+  }), [actionsContextValue, open]);
+  const privateContextValue = React.useMemo(() => ({
+    dismissViews
+  }), [dismissViews]);
   const providerParams = {
     value: valueWithoutError,
-    contextValue
+    contextValue,
+    actionsContextValue,
+    privateContextValue
   };
   return {
-    open,
     fieldProps: fieldResponse,
     viewProps: viewResponse,
     layoutProps: layoutResponse,
-    actions,
     provider: providerParams
   };
 };

package/modern/internals/hooks/usePicker/usePickerViews.js

@@ -31,8 +31,9 @@ export const usePickerViews = ({
 }) => {
   const {
     onChange,
+    value,
     open,
-    onClose
+    setOpen
   } = propsFromPickerValue;
   const {
     view: inView,
@@ -92,7 +93,7 @@ export const usePickerViews = ({
   useEnhancedEffect(() => {
     // Handle case of `DateTimePicker` without time renderers
     if (currentViewMode === 'field' && open) {
-      onClose();
+      setOpen(false);
       setTimeout(() => {
         fieldRef?.current?.setSelectedSections(view);
         // focusing the input before the range selection is done
@@ -123,18 +124,18 @@ export const usePickerViews = ({
     setFocusedView(newView, true);
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const layoutProps = {
+  const contextValue = React.useMemo(() => ({
     views,
     view: popperView,
     onViewChange: setView
-  };
+  }), [views, popperView, setView]);
   const providerParams = {
     hasUIView,
-    views
+    views,
+    contextValue
   };
   return {
     shouldRestoreFocus,
-    layoutProps,
     provider: providerParams,
     renderCurrentView: () => {
       if (popperView == null) {
@@ -144,9 +145,10 @@ export const usePickerViews = ({
       if (renderer == null) {
         return null;
       }
-      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, propsFromPickerValue, {
+      const rendererProps = _extends({}, propsToForwardToView, additionalViewProps, {
         views,
         timezone,
+        value,
         onChange: setValueAndGoToNextView,
         view: popperView,
         onViewChange: setView,

package/modern/internals/index.js

@@ -31,4 +31,4 @@ export { applyDefaultViewProps } from "./utils/views.js";
 export { DayCalendar } from "../DateCalendar/DayCalendar.js";
 export { useCalendarState } from "../DateCalendar/useCalendarState.js";
 export { isInternalTimeView, isTimeView } from "./utils/time-utils.js";
-export { DateTimePickerToolbarForceDesktopVariant } from "../DateTimePicker/DateTimePickerToolbar.js";
+export { DateTimePickerToolbarOverrideContext } from "../DateTimePicker/DateTimePickerToolbar.js";

package/node/DatePicker/DatePickerToolbar.js

@@ -21,8 +21,9 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _datePickerToolbarClasses = require("./datePickerToolbarClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "views", "className", "classes", "onViewChange", "view"];
+const _excluded = ["value", "isLandscape", "onChange", "toolbarFormat", "toolbarPlaceholder", "className", "classes"];
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
@@ -69,12 +70,14 @@ const DatePickerToolbar = exports.DatePickerToolbar = /*#__PURE__*/React.forward
       isLandscape,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views,
       className,
       classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _useUtils.useUtils)();
+  const {
+    views
+  } = (0, _hooks.usePickerContext)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp);
@@ -120,12 +123,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
   hidden: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
   onChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -140,13 +137,5 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * @default "––"
    */
   toolbarPlaceholder: _propTypes.default.node,
-  value: _propTypes.default.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'month', 'year']).isRequired,
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'month', 'year']).isRequired).isRequired
+  value: _propTypes.default.object
 } : void 0;

package/node/DateTimePicker/DateTimePickerTabs.js

@@ -19,6 +19,7 @@ var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _dateTimePickerTabsClasses = require("./dateTimePickerTabsClasses");
 var _dateUtils = require("../internals/utils/date-utils");
 var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const viewToTab = view => {
   if ((0, _dateUtils.isDatePickerView)(view)) {
@@ -72,9 +73,7 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
   });
   const {
     dateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DateRangeIcon, {}),
-    onViewChange,
     timeIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.TimeIcon, {}),
-    view,
     hidden = typeof window === 'undefined' || window.innerHeight < 667,
     className,
     classes: classesProp,
@@ -84,6 +83,10 @@ const DateTimePickerTabs = exports.DateTimePickerTabs = function DateTimePickerT
   const {
     ownerState
   } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const {
+    view,
+    onViewChange
+  } = (0, _hooks.usePickerContext)();
   const classes = useUtilityClasses(classesProp);
   const handleChange = (event, value) => {
     onViewChange(tabToView(value));
@@ -133,12 +136,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * @default `window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
    */
   hidden: _propTypes.default.bool,
-  /**
-   * Callback called when a tab is clicked.
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -147,9 +144,5 @@ process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
    * Time tab icon.
    * @default Time
    */
-  timeIcon: _propTypes.default.node,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired
+  timeIcon: _propTypes.default.node
 } : void 0;

package/node/DateTimePicker/DateTimePickerToolbar.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DateTimePickerToolbar = DateTimePickerToolbar;
-exports.DateTimePickerToolbarForceDesktopVariant = void 0;
+exports.DateTimePickerToolbarOverrideContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -30,7 +30,7 @@ var _pickersToolbarClasses = require("../internals/components/pickersToolbarClas
 var _usePickerContext = require("../hooks/usePickerContext");
 var _useToolbarOwnerState = require("../internals/hooks/useToolbarOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "value", "onChange", "view", "isLandscape", "onViewChange", "toolbarFormat", "toolbarPlaceholder", "views", "toolbarTitle", "className", "classes"];
+const _excluded = ["ampm", "ampmInClock", "value", "onChange", "isLandscape", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "className", "classes"];
 const useUtilityClasses = (classes, ownerState) => {
   const {
     pickerOrientation,
@@ -214,10 +214,11 @@ const DateTimePickerToolbarAmPmSelection = (0, _styles.styled)('div', {
 });
 
 /**
- * If this context value is set to true, the toolbar will always be rendered in the desktop mode.
+ * If `forceDesktopVariant` is set to `true`, the toolbar will always be rendered in the desktop mode.
+ * If `onViewChange` is defined, the toolbar will call it instead of calling the default handler from `usePickerContext`.
  * This is used by the Date Time Range Picker Toolbar.
  */
-const DateTimePickerToolbarForceDesktopVariant = exports.DateTimePickerToolbarForceDesktopVariant = /*#__PURE__*/React.createContext(false);
+const DateTimePickerToolbarOverrideContext = exports.DateTimePickerToolbarOverrideContext = /*#__PURE__*/React.createContext(null);
 
 /**
  * Demos:
@@ -239,12 +240,9 @@ function DateTimePickerToolbar(inProps) {
       ampmInClock,
       value,
       onChange,
-      view,
       isLandscape,
-      onViewChange,
       toolbarFormat,
       toolbarPlaceholder = '––',
-      views,
       toolbarTitle: inToolbarTitle,
       className,
       classes: classesProp
@@ -253,7 +251,10 @@ function DateTimePickerToolbar(inProps) {
   const {
     disabled,
     readOnly,
-    variant
+    variant,
+    view: viewCtx,
+    onViewChange: onViewChangeCtx,
+    views
   } = (0, _usePickerContext.usePickerContext)();
   const ownerState = (0, _useToolbarOwnerState.useToolbarOwnerState)();
   const classes = useUtilityClasses(classesProp, ownerState);
@@ -263,11 +264,13 @@ function DateTimePickerToolbar(inProps) {
     handleMeridiemChange
   } = (0, _dateHelpersHooks.useMeridiemMode)(value, ampm, onChange);
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
-  const forceDesktopVariant = React.useContext(DateTimePickerToolbarForceDesktopVariant);
-  const toolbarVariant = forceDesktopVariant ? 'desktop' : variant;
+  const overrides = React.useContext(DateTimePickerToolbarOverrideContext);
+  const toolbarVariant = overrides?.forceDesktopVariant ? 'desktop' : variant;
   const isDesktop = toolbarVariant === 'desktop';
   const showAmPmControl = Boolean(ampm && !ampmInClock);
   const toolbarTitle = inToolbarTitle ?? translations.dateTimePickerToolbarTitle;
+  const view = overrides ? overrides.view : viewCtx;
+  const onViewChange = overrides ? overrides.onViewChange : onViewChangeCtx;
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
   const dateText = React.useMemo(() => {
     if (!value) {
@@ -392,12 +395,6 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
   hidden: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
   onChange: _propTypes.default.func.isRequired,
-  /**
-   * Callback called when a toolbar is clicked
-   * @template TView
-   * @param {TView} view The view to open
-   */
-  onViewChange: _propTypes.default.func.isRequired,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -416,13 +413,5 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    * If provided, it will be used instead of `dateTimePickerToolbarTitle` from localization.
    */
   toolbarTitle: _propTypes.default.node,
-  value: _propTypes.default.object,
-  /**
-   * Currently visible picker view.
-   */
-  view: _propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
-  /**
-   * Available views.
-   */
-  views: _propTypes.default.arrayOf(_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  value: _propTypes.default.object
 } : void 0;

package/node/DesktopDateTimePicker/DesktopDateTimePickerLayout.js

@@ -74,16 +74,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePickerLayout.propTypes =
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
   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,
   /**
    * The props used for each component slot.
    * @default {}
@@ -98,7 +90,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.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object]),
-  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
+  value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.object), _propTypes.default.object])
 } : void 0;

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,
@@ -217,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);
@@ -225,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,
@@ -237,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);
     })