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

package/AdapterDateFns/index.d.ts

@@ -1 +1,7 @@
-export { default as AdapterDateFns } from '@date-io/date-fns';
+import BaseAdapterDateFns from '@date-io/date-fns';
+import { MuiFormatTokenMap, MuiPickerFieldAdapter } from '../internals/models';
+export declare class AdapterDateFns extends BaseAdapterDateFns implements MuiPickerFieldAdapter<Date> {
+    formatTokenMap: MuiFormatTokenMap;
+    expandFormat: (format: string) => string;
+    getFormatHelperText: (format: string) => string;
+}

package/AdapterDateFns/index.js

@@ -1 +1,51 @@
-export { default as AdapterDateFns } from '@date-io/date-fns';
+import BaseAdapterDateFns from '@date-io/date-fns';
+import defaultLocale from 'date-fns/locale/en-US'; // @ts-ignore
+
+import longFormatters from 'date-fns/_lib/format/longFormatters';
+const formatTokenMap = {
+  y: 'year',
+  yy: 'year',
+  yyy: 'year',
+  yyyy: 'year',
+  MMMM: 'month',
+  MM: 'month',
+  DD: 'day',
+  d: 'day',
+  dd: 'day',
+  H: 'hour',
+  HH: 'hour',
+  h: 'hour',
+  hh: 'hour',
+  mm: 'minute',
+  ss: 'second',
+  a: 'am-pm',
+  aa: 'am-pm',
+  aaa: 'am-pm'
+};
+export class AdapterDateFns extends BaseAdapterDateFns {
+  constructor(...args) {
+    super(...args);
+    this.formatTokenMap = formatTokenMap;
+
+    this.expandFormat = format => {
+      const longFormatRegexp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; // @see https://github.com/date-fns/date-fns/blob/master/src/format/index.js#L31
+
+      return format.match(longFormatRegexp).map(token => {
+        const firstCharacter = token[0];
+
+        if (firstCharacter === 'p' || firstCharacter === 'P') {
+          const longFormatter = longFormatters[firstCharacter];
+          const locale = this.locale || defaultLocale;
+          return longFormatter(token, locale.formatLong, {});
+        }
+
+        return token;
+      }).join('');
+    };
+
+    this.getFormatHelperText = format => {
+      return this.expandFormat(format).replace(/(aaa|aa|a)/g, '(a|p)m').toLocaleLowerCase();
+    };
+  }
+
+}

package/AdapterDayjs/index.d.ts

@@ -1 +1,12 @@
-export { default as AdapterDayjs } from '@date-io/dayjs';
+import { Dayjs } from 'dayjs';
+import BaseAdapterDayjs from '@date-io/dayjs';
+import { MuiFormatTokenMap, MuiPickerFieldAdapter } from '../internals/models';
+export declare class AdapterDayjs extends BaseAdapterDayjs implements MuiPickerFieldAdapter<Dayjs> {
+    formatTokenMap: MuiFormatTokenMap;
+    /**
+     * The current getFormatHelperText method uses an outdated format parsing logic.
+     * We should use this one in the future to support all localized formats.
+     */
+    expandFormat: (format: string) => string;
+    getFormatHelperText: (format: string) => string;
+}

package/AdapterDayjs/index.js

@@ -1 +1,45 @@
-export { default as AdapterDayjs } from '@date-io/dayjs';
+import BaseAdapterDayjs from '@date-io/dayjs';
+const formatTokenMap = {
+  YY: 'year',
+  YYYY: 'year',
+  M: 'month',
+  MM: 'month',
+  MMM: 'month',
+  MMMM: 'month',
+  D: 'day',
+  DD: 'day',
+  H: 'hour',
+  HH: 'hour',
+  h: 'hour',
+  hh: 'hour',
+  m: 'minute',
+  mm: 'minute',
+  s: 'second',
+  ss: 'second',
+  A: 'am-pm',
+  a: 'am-pm'
+};
+export class AdapterDayjs extends BaseAdapterDayjs {
+  constructor(...args) {
+    super(...args);
+    this.formatTokenMap = formatTokenMap;
+
+    this.expandFormat = format => {
+      var _this$rawDayJsInstanc;
+
+      const localeFormats = (_this$rawDayJsInstanc = this.rawDayJsInstance.Ls[this.locale || 'en']) == null ? void 0 : _this$rawDayJsInstanc.formats; // @see https://github.com/iamkun/dayjs/blob/dev/src/plugin/localizedFormat/index.js
+
+      const t = formatBis => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, a, b) => a || b.slice(1));
+
+      return format.replace(/(\[[^\]]+])|(LTS?|l{1,4}|L{1,4})/g, (_, a, b) => {
+        const B = b && b.toUpperCase();
+        return a || localeFormats[b] || t(localeFormats[B]);
+      });
+    };
+
+    this.getFormatHelperText = format => {
+      return this.expandFormat(format).replace(/a/gi, '(a|p)m').toLocaleLowerCase();
+    };
+  }
+
+}

package/CHANGELOG.md

@@ -3,6 +3,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.0
+
+_Sep 2, 2022_
+
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+
+If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Implement Lazy loading (#5214) @DanailH
+
+  Pro users now can try the experimental lazy loading feature.
+  In a few steps, you can load your data on demand, as the rows are displayed.
+
+  To enable this feature, add `experimentalFeatures={{ lazyLoading: true }}`.
+  Lazy Loading requires a few other settings.
+  See the [documentation](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) to explore the example in detail.
+
+- 🚀 Improve `pickers` focus management (#5820) @alexfauquette
+- 🎉 Enable disabling `day` on date range picker depending on `position` (#5773) @alexfauquette
+- ✨ Various improvements
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.0` / `@mui/x-data-grid-pro@v5.17.0` / `@mui/x-data-grid-premium@v5.17.0`
+
+#### Changes
+
+- [DataGrid] Add `sort` prop to columns panel slot (#5888) @gavbrennan
+- [DataGrid] Do not throw if `fieldToFocus` cannot be found (#5871) @cherniavskii
+- [DataGrid] Support `getRowId` in the `replaceRows` method (#5988) @flaviendelangle
+- [DataGridPro] Add class name to row with open detail panel (#5924) @m4theushw
+- [DataGridPro] Fix crash when using `pinnedRows` + `getRowClassName` props and `rows=[]` (#5851) @cherniavskii
+- [DataGridPro] Fix filtering with inactive filter items (#5993) @alexfauquette
+- [DataGridPro] Implement Lazy loading (#5214) @DanailH
+- [DataGridPro] Support pinned columns and dynamic row height (#5782) @m4theushw
+- [DataGridPremium] Add state initializer for column groups (#5963) @alexfauquette
+- [DataGridPremium] Update grouping when `groupingValueGetter` changes (#5919) @flaviendelangle
+- [DataGridPremium] Use the aggregated value on tree data real groups (#5953) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0` / `@mui/x-date-pickers-pro@v5.0.0`
+
+#### Changes
+
+- [DatePicker] Improve focus management (#5820) @alexfauquette
+- [DateRangePicker] Enable disabling `day` depending on `position` (#5773) @alexfauquette
+- [DateTimePicker] Create a new `tabs` component slot (#5972) @LukasTy
+- [pickers] Do not forward validation props to the DOM on field components (#5971) @flaviendelangle
+- [pickers] Do not hardcode `date-fns` elements in field components (#5975) @flaviendelangle
+- [pickers] Do not require `date-fns` in `@mui/x-date-pickers-pro` (#5941) @flaviendelangle
+- [pickers] Fix mobile picker not opening on label click (#5651) @LukasTy
+- [pickers] Improve DOM event management on `useField` (#5901) @flaviendelangle
+- [pickers] Include `community` package `themeAugmentation` in `pro` package types (#5969) @LukasTy
+- [pickers] Rename `DateRangeField` into `SingleInputDateRangeField` (#5961) @flaviendelangle
+- [pickers] Support `isSameError` on field components (#5984) @flaviendelangle
+
+### Docs
+
+- [docs] Add `description` and `default` to pickers slots (#5893) @alexfauquette
+- [docs] Fix typo (#5945) @wettopa
+- [docs] Fix typo `onYearPicker` to `onYearChange` (#5954) @alexfauquette
+- [docs] Update `GridCellParams`'s `value` description (#5849) @cherniavskii
+- [docs] Update `README.md` to match Introduction section of the docs (#5754) @samuelsycamore
+
+### Core
+
+- [core] Fix typo (#5990) @flaviendelangle
+- [core] Remove old babel resolve rule (#5939) @oliviertassinari
+- [core] Remove outdated TODO (#5956) @flaviendelangle
+- [core] Upgrade monorepo (#5960) @cherniavskii
+- [core] Fix statics (#5986) @DanailH
+- [core] Remove unused dependencies (#5937) @oliviertassinari
+- [license] Remove CLI (#5757) @flaviendelangle
+- [test] Fix time zone sensitive test (#5955) @LukasTy
+- [test] Use `userEvent.mousePress` instead of `fireClickEvent` (#5920) @cherniavskii
+
 ## 5.16.0
 
 _Aug 25, 2022_
@@ -585,7 +662,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
 
-  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+  **YearPicker**: The prop `onYearChange` has been removed, you can use `onChange` instead since every change is a year change
 
   **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
 

package/CalendarPicker/CalendarPicker.d.ts

@@ -11,6 +11,7 @@ export interface CalendarPickerSlotsComponent extends PickersCalendarHeaderSlots
 export interface CalendarPickerSlotsComponentsProps extends PickersCalendarHeaderSlotsComponentsProps {
 }
 export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate>, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
+    autoFocus?: boolean;
     className?: string;
     classes?: Partial<CalendarPickerClasses>;
     /**
@@ -85,8 +86,10 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
      * @returns {void|Promise} -
      */
     onMonthChange?: (month: TDate) => void | Promise<void>;
+    focusedView?: CalendarPickerView | null;
+    onFocusedViewChange?: (view: CalendarPickerView) => (newHasFocus: boolean) => void;
 }
-export declare type ExportedCalendarPickerProps<TDate> = Omit<CalendarPickerProps<TDate>, 'date' | 'view' | 'views' | 'openTo' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps'>;
+export declare type ExportedCalendarPickerProps<TDate> = Omit<CalendarPickerProps<TDate>, 'date' | 'view' | 'views' | 'openTo' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps' | 'onFocusedViewChange' | 'focusedView'>;
 export declare type CalendarPickerDefaultizedProps<TDate> = DefaultizedProps<CalendarPickerProps<TDate>, 'views' | 'openTo' | 'loading' | 'reduceAnimations' | 'renderLoading' | keyof BaseDateValidationProps<TDate>>;
 declare type CalendarPickerComponent = (<TDate>(props: CalendarPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;

package/CalendarPicker/CalendarPicker.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday"];
+const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate", "disableHighlightToday", "focusedView", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { unstable_useId as useId } from '@mui/material/utils';
+import { useControlled, unstable_useId as useId, useEventCallback } from '@mui/material/utils';
 import { MonthPicker } from '../MonthPicker/MonthPicker';
 import { useCalendarState } from './useCalendarState';
 import { useDefaultDates, useUtils } from '../internals/hooks/useUtils';
@@ -109,7 +109,9 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     readOnly,
     minDate,
     maxDate,
-    disableHighlightToday
+    disableHighlightToday,
+    focusedView,
+    onFocusedViewChange
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -163,10 +165,8 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       changeMonth(startOfMonth);
     }
 
-    changeFocusedDay(closestEnabledDate);
-  }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onMonthChange, changeMonth, openNext, utils]); // TODO: Use same behavior as `handleDateMonthChange` to avoid selecting a date in another year.
-  // Needs startOfYear / endOfYear methods in adapter.
-
+    changeFocusedDay(closestEnabledDate, true);
+  }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onMonthChange, changeMonth, openNext, utils]);
   const handleDateYearChange = React.useCallback((newDate, selectionState) => {
     const startOfYear = utils.startOfYear(newDate);
     const endOfYear = utils.endOfYear(newDate);
@@ -188,7 +188,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       changeMonth(startOfYear);
     }
 
-    changeFocusedDay(closestEnabledDate);
+    changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onYearChange, openNext, utils, changeMonth]);
   const onSelectedDayChange = React.useCallback((day, isFinish) => {
     if (date && day) {
@@ -238,6 +238,27 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     disabled
   };
   const gridLabelId = `${id}-grid-label`;
+  const [internalFocusedView, setInternalFocusedView] = useControlled({
+    name: 'DayPicker',
+    state: 'focusedView',
+    controlled: focusedView,
+    default: autoFocus ? openView : null
+  });
+  const hasFocus = internalFocusedView !== null;
+  const handleFocusedViewChange = useEventCallback(eventView => newHasFocus => {
+    if (onFocusedViewChange) {
+      // Use the calendar or clock logic
+      onFocusedViewChange(eventView)(newHasFocus);
+      return;
+    } // If alone, do the local modifications
+
+
+    if (newHasFocus) {
+      setInternalFocusedView(eventView);
+    } else {
+      setInternalFocusedView(prevView => prevView === eventView ? null : prevView);
+    }
+  });
   return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
@@ -268,12 +289,17 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
           autoFocus: autoFocus,
           date: date,
           onChange: handleDateYearChange,
-          shouldDisableYear: shouldDisableYear
+          shouldDisableYear: shouldDisableYear,
+          hasFocus: hasFocus,
+          onFocusedViewChange: handleFocusedViewChange('year')
         })), openView === 'month' && /*#__PURE__*/_jsx(MonthPicker, _extends({}, baseDateValidationProps, commonViewProps, {
+          autoFocus: autoFocus,
+          hasFocus: hasFocus,
           className: className,
           date: date,
           onChange: handleDateMonthChange,
-          shouldDisableMonth: shouldDisableMonth
+          shouldDisableMonth: shouldDisableMonth,
+          onFocusedViewChange: handleFocusedViewChange('month')
         })), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, other, calendarState, baseDateValidationProps, commonViewProps, {
           autoFocus: autoFocus,
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
@@ -282,6 +308,8 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
           selectedDays: [date],
           onSelectedDaysChange: onSelectedDayChange,
           shouldDisableDate: shouldDisableDate,
+          hasFocus: hasFocus,
+          onFocusedViewChange: handleFocusedViewChange('day'),
           gridLabelId: gridLabelId
         }))]
       })
@@ -346,6 +374,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  focusedView: PropTypes.oneOf(['day', 'month', 'year']),
 
   /**
    * Get aria-label text for switching between views button.
@@ -382,6 +411,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * Callback fired on date change
    */
   onChange: PropTypes.func.isRequired,
+  onFocusedViewChange: PropTypes.func,
 
   /**
    * Callback firing on month change @DateIOType.

package/CalendarPicker/DayPicker.d.ts

@@ -4,7 +4,6 @@ import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';
 import { BaseDateValidationProps, DayValidationProps } from '../internals/hooks/validation/models';
 export interface ExportedDayPickerProps<TDate> extends Pick<PickersDayProps<TDate>, 'disableHighlightToday' | 'showDaysOutsideCurrentMonth'> {
-    autoFocus?: boolean;
     /**
      * If `true` renders `LoadingComponent` in calendar instead of calendar view.
      * Can be used to preload information and show it in calendar.
@@ -49,6 +48,8 @@ export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate>, Da
     reduceAnimations: boolean;
     slideDirection: SlideDirection;
     TransitionProps?: Partial<SlideTransitionProps>;
+    hasFocus?: boolean;
+    onFocusedViewChange?: (newHasFocus: boolean) => void;
     gridLabelId?: string;
 }
 /**

package/CalendarPicker/DayPicker.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { PickersDay } from '../PickersDay/PickersDay';
 import { useUtils, useNow } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { PickersSlideTransition } from './PickersSlideTransition';
 import { useIsDayDisabled } from '../internals/hooks/validation/useDateValidation';
+import { findClosestEnabledDate } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -55,7 +56,6 @@ export function DayPicker(props) {
   const now = useNow();
   const utils = useUtils();
   const {
-    autoFocus,
     onFocusedDayChange,
     className,
     currentMonth,
@@ -82,6 +82,8 @@ export function DayPicker(props) {
     maxDate,
     shouldDisableDate,
     dayOfWeekFormatter = defaultDayOfWeekFormatter,
+    hasFocus,
+    onFocusedViewChange,
     gridLabelId
   } = props;
   const isDateDisabled = useIsDayDisabled({
@@ -91,6 +93,12 @@ export function DayPicker(props) {
     disablePast,
     disableFuture
   });
+  const [internalFocusedDay, setInternalFocusedDay] = React.useState(() => focusedDay || now);
+  const changeHasFocus = React.useCallback(newHasFocus => {
+    if (onFocusedViewChange) {
+      onFocusedViewChange(newHasFocus);
+    }
+  }, [onFocusedViewChange]);
   const handleDaySelect = React.useCallback((day, isFinish = 'finish') => {
     if (readOnly) {
       return;
@@ -98,6 +106,72 @@ export function DayPicker(props) {
 
     onSelectedDaysChange(day, isFinish);
   }, [onSelectedDaysChange, readOnly]);
+  const focusDay = React.useCallback(day => {
+    if (!isDateDisabled(day)) {
+      onFocusedDayChange(day);
+      setInternalFocusedDay(day);
+      changeHasFocus(true);
+    }
+  }, [isDateDisabled, onFocusedDayChange, changeHasFocus]);
+  const theme = useTheme();
+
+  function handleKeyDown(event, day) {
+    switch (event.key) {
+      case 'ArrowUp':
+        focusDay(utils.addDays(day, -7));
+        event.preventDefault();
+        break;
+
+      case 'ArrowDown':
+        focusDay(utils.addDays(day, 7));
+        event.preventDefault();
+        break;
+
+      case 'ArrowLeft':
+        focusDay(utils.addDays(day, theme.direction === 'ltr' ? -1 : 1));
+        event.preventDefault();
+        break;
+
+      case 'ArrowRight':
+        focusDay(utils.addDays(day, theme.direction === 'ltr' ? 1 : -1));
+        event.preventDefault();
+        break;
+
+      case 'Home':
+        focusDay(utils.startOfWeek(day));
+        event.preventDefault();
+        break;
+
+      case 'End':
+        focusDay(utils.endOfWeek(day));
+        event.preventDefault();
+        break;
+
+      case 'PageUp':
+        focusDay(utils.getNextMonth(day));
+        event.preventDefault();
+        break;
+
+      case 'PageDown':
+        focusDay(utils.getPreviousMonth(day));
+        event.preventDefault();
+        break;
+
+      default:
+        break;
+    }
+  }
+
+  function handleFocus(event, day) {
+    focusDay(day);
+  }
+
+  function handleBlur(event, day) {
+    if (hasFocus && utils.isSameDay(internalFocusedDay, day)) {
+      changeHasFocus(false);
+    }
+  }
+
   const currentMonthNumber = utils.getMonth(currentMonth);
   const validSelectedDays = selectedDays.filter(day => !!day).map(day => utils.startOfDay(day)); // need a new ref whenever the `key` of the transition changes: http://reactcommunity.org/react-transition-group/transition/#Transition-prop-nodeRef.
 
@@ -105,6 +179,24 @@ export function DayPicker(props) {
 
   const slideNodeRef = React.useMemo(() => /*#__PURE__*/React.createRef(), [transitionKey]);
   const startOfCurrentWeek = utils.startOfWeek(now);
+  const focusableDay = React.useMemo(() => {
+    const startOfMonth = utils.startOfMonth(currentMonth);
+    const endOfMonth = utils.endOfMonth(currentMonth);
+
+    if (isDateDisabled(internalFocusedDay) || utils.isAfterDay(internalFocusedDay, endOfMonth) || utils.isBeforeDay(internalFocusedDay, startOfMonth)) {
+      return findClosestEnabledDate({
+        utils,
+        date: internalFocusedDay,
+        minDate: startOfMonth,
+        maxDate: endOfMonth,
+        disablePast,
+        disableFuture,
+        isDateDisabled
+      });
+    }
+
+    return internalFocusedDay;
+  }, [currentMonth, disableFuture, disablePast, internalFocusedDay, isDateDisabled, utils]);
   return /*#__PURE__*/_jsxs("div", {
     role: "grid",
     "aria-labelledby": gridLabelId,
@@ -136,6 +228,7 @@ export function DayPicker(props) {
         children: utils.getWeekArray(currentMonth).map(week => /*#__PURE__*/_jsx(PickersCalendarWeek, {
           role: "row",
           children: week.map(day => {
+            const isFocusableDay = focusableDay !== null && utils.isSameDay(day, focusableDay);
             const isSelected = validSelectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
             const isToday = utils.isSameDay(day, now);
             const pickersDayProps = {
@@ -143,14 +236,17 @@ export function DayPicker(props) {
               day,
               isAnimating: isMonthSwitchingAnimating,
               disabled: disabled || isDateDisabled(day),
-              autoFocus: autoFocus && focusedDay !== null && utils.isSameDay(day, focusedDay),
+              autoFocus: hasFocus && isFocusableDay,
               today: isToday,
               outsideCurrentMonth: utils.getMonth(day) !== currentMonthNumber,
               selected: isSelected,
               disableHighlightToday,
               showDaysOutsideCurrentMonth,
-              onDayFocus: onFocusedDayChange,
+              onKeyDown: handleKeyDown,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
               onDaySelect: handleDaySelect,
+              tabIndex: isFocusableDay ? 0 : -1,
               role: 'gridcell',
               'aria-selected': isSelected
             };

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -6,7 +6,15 @@ import { ExportedArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, Pickers
 import { CalendarPickerView } from '../internals/models';
 export declare type ExportedCalendarHeaderProps<TDate> = Pick<PickersCalendarHeaderProps<TDate>, 'getViewSwitchingButtonText' | 'leftArrowButtonText' | 'rightArrowButtonText'>;
 export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent {
+    /**
+     * Button displayed to switch between different calendar views.
+     * @default IconButton
+     */
     SwitchViewButton: React.ElementType;
+    /**
+     * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.
+     * @default ArrowDropDown
+     */
     SwitchViewIcon: React.ElementType;
 }
 export interface PickersCalendarHeaderComponentsPropsOverrides {

package/CalendarPicker/useCalendarState.d.ts

@@ -14,18 +14,24 @@ interface ChangeMonthPayload<TDate> {
     direction: SlideDirection;
     newMonth: TDate;
 }
+interface ChangeFocusedDayPayload<TDate> {
+    focusedDay: TDate | null;
+    /**
+     * The update does not trigger month switching animation.
+     * For example: when selecting month from the month view.
+     */
+    withoutMonthSwitchingAnimation?: boolean;
+}
 export declare const createCalendarStateReducer: <TDate extends unknown>(reduceAnimations: boolean, disableSwitchToMonthOnDayFocus: boolean, utils: MuiPickersAdapter<TDate>) => (state: CalendarState<TDate>, action: {
     type: "finishMonthSwitchingAnimation";
-} | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", {
-    focusedDay: TDate | null;
-}>) => CalendarState<TDate>;
+} | ReducerAction<"changeMonth", ChangeMonthPayload<TDate>> | ReducerAction<"changeFocusedDay", ChangeFocusedDayPayload<TDate>>) => CalendarState<TDate>;
 interface CalendarStateInput<TDate> extends Pick<CalendarPickerDefaultizedProps<TDate>, 'date' | 'defaultCalendarMonth' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | 'onMonthChange' | 'reduceAnimations' | 'shouldDisableDate'> {
     disableSwitchToMonthOnDayFocus?: boolean;
 }
 export declare const useCalendarState: <TDate extends unknown>({ date, defaultCalendarMonth, disableFuture, disablePast, disableSwitchToMonthOnDayFocus, maxDate, minDate, onMonthChange, reduceAnimations, shouldDisableDate, }: CalendarStateInput<TDate>) => {
     calendarState: CalendarState<TDate>;
     changeMonth: (newDate: TDate) => void;
-    changeFocusedDay: (newFocusedDate: TDate | null) => void;
+    changeFocusedDay: (newFocusedDate: TDate | null, withoutMonthSwitchingAnimation?: boolean) => void;
     isDateDisabled: (day: TDate | null) => boolean;
     onMonthSwitchingAnimationEnd: () => void;
     handleChangeMonth: (payload: ChangeMonthPayload<TDate>) => void;

package/CalendarPicker/useCalendarState.js

@@ -25,7 +25,7 @@ export const createCalendarStateReducer = (reduceAnimations, disableSwitchToMont
         const needMonthSwitch = action.focusedDay != null && !disableSwitchToMonthOnDayFocus && !utils.isSameMonth(state.currentMonth, action.focusedDay);
         return _extends({}, state, {
           focusedDay: action.focusedDay,
-          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations,
+          isMonthSwitchingAnimating: needMonthSwitch && !reduceAnimations && !action.withoutMonthSwitchingAnimation,
           currentMonth: needMonthSwitch ? utils.startOfMonth(action.focusedDay) : state.currentMonth,
           slideDirection: action.focusedDay != null && utils.isAfterDay(action.focusedDay, state.currentMonth) ? 'left' : 'right'
         });
@@ -91,11 +91,12 @@ export const useCalendarState = ({
       type: 'finishMonthSwitchingAnimation'
     });
   }, []);
-  const changeFocusedDay = React.useCallback(newFocusedDate => {
+  const changeFocusedDay = React.useCallback((newFocusedDate, withoutMonthSwitchingAnimation) => {
     if (!isDateDisabled(newFocusedDate)) {
       dispatch({
         type: 'changeFocusedDay',
-        focusedDay: newFocusedDate
+        focusedDay: newFocusedDate,
+        withoutMonthSwitchingAnimation
       });
     }
   }, [isDateDisabled]);

package/ClockPicker/ClockPicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { ExportedTimeValidationProps } from '../internals/hooks/validation/useTimeValidation';
 import { ClockPickerView, MuiPickersAdapter } from '../internals/models';
@@ -33,17 +34,11 @@ export interface ExportedClockPickerProps<TDate> extends ExportedTimeValidationP
      */
     getClockLabelText?: (view: ClockPickerView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string;
 }
-export interface ClockPickerSlotsComponent {
-    LeftArrowButton: React.ElementType;
-    LeftArrowIcon: React.ElementType;
-    RightArrowButton: React.ElementType;
-    RightArrowIcon: React.ElementType;
+export interface ClockPickerSlotsComponent extends PickersArrowSwitcherSlotsComponent {
 }
 export interface ClockPickerComponentsPropsOverrides {
 }
-export interface ClockPickerSlotsComponentsProps {
-    leftArrowButton: React.SVGAttributes<SVGSVGElement> & ClockPickerComponentsPropsOverrides;
-    rightArrowButton: React.SVGAttributes<SVGSVGElement> & ClockPickerComponentsPropsOverrides;
+export interface ClockPickerSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps {
 }
 export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate> {
     className?: string;

package/DateField/DateField.interfaces.d.ts

@@ -1,9 +1,9 @@
 import { TextFieldProps } from '@mui/material/TextField';
-import { UseFieldProps } from '../internals/hooks/useField';
+import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { DateValidationError, DateValidationProps } from '../internals/hooks/validation/useDateValidation';
 import { DefaultizedProps } from '../internals/models/helpers';
-export interface UseDateFieldProps<TInputDate, TDate> extends UseFieldProps<TInputDate | null, TDate | null, DateValidationError>, Partial<Omit<DateValidationProps<TInputDate, TDate>, 'value'>> {
+export interface UseDateFieldProps<TInputDate, TDate> extends UseFieldInternalProps<TInputDate | null, TDate | null, DateValidationError>, Partial<Omit<DateValidationProps<TInputDate, TDate>, 'value'>> {
 }
 export declare type UseDateFieldDefaultizedProps<TInputDate, TDate> = DefaultizedProps<UseDateFieldProps<TInputDate, TDate>, 'minDate' | 'maxDate' | 'disableFuture' | 'disablePast'>;
-export interface DateFieldProps<TInputDate, TDate> extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange' | 'onError'>, UseDateFieldProps<TInputDate, TDate> {
-}
+export declare type UseDateFieldComponentProps<TInputDate, TDate, ChildProps extends {}> = Omit<ChildProps, 'value' | 'defaultValue' | 'onChange' | 'onError'> & UseDateFieldProps<TInputDate, TDate>;
+export declare type DateFieldProps<TInputDate, TDate> = UseDateFieldComponentProps<TInputDate, TDate, TextFieldProps>;