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

package/node/MonthPicker/MonthPicker.js

@@ -18,6 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
+var _system = require("@mui/system");
+
 var _styles = require("@mui/material/styles");
 
 var _material = require("@mui/material");
@@ -32,7 +34,7 @@ var _dateUtils = require("../internals/utils/date-utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -90,13 +92,18 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
     onChange,
     shouldDisableMonth,
     readOnly,
-    disableHighlightToday
+    disableHighlightToday,
+    autoFocus = false,
+    onMonthFocus,
+    hasFocus,
+    onFocusedViewChange
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
+  const theme = (0, _system.useTheme)();
   const selectedDateOrToday = date != null ? date : now;
-  const focusedMonth = React.useMemo(() => {
+  const selectedMonth = React.useMemo(() => {
     if (date != null) {
       return utils.getMonth(date);
     }
@@ -107,8 +114,8 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
 
     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);
 
@@ -125,7 +132,7 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
     }
 
     return shouldDisableMonth(month);
-  };
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
 
   const onMonthSelect = month => {
     if (readOnly) {
@@ -136,20 +143,87 @@ const MonthPicker = /*#__PURE__*/React.forwardRef(function MonthPicker(inProps,
     onChange(newDate, 'finish');
   };
 
+  const [internalHasFocus, setInternalHasFocus] = (0, _material.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 = (0, _material.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__*/(0, _jsxRuntime.jsx)(MonthPickerRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(_PickersMonth.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);
@@ -162,6 +236,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.default.bool,
 
   /**
    * Override or extend the styles applied to the component.
@@ -200,6 +275,7 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
    * @default false
    */
   disablePast: _propTypes.default.bool,
+  hasFocus: _propTypes.default.bool,
 
   /**
    * Maximal selectable date. @DateIOType
@@ -215,6 +291,8 @@ process.env.NODE_ENV !== "production" ? MonthPicker.propTypes = {
    * Callback fired on date change.
    */
   onChange: _propTypes.default.func.isRequired,
+  onFocusedViewChange: _propTypes.default.func,
+  onMonthFocus: _propTypes.default.func,
 
   /**
    * If `true` picker is readonly

package/node/MonthPicker/PickersMonth.js

@@ -21,11 +21,13 @@ var _styles = require("@mui/material/styles");
 
 var _material = require("@mui/material");
 
-var _utils = require("../internals/utils/utils");
+var _utils = require("@mui/material/utils");
+
+var _utils2 = require("../internals/utils/utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["disabled", "onSelect", "selected", "value"];
+const _excluded = ["disabled", "onSelect", "selected", "value", "tabIndex", "hasFocus", "onFocus", "onBlur"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -63,16 +65,23 @@ const PickersMonthRoot = (0, _styles.styled)(_Typography.default)(({
     }
   }
 }));
+
+const noop = () => {};
 /**
  * @ignore - do not document.
  */
 
+
 const PickersMonth = props => {
   const {
     disabled,
     onSelect,
     selected,
-    value
+    value,
+    tabIndex,
+    hasFocus,
+    onFocus = noop,
+    onBlur = noop
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
@@ -80,16 +89,27 @@ const PickersMonth = props => {
     onSelect(value);
   };
 
+  const ref = React.useRef(null);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (hasFocus) {
+      var _ref$current;
+
+      (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+    }
+  }, [hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
+    ref: ref,
     component: "button",
     type: "button",
     className: (0, _clsx.default)(classes.root, selected && classes.selected),
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: tabIndex,
     onClick: handleSelection,
-    onKeyDown: (0, _utils.onSpaceOrEnter)(handleSelection),
+    onKeyDown: (0, _utils2.onSpaceOrEnter)(handleSelection),
     color: selected ? 'primary' : undefined,
     variant: selected ? 'h5' : 'subtitle1',
-    disabled: disabled
+    disabled: disabled,
+    onFocus: event => onFocus(event, value),
+    onBlur: event => onBlur(event, value)
   }, other));
 };
 

package/node/PickersDay/PickersDay.js

@@ -35,7 +35,7 @@ var _pickersDayClasses = require("./pickersDayClasses");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDayFocus", "onDaySelect", "onFocus", "onKeyDown", "onMouseDown", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today"];
+const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -147,10 +147,10 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     disableMargin = false,
     isAnimating,
     onClick,
-    onDayFocus = noop,
     onDaySelect,
-    onFocus,
-    onKeyDown,
+    onFocus = noop,
+    onBlur = noop,
+    onKeyDown = noop,
     onMouseDown,
     outsideCurrentMonth,
     selected = false,
@@ -179,20 +179,9 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
       // ref.current being null would be a bug in MUI
       ref.current.focus();
     }
-  }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
-
-  const handleFocus = event => {
-    if (onDayFocus) {
-      onDayFocus(day);
-    }
-
-    if (onFocus) {
-      onFocus(event);
-    }
-  }; // For day outside of current month, move focus from mouseDown to mouseUp
+  }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]); // For day outside of current month, move focus from mouseDown to mouseUp
   // Goal: have the onClick ends before sliding to the new month
 
-
   const handleMouseDown = event => {
     if (onMouseDown) {
       onMouseDown(event);
@@ -217,59 +206,6 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     }
   };
 
-  const theme = (0, _styles.useTheme)();
-
-  function handleKeyDown(event) {
-    if (onKeyDown !== undefined) {
-      onKeyDown(event);
-    }
-
-    switch (event.key) {
-      case 'ArrowUp':
-        onDayFocus(utils.addDays(day, -7));
-        event.preventDefault();
-        break;
-
-      case 'ArrowDown':
-        onDayFocus(utils.addDays(day, 7));
-        event.preventDefault();
-        break;
-
-      case 'ArrowLeft':
-        onDayFocus(utils.addDays(day, theme.direction === 'ltr' ? -1 : 1));
-        event.preventDefault();
-        break;
-
-      case 'ArrowRight':
-        onDayFocus(utils.addDays(day, theme.direction === 'ltr' ? 1 : -1));
-        event.preventDefault();
-        break;
-
-      case 'Home':
-        onDayFocus(utils.startOfWeek(day));
-        event.preventDefault();
-        break;
-
-      case 'End':
-        onDayFocus(utils.endOfWeek(day));
-        event.preventDefault();
-        break;
-
-      case 'PageUp':
-        onDayFocus(utils.getNextMonth(day));
-        event.preventDefault();
-        break;
-
-      case 'PageDown':
-        onDayFocus(utils.getPreviousMonth(day));
-        event.preventDefault();
-        break;
-
-      default:
-        break;
-    }
-  }
-
   if (outsideCurrentMonth && !showDaysOutsideCurrentMonth) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersDayFiller, {
       className: (0, _clsx.default)(classes.root, classes.hiddenDaySpacingFiller, className),
@@ -285,8 +221,9 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
     centerRipple: true,
     disabled: disabled,
     tabIndex: selected ? 0 : -1,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
+    onKeyDown: event => onKeyDown(event, day),
+    onFocus: event => onFocus(event, day),
+    onBlur: event => onBlur(event, day),
     onClick: handleClick,
     onMouseDown: handleMouseDown
   }, other, {
@@ -295,7 +232,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
 });
 
 const areDayPropsEqual = (prevProps, nextProps) => {
-  return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onDayFocus === nextProps.onDayFocus && prevProps.onDaySelect === nextProps.onDaySelect;
+  return prevProps.autoFocus === nextProps.autoFocus && prevProps.isAnimating === nextProps.isAnimating && prevProps.today === nextProps.today && prevProps.disabled === nextProps.disabled && prevProps.selected === nextProps.selected && prevProps.disableMargin === nextProps.disableMargin && prevProps.showDaysOutsideCurrentMonth === nextProps.showDaysOutsideCurrentMonth && prevProps.disableHighlightToday === nextProps.disableHighlightToday && prevProps.className === nextProps.className && prevProps.outsideCurrentMonth === nextProps.outsideCurrentMonth && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.onDaySelect === nextProps.onDaySelect;
 };
 
 exports.areDayPropsEqual = areDayPropsEqual;
@@ -333,8 +270,10 @@ process.env.NODE_ENV !== "production" ? PickersDayRaw.propTypes = {
    */
   disableMargin: _propTypes.default.bool,
   isAnimating: _propTypes.default.bool,
-  onDayFocus: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
   onDaySelect: _propTypes.default.func.isRequired,
+  onFocus: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
 
   /**
    * If `true`, day is outside of month and will be hidden.

package/node/StaticDateTimePicker/StaticDateTimePicker.js

@@ -27,9 +27,11 @@ var _useDateTimeValidation = require("../internals/hooks/validation/useDateTimeV
 
 var _usePickerState = require("../internals/hooks/usePickerState");
 
+var _DateTimePicker = require("../DateTimePicker");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps"];
+const _excluded = ["displayStaticWrapperAs", "onChange", "ToolbarComponent", "value", "components", "componentsProps", "hideTabs"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -52,8 +54,9 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   const {
     displayStaticWrapperAs = 'mobile',
     ToolbarComponent = _DateTimePickerToolbar.DateTimePickerToolbar,
-    components,
-    componentsProps
+    components: providedComponents,
+    componentsProps,
+    hideTabs = displayStaticWrapperAs === 'desktop'
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -62,6 +65,9 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
     wrapperProps
   } = (0, _usePickerState.usePickerState)(props, _shared.dateTimePickerValueManager);
   const validationError = (0, _useDateTimeValidation.useDateTimeValidation)(props) !== null;
+  const components = React.useMemo(() => (0, _extends2.default)({
+    Tabs: _DateTimePicker.DateTimePickerTabs
+  }, providedComponents), [providedComponents]);
   const DateInputProps = (0, _extends2.default)({}, inputProps, other, {
     ref,
     validationError,
@@ -78,7 +84,8 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
       ToolbarComponent: ToolbarComponent,
       DateInputProps: DateInputProps,
       components: components,
-      componentsProps: componentsProps
+      componentsProps: componentsProps,
+      hideTabs: hideTabs
     }, other))
   }));
 });
@@ -235,7 +242,8 @@ process.env.NODE_ENV !== "production" ? StaticDateTimePicker.propTypes = {
   getViewSwitchingButtonText: _propTypes.default.func,
 
   /**
-   * To show tabs.
+   * Toggles visibility of date time switching tabs
+   * @default false for mobile, true for desktop
    */
   hideTabs: _propTypes.default.bool,
   ignoreInvalidInputs: _propTypes.default.bool,

package/node/YearPicker/PickersYear.js

@@ -27,7 +27,7 @@ var _WrapperVariantContext = require("../internals/components/wrappers/WrapperVa
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["autoFocus", "className", "children", "disabled", "onClick", "onKeyDown", "selected", "value"];
+const _excluded = ["autoFocus", "className", "children", "disabled", "onClick", "onKeyDown", "value", "tabIndex", "onFocus", "onBlur"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -91,10 +91,13 @@ const PickersYearButton = (0, _styles.styled)('button')(({
     }
   }
 }));
+
+const noop = () => {};
 /**
  * @ignore - internal component.
  */
 
+
 const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, forwardedRef) {
   const {
     autoFocus,
@@ -103,8 +106,10 @@ const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, fo
     disabled,
     onClick,
     onKeyDown,
-    selected,
-    value
+    value,
+    tabIndex,
+    onFocus = noop,
+    onBlur = noop
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);
@@ -128,9 +133,11 @@ const PickersYear = /*#__PURE__*/React.forwardRef(function PickersYear(props, fo
       ref: refHandle,
       disabled: disabled,
       type: "button",
-      tabIndex: selected ? 0 : -1,
+      tabIndex: disabled ? -1 : tabIndex,
       onClick: event => onClick(event, value),
       onKeyDown: event => onKeyDown(event, value),
+      onFocus: event => onFocus(event, value),
+      onBlur: event => onBlur(event, value),
       className: classes.yearButton,
       ownerState: ownerState
     }, other, {

package/node/YearPicker/YearPicker.js

@@ -17,6 +17,8 @@ var _styles = require("@mui/material/styles");
 
 var _material = require("@mui/material");
 
+var _utils = require("@mui/material/utils");
+
 var _clsx = _interopRequireDefault(require("clsx"));
 
 var _PickersYear = require("./PickersYear");
@@ -90,7 +92,10 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
     onChange,
     readOnly,
     shouldDisableYear,
-    disableHighlightToday
+    disableHighlightToday,
+    onYearFocus,
+    hasFocus,
+    onFocusedViewChange
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
@@ -108,7 +113,20 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
   }, [now, date, utils, disableHighlightToday]);
   const wrapperVariant = React.useContext(_WrapperVariantContext.WrapperVariantContext);
   const selectedYearRef = React.useRef(null);
-  const [focusedYear, setFocusedYear] = React.useState(currentYear);
+  const [focusedYear, setFocusedYear] = React.useState(() => currentYear || utils.getYear(now));
+  const [internalHasFocus, setInternalHasFocus] = (0, _utils.useControlled)({
+    name: 'YearPicker',
+    state: 'hasFocus',
+    controlled: hasFocus,
+    default: autoFocus
+  });
+  const changeHasFocus = React.useCallback(newHasFocus => {
+    setInternalHasFocus(newHasFocus);
+
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  }, [setInternalHasFocus, onFocusedViewChange]);
   const isYearDisabled = React.useCallback(dateToValidate => {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
@@ -145,11 +163,15 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
   const focusYear = React.useCallback(year => {
     if (!isYearDisabled(utils.setYear(selectedDateOrToday, year))) {
       setFocusedYear(year);
+      changeHasFocus(true);
+      onYearFocus == null ? void 0 : onYearFocus(year);
     }
-  }, [selectedDateOrToday, isYearDisabled, utils]);
+  }, [isYearDisabled, utils, selectedDateOrToday, changeHasFocus, onYearFocus]);
+  React.useEffect(() => {
+    setFocusedYear(prevFocusedYear => currentYear !== null && prevFocusedYear !== currentYear ? currentYear : prevFocusedYear);
+  }, [currentYear]);
   const yearsInRow = wrapperVariant === 'desktop' ? 4 : 3;
-
-  const handleKeyDown = (event, year) => {
+  const handleKeyDown = React.useCallback((event, year) => {
     switch (event.key) {
       case 'ArrowUp':
         focusYear(year - yearsInRow);
@@ -174,8 +196,15 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
       default:
         break;
     }
-  };
-
+  }, [focusYear, theme.direction, yearsInRow]);
+  const handleFocus = React.useCallback((event, year) => {
+    focusYear(year);
+  }, [focusYear]);
+  const handleBlur = React.useCallback((event, year) => {
+    if (focusedYear === year) {
+      changeHasFocus(false);
+    }
+  }, [focusedYear, changeHasFocus]);
   const nowYear = utils.getYear(now);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(YearPickerRoot, {
     ref: ref,
@@ -189,9 +218,12 @@ const YearPicker = /*#__PURE__*/React.forwardRef(function YearPicker(inProps, re
         value: yearNumber,
         onClick: handleYearSelection,
         onKeyDown: handleKeyDown,
-        autoFocus: autoFocus && yearNumber === focusedYear,
+        autoFocus: internalHasFocus && yearNumber === focusedYear,
         ref: selected ? selectedYearRef : undefined,
         disabled: disabled || isYearDisabled(year),
+        tabIndex: yearNumber === focusedYear ? 0 : -1,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         "aria-current": nowYear === yearNumber ? 'date' : undefined,
         children: utils.format(year, 'year')
       }, utils.format(year, 'year'));
@@ -227,6 +259,7 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
    * @default false
    */
   disablePast: _propTypes.default.bool,
+  hasFocus: _propTypes.default.bool,
 
   /**
    * Maximal selectable date. @DateIOType
@@ -239,6 +272,8 @@ process.env.NODE_ENV !== "production" ? YearPicker.propTypes = {
   minDate: _propTypes.default.any,
   onChange: _propTypes.default.func.isRequired,
   onFocusedDayChange: _propTypes.default.func,
+  onFocusedViewChange: _propTypes.default.func,
+  onYearFocus: _propTypes.default.func,
   readOnly: _propTypes.default.bool,
 
   /**

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0-beta.7
+/** @license MUI v5.0.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.