@mui/x-date-pickers 5.0.0-beta.7 → 5.0.0

package/DateField/index.d.ts

@@ -1,3 +1,3 @@
 export { DateField as Unstable_DateField } from './DateField';
 export { useDateField as unstable_useDateField } from './useDateField';
-export type { UseDateFieldProps } from './DateField.interfaces';
+export type { UseDateFieldProps, UseDateFieldComponentProps } from './DateField.interfaces';

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from './DateField.interfaces';
-export declare const useDateField: <TInputDate, TDate, TProps extends UseDateFieldProps<TInputDate, TDate>>(inProps: TProps) => import("../internals/hooks/useField").UseFieldResponse<TProps & Omit<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast"> & Required<Pick<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast">>>;
+export declare const useDateField: <TInputDate, TDate, TProps extends UseDateFieldProps<TInputDate, TDate>>(inProps: TProps) => import("../internals/hooks/useField").UseFieldResponse<Omit<TProps & Omit<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast"> & Required<Pick<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast">>, "defaultValue" | "onChange" | "onError" | "value" | "format" | "readOnly" | "minDate" | "maxDate" | "disableFuture" | "disablePast" | "shouldDisableDate">>;

package/DateField/useDateField.js

@@ -1,7 +1,9 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast"];
 import { datePickerValueManager } from '../DatePicker/shared';
 import { useField, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections } from '../internals/hooks/useField';
-import { validateDate } from '../internals/hooks/validation/useDateValidation';
+import { isSameDateError, validateDate } from '../internals/hooks/validation/useDateValidation';
 import { parseNonNullablePickerDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
 const dateRangeFieldValueManager = {
@@ -19,7 +21,8 @@ const dateRangeFieldValueManager = {
     value,
     update: newActiveDate => newActiveDate
   }),
-  hasError: error => error != null
+  hasError: error => error != null,
+  isSameError: isSameDateError
 };
 
 const useDefaultizedDateField = props => {
@@ -35,9 +38,37 @@ const useDefaultizedDateField = props => {
 };
 
 export const useDateField = inProps => {
-  const props = useDefaultizedDateField(inProps);
+  const _useDefaultizedDateFi = useDefaultizedDateField(inProps),
+        {
+    value,
+    defaultValue,
+    format,
+    onChange,
+    readOnly,
+    onError,
+    shouldDisableDate,
+    minDate,
+    maxDate,
+    disableFuture,
+    disablePast
+  } = _useDefaultizedDateFi,
+        other = _objectWithoutPropertiesLoose(_useDefaultizedDateFi, _excluded);
+
   return useField({
-    props,
+    forwardedProps: other,
+    internalProps: {
+      value,
+      defaultValue,
+      format,
+      onChange,
+      readOnly,
+      onError,
+      shouldDisableDate,
+      minDate,
+      maxDate,
+      disableFuture,
+      disablePast
+    },
     valueManager: datePickerValueManager,
     fieldValueManager: dateRangeFieldValueManager,
     // TODO: Support time validation.

package/DateTimePicker/DateTimePicker.js

@@ -211,7 +211,8 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   getViewSwitchingButtonText: PropTypes.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: PropTypes.bool,
   ignoreInvalidInputs: PropTypes.bool,

package/DateTimePicker/DateTimePickerTabs.d.ts

@@ -1,12 +1,28 @@
 import * as React from 'react';
 import { CalendarOrClockPickerView } from '../internals/models';
 export interface DateTimePickerTabsProps {
+    /**
+     * Date tab icon.
+     * @default DateRange
+     */
     dateRangeIcon?: React.ReactNode;
+    /**
+     * Callback called when tab is clicked
+     * @param {CalendarOrClockPickerView} view Picker view that was clicked
+     */
     onChange: (view: CalendarOrClockPickerView) => void;
+    /**
+     * Time tab icon.
+     * @default Time
+     */
     timeIcon?: React.ReactNode;
+    /**
+     * Open picker view
+     */
     view: CalendarOrClockPickerView;
 }
-/**
- * @ignore - internal component.
- */
-export declare const DateTimePickerTabs: (props: DateTimePickerTabsProps) => JSX.Element;
+declare const DateTimePickerTabs: {
+    (props: DateTimePickerTabsProps): JSX.Element;
+    propTypes: any;
+};
+export { DateTimePickerTabs };

package/DateTimePicker/DateTimePickerTabs.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
@@ -38,11 +39,8 @@ const DateTimePickerTabsRoot = styled(Tabs)(({
     top: 0
   }
 }));
-/**
- * @ignore - internal component.
- */
 
-export const DateTimePickerTabs = props => {
+const DateTimePickerTabs = props => {
   const {
     dateRangeIcon = /*#__PURE__*/_jsx(DateRange, {}),
     onChange,
@@ -79,4 +77,35 @@ export const DateTimePickerTabs = props => {
       })
     })]
   });
-};
+};
+
+process.env.NODE_ENV !== "production" ? DateTimePickerTabs.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * Date tab icon.
+   * @default DateRange
+   */
+  dateRangeIcon: PropTypes.node,
+
+  /**
+   * Callback called when tab is clicked
+   * @param {CalendarOrClockPickerView} view Picker view that was clicked
+   */
+  onChange: PropTypes.func.isRequired,
+
+  /**
+   * Time tab icon.
+   * @default Time
+   */
+  timeIcon: PropTypes.node,
+
+  /**
+   * Open picker view
+   */
+  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired
+} : void 0;
+export { DateTimePickerTabs };

package/DateTimePicker/DateTimePickerToolbar.js

@@ -1,15 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "parsedValue", "dateRangeIcon", "hideTabs", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "timeIcon", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
+const _excluded = ["ampm", "parsedValue", "isMobileKeyboardViewOpen", "onChange", "openView", "setOpenView", "toggleMobileKeyboardView", "toolbarFormat", "toolbarPlaceholder", "toolbarTitle", "views"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/material';
 import { PickersToolbarText } from '../internals/components/PickersToolbarText';
 import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
 import { PickersToolbarButton } from '../internals/components/PickersToolbarButton';
-import { DateTimePickerTabs } from './DateTimePickerTabs';
 import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
-import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const dateTimePickerToolbarClasses = generateUtilityClasses('MuiDateTimePickerToolbar', ['root', 'dateContainer', 'timeContainer', 'separator']);
@@ -59,12 +57,9 @@ export const DateTimePickerToolbar = props => {
   const {
     ampm,
     parsedValue,
-    dateRangeIcon,
-    hideTabs,
     isMobileKeyboardViewOpen,
     openView,
     setOpenView,
-    timeIcon,
     toggleMobileKeyboardView,
     toolbarFormat,
     toolbarPlaceholder = '––',
@@ -76,8 +71,6 @@ export const DateTimePickerToolbar = props => {
   const utils = useUtils();
   const localeText = useLocaleText();
   const toolbarTitle = toolbarTitleProp != null ? toolbarTitleProp : localeText.dateTimePickerDefaultToolbarTitle;
-  const wrapperVariant = React.useContext(WrapperVariantContext);
-  const showTabs = wrapperVariant === 'desktop' ? true : !hideTabs && typeof window !== 'undefined' && window.innerHeight > 667;
 
   const formatHours = time => ampm ? utils.format(time, 'hours12h') : utils.format(time, 'hours24h');
 
@@ -93,70 +86,63 @@ export const DateTimePickerToolbar = props => {
     return utils.format(parsedValue, 'shortDate');
   }, [parsedValue, toolbarFormat, toolbarPlaceholder, utils]);
   const ownerState = props;
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [wrapperVariant !== 'desktop' && /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
-      toolbarTitle: toolbarTitle,
-      isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
-      toggleMobileKeyboardView: toggleMobileKeyboardView,
-      className: dateTimePickerToolbarClasses.root
-    }, other, {
-      isLandscape: false,
+  return /*#__PURE__*/_jsxs(DateTimePickerToolbarRoot, _extends({
+    toolbarTitle: toolbarTitle,
+    isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
+    toggleMobileKeyboardView: toggleMobileKeyboardView,
+    className: dateTimePickerToolbarClasses.root
+  }, other, {
+    isLandscape: false,
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
+      className: dateTimePickerToolbarClasses.dateContainer,
       ownerState: ownerState,
-      children: [/*#__PURE__*/_jsxs(DateTimePickerToolbarDateContainer, {
-        className: dateTimePickerToolbarClasses.dateContainer,
-        ownerState: ownerState,
-        children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
-          tabIndex: -1,
-          variant: "subtitle1",
-          onClick: () => setOpenView('year'),
-          selected: openView === 'year',
-          value: parsedValue ? utils.format(parsedValue, 'year') : '–'
-        }), views.includes('day') && /*#__PURE__*/_jsx(PickersToolbarButton, {
-          tabIndex: -1,
-          variant: "h4",
-          onClick: () => setOpenView('day'),
-          selected: openView === 'day',
-          value: dateText
+      children: [views.includes('year') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+        tabIndex: -1,
+        variant: "subtitle1",
+        onClick: () => setOpenView('year'),
+        selected: openView === 'year',
+        value: parsedValue ? utils.format(parsedValue, 'year') : '–'
+      }), views.includes('day') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+        tabIndex: -1,
+        variant: "h4",
+        onClick: () => setOpenView('day'),
+        selected: openView === 'day',
+        value: dateText
+      })]
+    }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
+      className: dateTimePickerToolbarClasses.timeContainer,
+      ownerState: ownerState,
+      children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+        variant: "h3",
+        onClick: () => setOpenView('hours'),
+        selected: openView === 'hours',
+        value: parsedValue ? formatHours(parsedValue) : '--'
+      }), views.includes('minutes') && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
+          variant: "h3",
+          value: ":",
+          className: dateTimePickerToolbarClasses.separator,
+          ownerState: ownerState
+        }), /*#__PURE__*/_jsx(PickersToolbarButton, {
+          variant: "h3",
+          onClick: () => setOpenView('minutes'),
+          selected: openView === 'minutes',
+          value: parsedValue ? utils.format(parsedValue, 'minutes') : '--'
         })]
-      }), /*#__PURE__*/_jsxs(DateTimePickerToolbarTimeContainer, {
-        className: dateTimePickerToolbarClasses.timeContainer,
-        ownerState: ownerState,
-        children: [views.includes('hours') && /*#__PURE__*/_jsx(PickersToolbarButton, {
+      }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
+          variant: "h3",
+          value: ":",
+          className: dateTimePickerToolbarClasses.separator,
+          ownerState: ownerState
+        }), /*#__PURE__*/_jsx(PickersToolbarButton, {
           variant: "h3",
-          onClick: () => setOpenView('hours'),
-          selected: openView === 'hours',
-          value: parsedValue ? formatHours(parsedValue) : '--'
-        }), views.includes('minutes') && /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
-            variant: "h3",
-            value: ":",
-            className: dateTimePickerToolbarClasses.separator,
-            ownerState: ownerState
-          }), /*#__PURE__*/_jsx(PickersToolbarButton, {
-            variant: "h3",
-            onClick: () => setOpenView('minutes'),
-            selected: openView === 'minutes',
-            value: parsedValue ? utils.format(parsedValue, 'minutes') : '--'
-          })]
-        }), views.includes('seconds') && /*#__PURE__*/_jsxs(React.Fragment, {
-          children: [/*#__PURE__*/_jsx(DateTimePickerToolbarSeparator, {
-            variant: "h3",
-            value: ":",
-            className: dateTimePickerToolbarClasses.separator,
-            ownerState: ownerState
-          }), /*#__PURE__*/_jsx(PickersToolbarButton, {
-            variant: "h3",
-            onClick: () => setOpenView('seconds'),
-            selected: openView === 'seconds',
-            value: parsedValue ? utils.format(parsedValue, 'seconds') : '--'
-          })]
+          onClick: () => setOpenView('seconds'),
+          selected: openView === 'seconds',
+          value: parsedValue ? utils.format(parsedValue, 'seconds') : '--'
         })]
       })]
-    })), showTabs && /*#__PURE__*/_jsx(DateTimePickerTabs, {
-      dateRangeIcon: dateRangeIcon,
-      timeIcon: timeIcon,
-      view: openView,
-      onChange: setOpenView
     })]
-  });
+  }));
 };

package/DateTimePicker/index.d.ts

@@ -1,2 +1,4 @@
 export { DateTimePicker } from './DateTimePicker';
+export { DateTimePickerTabs } from './DateTimePickerTabs';
 export type { DateTimePickerProps } from './DateTimePicker';
+export type { DateTimePickerTabsProps } from './DateTimePickerTabs';

package/DateTimePicker/index.js

@@ -1 +1,2 @@
-export { DateTimePicker } from './DateTimePicker';
+export { DateTimePicker } from './DateTimePicker';
+export { DateTimePickerTabs } from './DateTimePickerTabs';

package/DateTimePicker/shared.d.ts

@@ -17,7 +17,8 @@ export interface BaseDateTimePickerProps<TInputDate, TDate> extends ExportedCloc
      */
     ampm?: boolean;
     /**
-     * To show tabs.
+     * Toggles visibility of date time switching tabs
+     * @default false for mobile, true for desktop
      */
     hideTabs?: boolean;
     /**

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps"];
+const _excluded = ["onChange", "PaperProps", "PopperProps", "ToolbarComponent", "TransitionComponent", "value", "components", "componentsProps", "hideTabs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -10,6 +10,7 @@ import { CalendarOrClockPicker } from '../internals/components/CalendarOrClockPi
 import { useDateTimeValidation } from '../internals/hooks/validation/useDateTimeValidation';
 import { KeyboardDateInput } from '../internals/components/KeyboardDateInput';
 import { usePickerState } from '../internals/hooks/usePickerState';
+import { DateTimePickerTabs } from '../DateTimePicker';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
@@ -36,11 +37,16 @@ export const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function Desk
     PopperProps,
     ToolbarComponent = DateTimePickerToolbar,
     TransitionComponent,
-    components,
-    componentsProps
+    components: providedComponents,
+    componentsProps,
+    hideTabs = true
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const components = React.useMemo(() => _extends({
+    Tabs: DateTimePickerTabs
+  }, providedComponents), [providedComponents]);
+
   const AllDateInputProps = _extends({}, inputProps, other, {
     components,
     componentsProps,
@@ -62,7 +68,8 @@ export const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function Desk
       ToolbarComponent: ToolbarComponent,
       DateInputProps: AllDateInputProps,
       components: components,
-      componentsProps: componentsProps
+      componentsProps: componentsProps,
+      hideTabs: hideTabs
     }, other))
   }));
 });
@@ -213,7 +220,8 @@ process.env.NODE_ENV !== "production" ? DesktopDateTimePicker.propTypes = {
   getViewSwitchingButtonText: PropTypes.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: PropTypes.bool,
   ignoreInvalidInputs: PropTypes.bool,

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps"];
+const _excluded = ["ToolbarComponent", "value", "onChange", "components", "componentsProps", "hideTabs"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useDateTimePickerDefaultizedProps, dateTimePickerValueManager } from '../DateTimePicker/shared';
@@ -10,6 +10,7 @@ import { CalendarOrClockPicker } from '../internals/components/CalendarOrClockPi
 import { useDateTimeValidation } from '../internals/hooks/validation/useDateTimeValidation';
 import { PureDateInput } from '../internals/components/PureDateInput';
 import { usePickerState } from '../internals/hooks/usePickerState';
+import { DateTimePickerTabs } from '../DateTimePicker';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 /**
@@ -34,11 +35,16 @@ export const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function Mobil
 
   const {
     ToolbarComponent = DateTimePickerToolbar,
-    components,
-    componentsProps
+    components: providedComponents,
+    componentsProps,
+    hideTabs = false
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
+  const components = React.useMemo(() => _extends({
+    Tabs: DateTimePickerTabs
+  }, providedComponents), [providedComponents]);
+
   const DateInputProps = _extends({}, inputProps, other, {
     components,
     componentsProps,
@@ -57,7 +63,8 @@ export const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function Mobil
       ToolbarComponent: ToolbarComponent,
       DateInputProps: DateInputProps,
       components: components,
-      componentsProps: componentsProps
+      componentsProps: componentsProps,
+      hideTabs: hideTabs
     }, other))
   }));
 });
@@ -213,7 +220,8 @@ process.env.NODE_ENV !== "production" ? MobileDateTimePicker.propTypes = {
   getViewSwitchingButtonText: PropTypes.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: PropTypes.bool,
   ignoreInvalidInputs: PropTypes.bool,

package/MonthPicker/MonthPicker.d.ts

@@ -31,6 +31,10 @@ export interface MonthPickerProps<TDate> extends MonthValidationProps<TDate>, Ba
      * @default false
      */
     disableHighlightToday?: boolean;
+    autoFocus?: boolean;
+    onMonthFocus?: (month: number) => void;
+    hasFocus?: boolean;
+    onFocusedViewChange?: (newHasFocus: boolean) => void;
 }
 export declare function useMonthPickerDefaultizedProps<TDate>(props: MonthPickerProps<TDate>, name: string): DefaultizedProps<MonthPickerProps<TDate>, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast'>;
 declare type MonthPickerComponent = (<TDate>(props: MonthPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {

package/MonthPicker/MonthPicker.js

@@ -1,11 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday"];
+const _excluded = ["className", "date", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useTheme } from '@mui/system';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses, useControlled, useEventCallback } from '@mui/material';
 import { PickersMonth } from './PickersMonth';
 import { useUtils, useNow, useDefaultDates } from '../internals/hooks/useUtils';
 import { getMonthPickerUtilityClass } from './monthPickerClasses';
@@ -64,14 +65,19 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
     onChange,
     shouldDisableMonth,
     readOnly,
-    disableHighlightToday
+    disableHighlightToday,
+    autoFocus = false,
+    onMonthFocus,
+    hasFocus,
+    onFocusedViewChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
+  const theme = useTheme();
   const selectedDateOrToday = date != null ? date : now;
-  const focusedMonth = React.useMemo(() => {
+  const selectedMonth = React.useMemo(() => {
     if (date != null) {
       return utils.getMonth(date);
     }
@@ -82,8 +88,8 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
 
     return utils.getMonth(now);
   }, [now, date, utils, disableHighlightToday]);
-
-  const isMonthDisabled = month => {
+  const [focusedMonth, setFocusedMonth] = React.useState(() => selectedMonth || utils.getMonth(now));
+  const isMonthDisabled = React.useCallback(month => {
     const firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     const lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
 
@@ -100,7 +106,7 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
     }
 
     return shouldDisableMonth(month);
-  };
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
 
   const onMonthSelect = month => {
     if (readOnly) {
@@ -111,20 +117,87 @@ export const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(in
     onChange(newDate, 'finish');
   };
 
+  const [internalHasFocus, setInternalHasFocus] = useControlled({
+    name: 'MonthPicker',
+    state: 'hasFocus',
+    controlled: hasFocus,
+    default: autoFocus
+  });
+  const changeHasFocus = React.useCallback(newHasFocus => {
+    setInternalHasFocus(newHasFocus);
+
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  }, [setInternalHasFocus, onFocusedViewChange]);
+  const focusMonth = React.useCallback(month => {
+    if (!isMonthDisabled(utils.setMonth(selectedDateOrToday, month))) {
+      setFocusedMonth(month);
+      changeHasFocus(true);
+
+      if (onMonthFocus) {
+        onMonthFocus(month);
+      }
+    }
+  }, [selectedDateOrToday, isMonthDisabled, utils, onMonthFocus, changeHasFocus]);
+  React.useEffect(() => {
+    setFocusedMonth(prevFocusedMonth => selectedMonth !== null && prevFocusedMonth !== selectedMonth ? selectedMonth : prevFocusedMonth);
+  }, [selectedMonth]);
+  const handleKeyDown = useEventCallback(event => {
+    const monthsInYear = 12;
+    const monthsInRow = 3;
+
+    switch (event.key) {
+      case 'ArrowUp':
+        focusMonth((monthsInYear + focusedMonth - monthsInRow) % monthsInYear);
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        focusMonth((monthsInYear + focusedMonth + monthsInRow) % monthsInYear);
+        event.preventDefault();
+        break;
+
+      case 'ArrowLeft':
+        focusMonth((monthsInYear + focusedMonth + (theme.direction === 'ltr' ? -1 : 1)) % monthsInYear);
+        event.preventDefault();
+        break;
+
+      case 'ArrowRight':
+        focusMonth((monthsInYear + focusedMonth + (theme.direction === 'ltr' ? 1 : -1)) % monthsInYear);
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  });
+  const handleMonthFocus = React.useCallback((event, month) => {
+    focusMonth(month);
+  }, [focusMonth]);
+  const handleMonthBlur = React.useCallback(() => {
+    changeHasFocus(false);
+  }, [changeHasFocus]);
   const currentMonthNumber = utils.getMonth(now);
   return /*#__PURE__*/_jsx(MonthPickerRoot, _extends({
     ref: ref,
     className: clsx(classes.root, className),
-    ownerState: ownerState
+    ownerState: ownerState,
+    onKeyDown: handleKeyDown
   }, other, {
     children: utils.getMonthArray(selectedDateOrToday).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
+      const isDisabled = disabled || isMonthDisabled(month);
       return /*#__PURE__*/_jsx(PickersMonth, {
         value: monthNumber,
-        selected: monthNumber === focusedMonth,
+        selected: monthNumber === selectedMonth,
+        tabIndex: monthNumber === focusedMonth && !isDisabled ? 0 : -1,
+        hasFocus: internalHasFocus && monthNumber === focusedMonth,
         onSelect: onMonthSelect,
-        disabled: disabled || isMonthDisabled(month),
+        onFocus: handleMonthFocus,
+        onBlur: handleMonthBlur,
+        disabled: isDisabled,
         "aria-current": currentMonthNumber === monthNumber ? 'date' : undefined,
         children: monthText
       }, monthText);
@@ -136,6 +209,7 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
 
   /**
    * Override or extend the styles applied to the component.
@@ -174,6 +248,7 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  hasFocus: PropTypes.bool,
 
   /**
    * Maximal selectable date. @DateIOType
@@ -189,6 +264,8 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
    * Callback fired on date change.
    */
   onChange: PropTypes.func.isRequired,
+  onFocusedViewChange: PropTypes.func,
+  onMonthFocus: PropTypes.func,
 
   /**
    * If `true` picker is readonly