@mui/x-date-pickers 5.0.2 → 6.0.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,215 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-alpha.0
+
+_Sep 22, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add a `localeText` prop to all pickers to customize the translations (#6212) @flaviendelangle
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6219) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-alpha.0` / `@mui/x-data-grid-pro@v6.0.0-alpha.0` / `@mui/x-data-grid-premium@v6.0.0-alpha.0`
+
+#### Breaking changes
+
+- The deprecated `hide` column property has been removed in favor of the `columnVisibilityModel` prop and initial state.
+
+  ```diff
+  <DataGrid
+    columns={[
+      field: 'id,
+  -   hide: true,
+    ]}
+  +  initialState={{
+  +    columns: {
+  +      columnVisibilityModel: { id: false },
+  +    }
+  +  }}
+  />
+  ```
+
+  You can find more information about this new API on our [documentation](https://next.mui.com/x/react-data-grid/column-visibility/).
+
+- The `GridEvents` enum is now a TypeScript type.
+
+  ```diff
+  - apiRef.current.subscribeEvent(GridEvents.rowClick', handleRowClick)
+  + apiRef.current.subscribeEvent('rowClick', handleRowClick)
+  ```
+
+#### Changes
+
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Fix scroll anchoring with master details (#6054) @oliviertassinari
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+- [DataGrid] Remove the `GridEvents` enum (#6003) @flaviendelangle
+- [DataGrid] Remove the deprecated `hide` column property (#5999) @flaviendelangle
+
+### `@mui/x-date-pickers@v6.0.0-alpha.0` / `@mui/x-date-pickers-pro@v6.0.0-alpha.0`
+
+#### Breaking changes
+
+- All the deprecated props that allowed you to set the text displayed in the pickers have been removed.
+
+  You can now use the `localText` prop available on all picker components:
+
+  | Removed prop                 | Property in the new `localText` prop                                              |
+  |------------------------------|-----------------------------------------------------------------------------------|
+  | `endText`                    | `end`                                                                             |
+  | `getClockLabelText`          | `clockLabelText`                                                                  |
+  | `getHoursClockNumberText`    | `hoursClockNumberText`                                                            |
+  | `getMinutesClockNumberText`  | `minutesClockNumberText`                                                          |
+  | `getSecondsClockNumberText`  | `secondsClockNumberText`                                                          |
+  | `getViewSwitchingButtonText` | `calendarViewSwitchingButtonAriaLabel`                                            |
+  | `leftArrowButtonText`        | `openPreviousView` (or `previousMonth` when the button changes the visible month) |
+  | `rightArrowButtonText`       | `openNextView` (or `nextMonth` when the button changes the visible month)         |
+  | `startText`                  | `start`                                                                           |
+
+  For instance if you want to replace the `startText` / `endText`
+
+  ```diff
+  <DateRangePicker
+  -  startText="From"
+  -  endText="To"
+  +  localeText={{
+  +    start: 'From',
+  +    end: 'To',
+  +  }}
+  />
+  ```
+
+You can find more information about the new api, including how to set those translations on all your components at once in the [documentation](https://next.mui.com/x/react-date-pickers/localization/)
+
+- The component slots `LeftArrowButton` and `RightArrowButton` have been renamed `PreviousIconButton` and `NextIconButton` to better describe there usage:
+
+  ```diff
+  <DatePicker 
+    components={{
+  -   LeftArrowButton: CustomButton,  
+  +   PreviousIconButton: CustomButton,
+
+  -   RightArrowButton: CustomButton,
+  +   NextIconButton: CustomButton,
+    }}
+
+    componentsProps={{
+  -   leftArrowButton: {},  
+  +   previousIconButton: {},
+
+  -   rightArrowButton: {},
+  +   nextIconButton: {},
+    }}
+  />
+  ```
+
+- The `date` prop has been renamed `value` on  `MonthPicker` / `YearPicker`, `ClockPicker` and `CalendarPicker`.
+
+  ```diff
+  - <MonthPicker date={dayjs()} onChange={handleMonthChange} />
+  + <MonthPicker value={dayjs()} onChange={handleMonthChange} />
+
+  - <YearPicker date={dayjs()} onChange={handleYearChange} />
+  + <YearPicker value={dayjs()} onChange={handleYearChange} />
+
+  - <ClockPicker date={dayjs()} onChange={handleTimeChange} />
+  + <ClockPicker value={dayjs()} onChange={handleTimeChange} />
+
+  - <CalendarPicker date={dayjs()} onChange={handleDateChange} />
+  + <CalendarPicker value={dayjs()} onChange={handleDateChange} />
+  ```
+
+#### Changes
+
+- [CalendarPicker] Don't move to closest enabled date when `props.date` contains a disabled date (#6146) @flaviendelangle
+- [DateRangePicker] Switch to new month when changing the value from the outside (#6166) @flaviendelangle
+- [pickers] Add a `localeText` prop to all pickers to customize the translations (#6212) @flaviendelangle
+- [pickers] Add Finnish (fi-FI) locale to the pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Allow nested `LocalizationProvider` (#6011) @flaviendelangle
+- [pickers] Clean slots on `PickersArrowSwitcher` component (#5890) @flaviendelangle
+- [pickers] Fix invalid date error when decreasing `DateField` day (#6071) @alexfauquette
+- [pickers] Fix mobile section selection (#6207) @oliviertassinari
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [pickers] Improve error message when no adapter context is found (#6211) @flaviendelangle
+- [pickers] Remove `valueStr` from the field state (#6142) @flaviendelangle
+- [pickers] Remove remaining deprecated locale props (#6233) @flaviendelangle
+- [pickers] Rename the `date` prop `value` on `MonthPicker` / `YearPicker`, `ClockPicker` and `CalendarPicker` (#6128) @flaviendelangle
+- [pickers] Rename the `onClose` prop of  `PickersPopper` `onDismiss` to simplify typing (#6155) @flaviendelangle
+- [pickers] Support the `sx` prop on all public component with a root HTML elements (#5944) @flaviendelangle
+- [pickers] Unify `PickersMonth` and `PickersYear` behaviors (#6034) @flaviendelangle
+- [pickers] Use `shouldDisableMonth` and `shouldDisableYear` for date validation (#6066) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
+
+### Docs
+
+- [docs] Add automatic vale check (#5429) @alexfauquette
+- [docs] Add Pro logo in "column ordering" link (#6127) @alexfauquette
+- [docs] Fix 301 link (#6239) @oliviertassinari
+- [docs] Fix broken link (#6163) @alexfauquette
+- [docs] Fix broken links (#6101) @alexfauquette
+- [docs] Fix demonstration date to avoid hydration errors (#6032) @alexfauquette
+- [docs] Fix hidden popper in restore state example (#6191) @heyfirst
+- [docs] Fix invalid links causing 404 & 301 errors (#6105) @oliviertassinari
+- [docs] Fix npm repository url in the pickers `package.json` (#6172) @oliviertassinari
+- [docs] Fix typo in linked issue (#6162) @flaviendelangle
+- [docs] Import `generateUtilityClass` from `@mui/utils` (#6216) @michaldudak
+- [docs] Improve Upgrade plan docs (#6018) @oliviertassinari
+- [docs] Link the OpenSSF Best Practices card (#6171) @oliviertassinari
+
+### Core
+
+- [core] Add `v5.17.3` changelog to next branch (#6250) @flaviendelangle
+- [core] Add link to the security page on the `README` (#6073) @oliviertassinari
+- [core] Fix scroll restoration in the docs (#5938) @oliviertassinari
+- [core] Remove the Storybook (#6099) @flaviendelangle
+- [core] Tag release as `next` in NPM (#6256) @m4theushw
+- [core] Update monorepo (#6180) @flaviendelangle
+- [core] Use the `next` branch for Prettier (#6097) @flaviendelangle
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+- [test] Fix logic to skip column pinning tests (#6133) @m4theushw
+- [test] Hide the date on the print regression test (#6120) @flaviendelangle
+- [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
+- [website] Improve security header @oliviertassinari
+
+## v5.17.4
+
+_Sep 22, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6230) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.4` / `@mui/x-data-grid-pro@v5.17.4` / `@mui/x-data-grid-premium@v5.17.4`
+
+#### Changes
+
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+
+### `@mui/x-date-pickers@v5.0.3` / `@mui/x-date-pickers-pro@v5.0.3`
+
+#### Changes
+
+- [pickers] Add Finnish (fi-FI) locale to pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
+
+### Docs
+
+- [docs] Fix 301 link (#6239) @oliviertassinari
+
+### Core
+
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+
 ## 5.17.3
 
 _Sep 16, 2022_
@@ -1406,7 +1615,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [DataGrid] Stop checkbox ripple on blur (#3835) @m4theushw
 - [DataGrid] Stop calling `onRowClick` when clicking in cells with interactive elements (#3929) @m4theushw
 - [DataGrid] Use only `headerName` when available to search column (#3959) @pkratz
-- [DataGrid] Use the bundling scripts as the packages published by the [https://github.com/mui/material-ui](material-ui) repository (#3965) @flaviendelangle
+- [DataGrid] Use the bundling scripts as the packages published by the [material-ui](https://github.com/mui/material-ui) repository (#3965) @flaviendelangle
 - [DataGridPro] Add `unstable_setRowHeight` method to `apiRef` (#3751) @cherniavskii
 - [DataGridPro] Always export the `pageSize` and `page` when it has been initialized or is being controlled (#3908) @flaviendelangle
 - [DataGridPro] Disable export for detail panel column (#4057) @gustavhagland
@@ -4051,7 +4260,7 @@ Big thanks to the 7 contributors who made this release possible. Here are some h
 
 - 💄 Release the cell editing feature (#1287) @dtassone
 
-  This is the first release of the Cell editing feature. You can find the documentation [following this link](https://mui.com/x/react-data-grid/editing/#cell-editing). We have spent the last three months working on it.
+  This is the first release of the Cell editing feature. You can find the documentation [following this link](https://mui.com/x/react-data-grid/editing/). We have spent the last three months working on it.
 
   ![cell edit](https://user-images.githubusercontent.com/3165635/115632215-87994700-a307-11eb-91d9-9f5537df0911.gif)
 
@@ -4661,7 +4870,7 @@ _Dec 9, 2020_
 
 Big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
-- 🔍 Add a new data grid [density selector](https://mui.com/x/react-data-grid/rendering/#density) feature (#606) @DanailH.
+- 🔍 Add a new data grid [density selector](https://mui.com/x/react-data-grid/accessibility/#density) feature (#606) @DanailH.
 - 💄 A first iteration on the data grid's toolbar.
 - 🧪 Continue the iteration on the data grid filtering feature, soon to be released @dtassone.
 

package/CalendarPicker/CalendarPicker.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
 import { ExportedDayPickerProps } from './DayPicker';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { ExportedCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from './PickersCalendarHeader';
@@ -14,6 +16,10 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
     autoFocus?: boolean;
     className?: string;
     classes?: Partial<CalendarPickerClasses>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * Overrideable components.
      * @default {}
@@ -24,7 +30,7 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
      * @default {}
      */
     componentsProps?: Partial<CalendarPickerSlotsComponentsProps>;
-    date: TDate | null;
+    value: TDate | null;
     /**
      * Default calendar month displayed when `value={null}`.
      */
@@ -89,7 +95,7 @@ export interface CalendarPickerProps<TDate> extends ExportedDayPickerProps<TDate
     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' | 'onFocusedViewChange' | 'focusedView'>;
+export declare type ExportedCalendarPickerProps<TDate> = Omit<CalendarPickerProps<TDate>, 'value' | '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,6 +1,4 @@
-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", "focusedView", "onFocusedViewChange", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -68,9 +66,7 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
   name: 'MuiCalendarPicker',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer
-})({
-  overflowY: 'auto'
-});
+})({});
 
 /**
  *
@@ -86,11 +82,10 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
   const utils = useUtils();
   const id = useId();
   const props = useCalendarPickerDefaultizedProps(inProps, 'MuiCalendarPicker');
-
   const {
     autoFocus,
     onViewChange,
-    date,
+    value,
     disableFuture,
     disablePast,
     defaultCalendarMonth,
@@ -111,10 +106,16 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     maxDate,
     disableHighlightToday,
     focusedView,
-    onFocusedViewChange
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+    onFocusedViewChange,
+    showDaysOutsideCurrentMonth,
+    dayOfWeekFormatter,
+    renderDay,
+    components,
+    componentsProps,
+    loading,
+    renderLoading,
+    sx
+  } = props;
   const {
     openView,
     setOpenView,
@@ -134,7 +135,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     isDateDisabled,
     onMonthSwitchingAnimationEnd
   } = useCalendarState({
-    date,
+    value,
     defaultCalendarMonth,
     reduceAnimations,
     onMonthChange,
@@ -144,7 +145,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     disablePast,
     disableFuture
   });
-  const handleDateMonthChange = React.useCallback((newDate, selectionState) => {
+  const handleDateMonthChange = React.useCallback(newDate => {
     const startOfMonth = utils.startOfMonth(newDate);
     const endOfMonth = utils.endOfMonth(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -158,7 +159,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     }) : newDate;
 
     if (closestEnabledDate) {
-      onChange(closestEnabledDate, selectionState);
+      onChange(closestEnabledDate, 'finish');
       onMonthChange == null ? void 0 : onMonthChange(startOfMonth);
     } else {
       openNext();
@@ -167,7 +168,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
 
     changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onMonthChange, changeMonth, openNext, utils]);
-  const handleDateYearChange = React.useCallback((newDate, selectionState) => {
+  const handleDateYearChange = React.useCallback(newDate => {
     const startOfYear = utils.startOfYear(newDate);
     const endOfYear = utils.endOfYear(newDate);
     const closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -181,7 +182,7 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     }) : newDate;
 
     if (closestEnabledDate) {
-      onChange(closestEnabledDate, selectionState);
+      onChange(closestEnabledDate, 'finish');
       onYearChange == null ? void 0 : onYearChange(closestEnabledDate);
     } else {
       openNext();
@@ -191,35 +192,18 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onYearChange, openNext, utils, changeMonth]);
   const onSelectedDayChange = React.useCallback((day, isFinish) => {
-    if (date && day) {
+    if (value && day) {
       // If there is a date already selected, then we want to keep its time
-      return onChange(utils.mergeDateAndTime(day, date), isFinish);
+      return onChange(utils.mergeDateAndTime(day, value), isFinish);
     }
 
     return onChange(day, isFinish);
-  }, [utils, date, onChange]);
-  React.useEffect(() => {
-    if (date && isDateDisabled(date)) {
-      const closestEnabledDate = findClosestEnabledDate({
-        utils,
-        date,
-        minDate,
-        maxDate,
-        disablePast,
-        disableFuture,
-        isDateDisabled
-      });
-      onChange(closestEnabledDate, 'partial');
-    } // This call is too expensive to run it on each prop change.
-    // So just ensure that we are not rendering disabled as selected on mount.
-
-  }, []); // eslint-disable-line
-
+  }, [utils, value, onChange]);
   React.useEffect(() => {
-    if (date) {
-      changeMonth(date);
+    if (value != null && utils.isValid(value)) {
+      changeMonth(value);
     }
-  }, [date]); // eslint-disable-line
+  }, [value]); // eslint-disable-line
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
@@ -230,8 +214,8 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
     minDate
   }; // When disabled, limit the view to the selected date
 
-  const minDateWithDisabled = disabled && date || minDate;
-  const maxDateWithDisabled = disabled && date || maxDate;
+  const minDateWithDisabled = disabled && value || minDate;
+  const maxDateWithDisabled = disabled && value || maxDate;
   const commonViewProps = {
     disableHighlightToday,
     readOnly,
@@ -259,11 +243,16 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       setInternalFocusedView(prevView => prevView === eventView ? null : prevView);
     }
   });
+  React.useEffect(() => {
+    // Set focus to the button when switching from a view to another
+    handleFocusedViewChange(openView)(true);
+  }, [openView, handleFocusedViewChange]);
   return /*#__PURE__*/_jsxs(CalendarPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, _extends({}, other, {
+    sx: sx,
+    children: [/*#__PURE__*/_jsx(PickersCalendarHeader, {
       views: views,
       openView: openView,
       currentMonth: calendarState.currentMonth,
@@ -278,16 +267,18 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
       disablePast: disablePast,
       disableFuture: disableFuture,
       reduceAnimations: reduceAnimations,
-      labelId: gridLabelId
-    })), /*#__PURE__*/_jsx(CalendarPickerViewTransitionContainer, {
+      labelId: gridLabelId,
+      components: components,
+      componentsProps: componentsProps
+    }), /*#__PURE__*/_jsx(CalendarPickerViewTransitionContainer, {
       reduceAnimations: reduceAnimations,
       className: classes.viewTransitionContainer,
       transKey: openView,
       ownerState: ownerState,
       children: /*#__PURE__*/_jsxs("div", {
-        children: [openView === 'year' && /*#__PURE__*/_jsx(YearPicker, _extends({}, other, baseDateValidationProps, commonViewProps, {
+        children: [openView === 'year' && /*#__PURE__*/_jsx(YearPicker, _extends({}, baseDateValidationProps, commonViewProps, {
           autoFocus: autoFocus,
-          date: date,
+          value: value,
           onChange: handleDateYearChange,
           shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
@@ -296,21 +287,28 @@ export const CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPic
           autoFocus: autoFocus,
           hasFocus: hasFocus,
           className: className,
-          date: date,
+          value: value,
           onChange: handleDateMonthChange,
           shouldDisableMonth: shouldDisableMonth,
           onFocusedViewChange: handleFocusedViewChange('month')
-        })), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, other, calendarState, baseDateValidationProps, commonViewProps, {
+        })), openView === 'day' && /*#__PURE__*/_jsx(DayPicker, _extends({}, calendarState, baseDateValidationProps, commonViewProps, {
           autoFocus: autoFocus,
           onMonthSwitchingAnimationEnd: onMonthSwitchingAnimationEnd,
           onFocusedDayChange: changeFocusedDay,
           reduceAnimations: reduceAnimations,
-          selectedDays: [date],
+          selectedDays: [value],
           onSelectedDaysChange: onSelectedDayChange,
           shouldDisableDate: shouldDisableDate,
+          shouldDisableMonth: shouldDisableMonth,
+          shouldDisableYear: shouldDisableYear,
           hasFocus: hasFocus,
           onFocusedViewChange: handleFocusedViewChange('day'),
-          gridLabelId: gridLabelId
+          gridLabelId: gridLabelId,
+          showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+          dayOfWeekFormatter: dayOfWeekFormatter,
+          renderDay: renderDay,
+          loading: loading,
+          renderLoading: renderLoading
         }))]
       })
     })]
@@ -336,7 +334,6 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    * @default {}
    */
   componentsProps: PropTypes.object,
-  date: PropTypes.any,
 
   /**
    * Formats the day of week displayed in the calendar header.
@@ -376,20 +373,6 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
   disablePast: PropTypes.bool,
   focusedView: PropTypes.oneOf(['day', 'month', 'year']),
 
-  /**
-   * 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,
-
   /**
    * If `true` renders `LoadingComponent` in calendar instead of calendar view.
    * Can be used to preload information and show it in calendar.
@@ -469,12 +452,6 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    */
   renderLoading: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -507,6 +484,12 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
 
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.any,
+
   /**
    * Controlled open view.
    */

package/CalendarPicker/DayPicker.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PickersDayProps } from '../PickersDay/PickersDay';
 import { PickerOnChangeFn } from '../internals/hooks/useViews';
 import { SlideDirection, SlideTransitionProps } from './PickersSlideTransition';
-import { BaseDateValidationProps, DayValidationProps } from '../internals/hooks/validation/models';
+import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
 import { DayPickerClasses } from './dayPickerClasses';
 export interface ExportedDayPickerProps<TDate> extends Pick<PickersDayProps<TDate>, 'disableHighlightToday' | 'showDaysOutsideCurrentMonth'> {
     /**
@@ -34,7 +34,7 @@ export interface ExportedDayPickerProps<TDate> extends Pick<PickersDayProps<TDat
      */
     dayOfWeekFormatter?: (day: string) => string;
 }
-export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate>, DayValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
+export interface DayPickerProps<TDate> extends ExportedDayPickerProps<TDate>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
     autoFocus?: boolean;
     className?: string;
     currentMonth: TDate;

package/CalendarPicker/DayPicker.js

@@ -8,7 +8,7 @@ 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 { useIsDateDisabled } from '../internals/hooks/validation/useDateValidation';
 import { findClosestEnabledDate } from '../internals/utils/date-utils';
 import { getDayPickerUtilityClass } from './dayPickerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -128,13 +128,17 @@ export function DayPicker(inProps) {
     minDate,
     maxDate,
     shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
     dayOfWeekFormatter = defaultDayOfWeekFormatter,
     hasFocus,
     onFocusedViewChange,
     gridLabelId
   } = props;
-  const isDateDisabled = useIsDayDisabled({
+  const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
     minDate,
     maxDate,
     disablePast,

package/CalendarPicker/PickersCalendarHeader.d.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import IconButton from '@mui/material/IconButton';
 import { SlideDirection } from './PickersSlideTransition';
 import { ExportedDateValidationProps } from '../internals/hooks/validation/useDateValidation';
-import { ExportedArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
+import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
 import { CalendarPickerView } from '../internals/models';
 import { PickersCalendarHeaderClasses } from './pickersCalendarHeaderClasses';
-export declare type ExportedCalendarHeaderProps<TDate> = Pick<PickersCalendarHeaderProps<TDate>, 'getViewSwitchingButtonText' | 'leftArrowButtonText' | 'rightArrowButtonText' | 'classes'>;
+export declare type ExportedCalendarHeaderProps<TDate> = Pick<PickersCalendarHeaderProps<TDate>, 'classes'>;
 export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent {
     /**
      * Button displayed to switch between different calendar views.
@@ -23,7 +23,7 @@ export interface PickersCalendarHeaderComponentsPropsOverrides {
 export interface PickersCalendarHeaderSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps {
     switchViewButton: React.ComponentPropsWithRef<typeof IconButton> & PickersCalendarHeaderComponentsPropsOverrides;
 }
-export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcherProps, Omit<ExportedDateValidationProps<TDate>, 'shouldDisableDate'> {
+export interface PickersCalendarHeaderProps<TDate> extends ExportedPickersArrowSwitcherProps, Omit<ExportedDateValidationProps<TDate>, 'shouldDisableDate'> {
     /**
      * Overrideable components.
      * @default {}
@@ -37,13 +37,6 @@ export interface PickersCalendarHeaderProps<TDate> extends ExportedArrowSwitcher
     currentMonth: TDate;
     disabled?: boolean;
     views: readonly CalendarPickerView[];
-    /**
-     * 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?: (currentView: CalendarPickerView) => string;
     onMonthChange: (date: TDate, slideDirection: SlideDirection) => void;
     openView: CalendarPickerView;
     reduceAnimations: boolean;