@mui/x-date-pickers 5.0.0-alpha.3 → 5.0.0-alpha.6

package/CHANGELOG.md

@@ -3,21 +3,247 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.1
+
+_Jun 9, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- 🔎 Control quick filter input value via model prop (#5013) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.1` / `@mui/x-data-grid-pro@v5.12.1` / `@mui/x-data-grid-premium@v5.12.1`
+
+#### Changes
+
+- [DataGrid] Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- [DataGrid] Restore focus after dismissing the column menu (#5027) @m4theushw
+- [DataGrid] Update quick filter input when model is modified (#5013) @alexfauquette
+- [DataGrid] Fix implicit dependency on react-dom (#5121) @oliviertassinari
+- [DataGrid] Support `getRowId` in row reordering (#5093) @flaviendelangle
+- [DataGridPro] Fix column resizing in RTL mode (#4989) @cherniavskii
+- [DataGridPro] Fix column resizing on touchscreen (#5056) @cherniavskii
+- [l10n] Update Japanese (ja-JP) locale (#5122) @hikotq
+- [l10n] Update Russian (ru-RU) locale (#5069) @Artboomy
+
+### `@mui/x-date-pickers@5.0.0-alpha.6` / `@mui/x-date-pickers-pro@5.0.0-alpha.6`
+
+#### Changes
+
+- [pickers] Fix usage of `maxDate` / `minDate` / `disableFuture` and `disablePast` (#5081) @flaviendelangle
+- [pickers] Infer mask from `inputFormat` (#5060) @alexfauquette
+- [pickers] Manage input value without using the focus (#4486) @alexfauquette
+- [pickers] Use new localization for doc examples (#5097) @flaviendelangle
+- [pickers] Fix `shouldDisableDate` in range pickers (#5123) @flaviendelangle
+- [l10n] Add Brazilian Portuguese (pt-BR) locale (#5100) @jardelnovaes
+- [l10n] Use `localText` for remaining texts (#4986) @alexfauquette
+
+### Docs
+
+- [docs] Implement the focus management on data grid demo links (#5070) @alexfauquette
+- [docs] Fix `301` link to render cell (#5106) @oliviertassinari
+- [docs] Fix broken anchor link @oliviertassinari
+- [docs] Improve movie dataset (#5142) @flaviendelangle
+- [docs] Move all localization documentation in a unique page (#5072) @alexfauquette
+- [docs] Section for overwriting core components i18n keys (#4998) @DanailH
+- [docs] Small grammar and format fixes for Dynamic Row Height section (#5098) @samuelsycamore
+
+### Core
+
+- [core] Allows to run tests with different date adapters (#5055) @alexfauquette
+- [core] Prettify the l10n issue (#4928) @alexfauquette
+- [core] Set correct `apiRef` type in row reorder pre processors #5125 @DanailH
+- [core] Stop using `GridEvents` in technical doc (#5157) @flaviendelangle
+- [core] Upgrade monorepo (#5101) @oliviertassinari
+- [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
+- [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
+
+## v5.12.0
+
+_May 31, 2022_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/rows/#dynamic-row-height) (#4859) @m4theushw
+
+  <img src="https://user-images.githubusercontent.com/42154031/171183167-718d7bcd-ec0f-459e-97fe-0f650abb4a99.gif" width="800">
+
+- ⚠️ Remove deprecated row grouping feature from `@mui/x-data-grid-pro`
+
+  Row grouping is available through the `@mui/x-data-grid-premium` package - see [Premium plan release blogpost](https://mui.com/blog/premium-plan-release/).
+
+- 🐞 Bug fixes and improvements
+
+### `@mui/x-data-grid@v5.12.0` / `@mui/x-data-grid-pro@v5.12.0` / `@mui/x-data-grid-premium@v5.12.0`
+
+#### Changes
+
+- [DataGrid] Support dynamic row height (#4859) @m4theushw
+- [DataGrid] Add `onMenuOpen` and `onMenuClose` props (#4825) @DanailH
+- [DataGrid] Add generics to `GridActionsColDef` to match `GridColDef` (#4982) @subvertallchris
+- [DataGrid] Disable drag event handlers when row or column reorder are disabled (#4857) @DanailH
+- [DataGrid] Allow other attempts to stop edit mode if the first failed (#5016) @m4theushw
+- [DataGrid] Better reflect the dependency on Material UI (#4795) @oliviertassinari
+- [DataGrid] Add an id to the filter item created when opening the filter panel (#5014) @flaviendelangle
+- [DataGrid] Use column visibility model on Hide All / Show All when enabled (#5050) @flaviendelangle
+- [DataGridPro] Unpin columns back to original position (#4512) @m4theushw
+- [DataGridPro] Remove experimental row grouping from Pro plan (#4949) @flaviendelangle
+- [DataGridPro] Allow to scroll detail panel content if it overflows the panel (#4979) @cherniavskii
+- [DataGridPro] Do not call `setRowIndex` when dragging a column over a row (#4987) @flaviendelangle
+- [l10n] Add Norwegian (Bokmål) (nb-NO) locale (#5001) @spiftire
+- [l10n] Add Turkish (tr-TR) locale (#5026) @Rassilion
+
+### `@mui/x-date-pickers@5.0.0-alpha.5` / `@mui/x-date-pickers-pro@5.0.0-alpha.5`
+
+#### Breaking changes
+
+- [pickers] Restructure props in `MonthPicker` / `YearPicker` and `DayPicker` (#4814) @flaviendelangle
+
+  The props of `MonthPicker` / `YearPicker` and `DayPicker` have been reworked to make them more consistent for a standalone usage (#4814) @flaviendelangle
+
+  **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
+
+  **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`)
+
+#### Changes
+
+- [pickers] Add German (de-DE) translations (#4974) @felixh10r
+- [pickers] Support action bar on static pickers and improve typing (#5015) @flaviendelangle
+
+### Docs
+
+- [docs] Add docs sections / pages for upcoming features on pickers (#4603) @flaviendelangle
+- [docs] Add docs for filter panel components (#4919) @m4theushw
+- [docs] Explain how to manage focus with `renderCell` (#4254) @alexfauquette
+- [docs] Fix broken links to GitHub source (#5003) @Edwardveb
+- [docs] Fix navigation links (#4956) @oliviertassinari
+- [docs] Fix typo on rows docs (#4952) @jamesRadicl
+- [docs] New WAI-ARIA guidelines location (#4957) @oliviertassinari
+- [docs] Add "Slots" section to the right nav in the API pages (#4993) @DanailH
+- [docs] Fix docs feedback widget not working (#4905) @cherniavskii
+- [docs] Replace custom notes and warning with callouts (#5008) @flaviendelangle
+
+### Core
+
+- [core] Avoid Order ID to refer to GitHub issues/PRs (#5005) @oliviertassinari
+- [core] Improve the workflow for incomplete issues (#5012) @mnajdova
+- [core] Remove dead code on row grouping tree creation (#4945) @flaviendelangle
+- [core] Use new cache api for the row grouping last model tracking (#4980) @flaviendelangle
+- [core] Ensure that PRs have atleast 1 label (#5011) @DanailH
+- [core] Fix trailing-space @oliviertassinari
+- [core] Stop Renovate PR updates when PR is on hold (#5020) @cherniavskii
+- [license] Remove support for UTF-8 (#4893) @oliviertassinari
+- [license] Tweak error messages (#4907) @mbrookes
+- [test] Skip Safari and Firefox on broken tests (#4994) @alexfauquette
+- [test] Make argos screenshots stable (#5061) @m4theushw
+
+## v5.11.1
+
+_May 20, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Support localization on the date and time picker components (#4517) @alexfauquette
+
+  Texts can be translated in the pickers components, similar to what can be done in the data grid component. Check the [documentation](https://mui.com/x/react-date-pickers/localization/) for more information.
+
+- 📃 Add support for column spanning when exporting to Excel (#4830) @cherniavskii
+
+  <img src="https://user-images.githubusercontent.com/13808724/167691417-bf6baeb9-d409-4134-acb6-aadaf6434de9.png" width="800">
+
+- 🐞 Bugs fixes
+
+### `@mui/x-data-grid@v5.11.1` / `@mui/x-data-grid-pro@v5.11.1` / `@mui/x-data-grid-premium@v5.11.1`
+
+#### Changes
+
+- [DataGrid] Add a CSS class corresponding to current density (#4858) @m4theushw
+- [DataGrid] Execute the pipe-processors in their initialization order (#4913) @flaviendelangle
+- [DataGrid] Fix rendering of the no rows overlay when the `loading` prop is changed (#4910) @m4theushw
+- [DataGridPremium] Add `exceljs` to the dependencies (#4939) @alexfauquette
+- [DataGridPremium] Support column spanning in the Excel export (#4830) @cherniavskii
+- [l10n] Improve Russian (ru-RU) locale (#4864) @arvkonstantin
+
+### `@mui/x-date-pickers@5.0.0-alpha.4` / `@mui/x-date-pickers-pro@5.0.0-alpha.4`
+
+#### Breaking changes
+
+- The props related to the action bar buttons have been removed (`clearable`, `showTodayButton`, `cancelText`, `okText`)
+
+  To decide which button must be displayed and in which order, you can now use the `actions` prop of the `actionBar` component slot props.
+
+  ```jsx
+  <DatePicker
+    componentsProps={{
+      actionBar: {
+        // The actions will be the same between desktop and mobile
+        actions: ['clear'],
+
+        // The actions will be different between desktop and mobile
+        actions: (variant) => (variant === 'desktop' ? [] : ['clear']),
+      },
+    }}
+  />
+  ```
+
+  The build-in `ActionBar` component supports 4 different actions: `'clear'`, `'cancel'`, `'accept'`, and `'today'`.
+  By default, the pickers will render the cancel and accept button on mobile and no action on desktop.
+
+  If you need other actions, you can provide your own component to the `ActionBar` component slot
+
+  ```jsx
+  <DatePicker components={{ ActionBar: CustomActionBar }} />
+  ```
+
+#### Changes
+
+- [DatePicker] Fix keyboard accessibility for first and last year (#4807) @alexfauquette
+- [pickers] Add component slot for action bar (#4778) @alexfauquette
+- [pickers] Add l10n support (#4517) @alexfauquette
+- [pickers] Close Popper when pressing <kbd>Esc</kbd> inside a modal (#4499) @alexfauquette
+- [pickers] Support class slots on toolbar components (#4855) @flaviendelangle
+- [TimePicker] Fix time validation when current date is `null` (#4867) @flaviendelangle
+
+### Docs
+
+- [docs] Add 301 redirect for columns page (#4940) @alexfauquette
+- [docs] Avoid confusion with license key installation (#4891) @oliviertassinari
+- [docs] Complete the instructions for pickers installation in readme (#4852) @alexfauquette
+- [docs] Disable ads on paid-only pages (#4842) @flaviendelangle
+- [docs] Don't redirect to localized doc on deploy preview (#4818) @m4theushw
+- [docs] Limit `LICENSE` file to 80 char per line (#4873) @oliviertassinari
+- [docs] Typo on OrderId @oliviertassinari
+- [docs] Update feature comparison table (#4918) @cherniavskii
+
+### Core
+
+- [core] Add new script to generate tree data rows from file tree (#4902) @flaviendelangle
+- [core] Fix code style (#4874) @oliviertassinari
+- [core] Fix React 18 peer dependency (#4908) @oliviertassinari
+- [core] Fix link to the LICENSE file (#4875) @oliviertassinari
+- [core] Fix transitive babel dependency (#4793) @oliviertassinari
+- [core] New pipe processing `rowHydration` (#4896) @flaviendelangle
+- [core] Remove dead code for the docs (#4791) @oliviertassinari
+- [core] Run `yarn prettier` @oliviertassinari
+- [core] Polishes on `CHANGELOG.md` (#4876) @oliviertassinari
+- [core] Simplify rows cache management (#4933) @flaviendelangle
+- [core] Use internal icons for quick filter (#4912) @alexfauquette
+
 ## v5.11.0
 
 _May 13, 2022_
 
 We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 🚀 Premium plan release
-
-  We’re happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)!
-  With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
+- 🚀 **Premium plan release**. We're happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)! With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
 
   This plan is available through the new `@mui/x-data-grid-premium` package, which contains the row grouping and the Excel export features.
 
-  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows.
-  Note that the experimental flag is not required anymore to use the row grouping.
+  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows. Note that the experimental flag is not required anymore to use the row grouping.
 
   ```diff
   -import { DataGridPro } from '@mui/x-data-grid-pro';
@@ -29,16 +255,11 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   For more information about the revised pricing model please have a look at the [blog post](https://mui.com/blog/premium-plan-release/#the-new-licensing-model).
 
-- 👔 Add Excel export
-
-- 🔎 Quick filtering
-
-  You can now add a quick filtering search bar to your grid.
-  To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar.
+- 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-  More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter)
+- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter).
 
-  ![image](https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png)
+  <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 
 - 🐞 Bugs fixes
 
@@ -46,7 +267,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 #### Breaking changes
 
-- Moving row grouping to premium package
+- Move row grouping to the premium package (#4223) @flaviendelangle
 
   The use of `rowGrouping` in the `@mui/x-data-grid-pro` package is deprecated. The experimental flag will be removed in an upcoming release.
 
@@ -76,7 +297,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 #### Breaking changes
 
-- Rework the auto-closing behavior of the pickers.
+- Rework the auto-closing behavior of the pickers (#4408) @flaviendelangle
 
   The `disableCloseOnSelect` prop has been replaced by a new `closeOnSelect` prop which has the opposite behavior.
   The default behavior remains the same (close after the last step on desktop but not on mobile).

package/CalendarPicker/CalendarPicker.d.ts

@@ -1,26 +1,24 @@
 import * as React from 'react';
-import { ExportedMonthPickerProps } from '../MonthPicker/MonthPicker';
 import { ExportedDayPickerProps } from './DayPicker';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { ExportedCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from './PickersCalendarHeader';
-import { ExportedYearPickerProps } from '../YearPicker/YearPicker';
 import { CalendarPickerView } from '../internals/models';
 import { CalendarPickerClasses } from './calendarPickerClasses';
+import { MonthValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
 export interface CalendarPickerSlotsComponent extends PickersCalendarHeaderSlotsComponent {
 }
 export interface CalendarPickerSlotsComponentsProps extends PickersCalendarHeaderSlotsComponentsProps {
 }
-export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate>, ExportedYearPickerProps<TDate>, ExportedMonthPickerProps<TDate>, ExportedCalendarHeaderProps<TDate> {
+export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
     className?: string;
     classes?: Partial<CalendarPickerClasses>;
     /**
-     * The components used for each slot.
-     * Either a string to use an HTML element or a component.
+     * Overrideable components.
      * @default {}
      */
     components?: Partial<CalendarPickerSlotsComponent>;
     /**
-     * The props used for each slot inside.
+     * The props used for each component slot.
      * @default {}
      */
     componentsProps?: Partial<CalendarPickerSlotsComponentsProps>;
@@ -34,22 +32,6 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
      * @default false
      */
     disabled?: boolean;
-    /**
-     * @default false
-     */
-    disableFuture?: boolean;
-    /**
-     * @default false
-     */
-    disablePast?: boolean;
-    /**
-     * Max selectable date. @DateIOType
-     */
-    maxDate?: TDate;
-    /**
-     * Min selectable date. @DateIOType
-     */
-    minDate?: TDate;
     /**
      * Callback fired on view change.
      * @param {CalendarPickerView} view The new view.
@@ -80,13 +62,6 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
      * @default () => <span data-mui-test="loading-progress">...</span>
      */
     renderLoading?: () => React.ReactNode;
-    /**
-     * Disable specific date. @DateIOType
-     * @template TDate
-     * @param {TDate} day The date to check.
-     * @returns {boolean} If `true` the day will be disabled.
-     */
-    shouldDisableDate?: (day: TDate) => boolean;
     /**
      * Controlled open view.
      */
@@ -96,8 +71,21 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
      * @default ['year', 'day']
      */
     views?: readonly CalendarPickerView[];
+    /**
+     * Callback firing on year change @DateIOType.
+     * @template TDate
+     * @param {TDate} year The new year.
+     */
+    onYearChange?: (year: TDate) => void;
+    /**
+     * Callback firing on month change @DateIOType.
+     * @template TDate
+     * @param {TDate} month The new month.
+     * @returns {void|Promise} -
+     */
+    onMonthChange?: (month: TDate) => void | Promise<void>;
 }
-export declare type ExportedCalendarPickerProps<TDate> = Omit<CalendarPickerProps<TDate>, 'date' | 'view' | 'views' | 'openTo' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes'>;
+export declare type ExportedCalendarPickerProps<TDate> = Omit<CalendarPickerProps<TDate>, 'date' | 'view' | 'views' | 'openTo' | 'onChange' | 'changeView' | 'slideDirection' | 'currentMonth' | 'className' | 'classes' | 'components' | 'componentsProps'>;
 declare type CalendarPickerComponent = (<TDate>(props: CalendarPickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };

package/CalendarPicker/CalendarPicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "loading", "maxDate", "minDate", "onChange", "onMonthChange", "reduceAnimations", "renderLoading", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly"];
+const _excluded = ["autoFocus", "onViewChange", "date", "disableFuture", "disablePast", "defaultCalendarMonth", "loading", "onChange", "onYearChange", "onMonthChange", "reduceAnimations", "renderLoading", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "view", "views", "openTo", "className", "disabled", "readOnly", "minDate", "maxDate"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -59,6 +59,8 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
  * - [CalendarPicker API](https://mui.com/x/api/date-pickers/calendar-picker/)
  */
 const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inProps, ref) {
+  const utils = useUtils();
+  const defaultDates = useDefaultDates();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiCalendarPicker'
@@ -68,13 +70,12 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
     autoFocus,
     onViewChange,
     date,
-    disableFuture = false,
-    disablePast = false,
+    disableFuture,
+    disablePast,
     defaultCalendarMonth,
     loading = false,
-    maxDate: maxDateProp,
-    minDate: minDateProp,
     onChange,
+    onYearChange,
     onMonthChange,
     reduceAnimations = defaultReduceAnimations,
     renderLoading = () => /*#__PURE__*/_jsx("span", {
@@ -88,17 +89,16 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
     openTo = 'day',
     className,
     disabled,
-    readOnly
+    readOnly,
+    minDate = defaultDates.minDate,
+    maxDate = defaultDates.maxDate
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
-  const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
-  const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
   const {
     openView,
-    setOpenView
+    setOpenView,
+    openNext
   } = useViews({
     view,
     views,
@@ -110,8 +110,8 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
     calendarState,
     changeFocusedDay,
     changeMonth,
-    isDateDisabled,
     handleChangeMonth,
+    isDateDisabled,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
     date,
@@ -124,6 +124,54 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
     disablePast,
     disableFuture
   });
+  const handleDateMonthChange = React.useCallback((newDate, selectionState) => {
+    const startOfMonth = utils.startOfMonth(newDate);
+    const endOfMonth = utils.endOfMonth(newDate);
+    const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
+      utils,
+      date: newDate,
+      minDate: utils.isBefore(minDate, startOfMonth) ? startOfMonth : minDate,
+      maxDate: utils.isAfter(maxDate, endOfMonth) ? endOfMonth : maxDate,
+      disablePast,
+      disableFuture,
+      isDateDisabled
+    }) : newDate;
+
+    if (closestEnabledDate) {
+      onChange(closestEnabledDate, selectionState);
+      onMonthChange == null ? void 0 : onMonthChange(startOfMonth);
+    } else {
+      openNext();
+      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.
+
+  const handleDateYearChange = React.useCallback((newDate, selectionState) => {
+    const startOfYear = utils.startOfYear(newDate);
+    const endOfYear = utils.endOfYear(newDate);
+    const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
+      utils,
+      date: newDate,
+      minDate: utils.isBefore(minDate, startOfYear) ? startOfYear : minDate,
+      maxDate: utils.isAfter(maxDate, endOfYear) ? endOfYear : maxDate,
+      disablePast,
+      disableFuture,
+      isDateDisabled
+    }) : newDate;
+
+    if (closestEnabledDate) {
+      onChange(closestEnabledDate, selectionState);
+      onYearChange == null ? void 0 : onYearChange(closestEnabledDate);
+    } else {
+      openNext();
+      changeMonth(startOfYear);
+    }
+
+    changeFocusedDay(closestEnabledDate);
+  }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onYearChange, openNext, utils, changeMonth]);
   const onSelectedDayChange = React.useCallback((day, isFinish) => {
     if (date && day) {
       // If there is a date already selected, then we want to keep its time
@@ -141,7 +189,7 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
         maxDate,
         disablePast,
         disableFuture,
-        shouldDisableDate: isDateDisabled
+        isDateDisabled
       });
       onChange(closestEnabledDate, 'partial');
     } // This call is too expensive to run it on each prop change.
@@ -157,19 +205,12 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  const monthPickerProps = {
-    className,
-    date,
-    disabled,
+  const baseDateValidationProps = {
     disablePast,
     disableFuture,
-    onChange,
-    minDate,
     maxDate,
-    shouldDisableMonth,
-    onMonthChange,
-    readOnly
-  }; // When disable, limit the view to the selected date
+    minDate
+  }; // When disabled, limit the view to the selected date
 
   const minDateWithDisabled = disabled && date || minDate;
   const maxDateWithDisabled = disabled && date || maxDate;
@@ -198,31 +239,32 @@ const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicker(inP
       transKey: openView,
       ownerState: ownerState,
       children: /*#__PURE__*/_jsxs("div", {
-        children: [openView === 'year' && /*#__PURE__*/_jsx(YearPicker, _extends({}, other, {
+        children: [openView === 'year' && /*#__PURE__*/_jsx(YearPicker, _extends({}, other, baseDateValidationProps, {
           autoFocus: autoFocus,
           date: date,
-          onChange: onChange,
-          minDate: minDate,
-          maxDate: maxDate,
-          disableFuture: disableFuture,
-          disablePast: disablePast,
-          isDateDisabled: isDateDisabled,
+          onChange: handleDateYearChange,
           shouldDisableYear: shouldDisableYear,
-          onFocusedDayChange: changeFocusedDay,
           disabled: disabled,
           readOnly: readOnly
-        })), openView === 'month' && /*#__PURE__*/_jsx(MonthPicker, _extends({}, monthPickerProps)), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, other, calendarState, {
+        })), openView === 'month' && /*#__PURE__*/_jsx(MonthPicker, _extends({}, baseDateValidationProps, {
+          className: className,
+          date: date,
+          onChange: handleDateMonthChange,
+          disabled: disabled,
+          readOnly: readOnly,
+          shouldDisableMonth: shouldDisableMonth
+        })), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, other, calendarState, baseDateValidationProps, {
           autoFocus: autoFocus,
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
           reduceAnimations: reduceAnimations,
           selectedDays: [date],
           onSelectedDaysChange: onSelectedDayChange,
-          isDateDisabled: isDateDisabled,
           loading: loading,
           renderLoading: renderLoading,
           disabled: disabled,
-          readOnly: readOnly
+          readOnly: readOnly,
+          shouldDisableDate: shouldDisableDate
         }))]
       })
     })]
@@ -238,14 +280,13 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
   className: PropTypes.string,
 
   /**
-   * The components used for each slot.
-   * Either a string to use an HTML element or a component.
+   * Overrideable components.
    * @default {}
    */
   components: PropTypes.object,
 
   /**
-   * The props used for each slot inside.
+   * The props used for each component slot.
    * @default {}
    */
   componentsProps: PropTypes.object,
@@ -263,17 +304,19 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
   disabled: PropTypes.bool,
 
   /**
+   * If `true` future days are disabled.
    * @default false
    */
   disableFuture: PropTypes.bool,
 
   /**
-   * If `true`, todays date is rendering without highlighting with circle.
+   * If `true`, today's date is rendering without highlighting with circle.
    * @default false
    */
   disableHighlightToday: PropTypes.bool,
 
   /**
+   * If `true` past days are disabled.
    * @default false
    */
   disablePast: PropTypes.bool,
@@ -282,11 +325,13 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
    */
   getViewSwitchingButtonText: PropTypes.func,
 
   /**
    * Left arrow icon aria-label text.
+   * @deprecated
    */
   leftArrowButtonText: PropTypes.string,
 
@@ -298,12 +343,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
   loading: PropTypes.bool,
 
   /**
-   * Max selectable date. @DateIOType
+   * Maximal selectable date. @DateIOType
    */
   maxDate: PropTypes.any,
 
   /**
-   * Min selectable date. @DateIOType
+   * Minimal selectable date. @DateIOType
    */
   minDate: PropTypes.any,
 
@@ -315,7 +360,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
   /**
    * Callback firing on month change @DateIOType.
    * @template TDate
-   * @param {TDate} month The new year.
+   * @param {TDate} month The new month.
    * @returns {void|Promise} -
    */
   onMonthChange: PropTypes.func,
@@ -370,14 +415,15 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
 
   /**
    * Right arrow icon aria-label text.
+   * @deprecated
    */
   rightArrowButtonText: PropTypes.string,
 
   /**
    * Disable specific date. @DateIOType
    * @template TDate
-   * @param {TDate} day The date to check.
-   * @returns {boolean} If `true` the day will be disabled.
+   * @param {TDate} day The date to test.
+   * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
 
@@ -395,7 +441,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * Works like `shouldDisableDate` but for year selection view @DateIOType.
    * @template TDate
    * @param {TDate} year The year to test.
-   * @returns {boolean} Return `true` if the year should be disabled.
+   * @returns {boolean} Returns `true` if the year should be disabled.
    */
   shouldDisableYear: PropTypes.func,