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

package/internals/hooks/useField/useField.utils.js

@@ -156,12 +156,20 @@ export const adjustInvalidDateSectionValue = (utils, section, keyCode) => {
 
         if (shouldSetAbsolute) {
           if (delta > 0 || isEnd) {
-            newDate = utils.endOfMonth(today);
-          } else {
             newDate = utils.startOfMonth(today);
+          } else {
+            newDate = utils.endOfMonth(today);
           }
         } else {
           newDate = utils.addDays(utils.parse(section.value, section.formatValue), delta);
+
+          if (!utils.isSameMonth(newDate, today)) {
+            if (delta > 0) {
+              newDate = utils.startOfMonth(today);
+            } else {
+              newDate = utils.endOfMonth(today);
+            }
+          }
         }
 
         return utils.formatByString(newDate, section.formatValue);

package/internals/hooks/useUtils.d.ts

@@ -1,9 +1,12 @@
 import { MuiPickersAdapterContextValue } from '../../LocalizationProvider/LocalizationProvider';
-export declare const useLocalizationContext: <T>() => MuiPickersAdapterContextValue<T>;
+import { PickersLocaleText } from '../../locales/utils/pickersLocaleTextApi';
+export declare const useLocalizationContext: <TDate>() => Omit<MuiPickersAdapterContextValue<TDate>, "localeText"> & {
+    localeText: PickersLocaleText<TDate>;
+};
 export declare const useUtils: <T>() => import("..").MuiPickersAdapter<T>;
 export declare const useDefaultDates: <T>() => {
     minDate: T;
     maxDate: T;
 };
-export declare const useLocaleText: <T>() => import("../..").PickersLocaleText<T>;
+export declare const useLocaleText: <T>() => PickersLocaleText<T>;
 export declare const useNow: <TDate>() => TDate;

package/internals/hooks/useUtils.js

@@ -1,13 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { MuiPickersAdapterContext } from '../../LocalizationProvider/LocalizationProvider';
+import { DEFAULT_LOCALE } from '../../locales/enUS';
 export const useLocalizationContext = () => {
   const localization = React.useContext(MuiPickersAdapterContext);
 
   if (localization === null) {
-    throw new Error('MUI: Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.');
+    throw new Error(['MUI: Can not find the date and time pickers localization context.', 'It looks like you forgot to wrap your component in LocalizationProvider.', 'This can also happen if you are bundling multiple versions of the `@mui/x-date-pickers` package'].join('\n'));
   }
 
-  return localization;
+  if (localization.utils === null) {
+    throw new Error(['MUI: Can not find the date and time pickers adapter from its localization context.', 'It looks like you forgot to pass a `dateAdapter` to your LocalizationProvider.'].join('\n'));
+  }
+
+  const localeText = React.useMemo(() => _extends({}, DEFAULT_LOCALE, localization.localeText), [localization.localeText]);
+  return _extends({}, localization, {
+    localeText
+  });
 };
 export const useUtils = () => useLocalizationContext().utils;
 export const useDefaultDates = () => useLocalizationContext().defaultDates;

package/internals/hooks/validation/useDateValidation.d.ts

@@ -1,11 +1,11 @@
 import { ValidationProps, Validator } from './useValidation';
-import { BaseDateValidationProps, DayValidationProps } from './models';
+import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from './models';
 export interface ExportedDateValidationProps<TDate> extends DayValidationProps<TDate>, BaseDateValidationProps<TDate> {
 }
-export interface DateValidationProps<TInputDate, TDate> extends ValidationProps<DateValidationError, TInputDate | null>, DayValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
+export interface DateValidationProps<TInputDate, TDate> extends ValidationProps<DateValidationError, TInputDate | null>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, Required<BaseDateValidationProps<TDate>> {
 }
-export declare type DateValidationError = 'invalidDate' | 'shouldDisableDate' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | null;
+export declare type DateValidationError = 'invalidDate' | 'shouldDisableDate' | 'shouldDisableMonth' | 'shouldDisableYear' | 'disableFuture' | 'disablePast' | 'minDate' | 'maxDate' | null;
 export declare const validateDate: Validator<any, DateValidationProps<any, any>>;
-export declare const useIsDayDisabled: <TDate>({ shouldDisableDate, minDate, maxDate, disableFuture, disablePast, }: DayValidationProps<TDate> & Required<BaseDateValidationProps<TDate>>) => (day: TDate | null) => boolean;
+export declare const useIsDateDisabled: <TDate>({ shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast, }: Omit<DateValidationProps<any, TDate>, keyof ValidationProps<any, any>>) => (day: TDate | null) => boolean;
 export declare const isSameDateError: (a: DateValidationError, b: DateValidationError) => boolean;
 export declare const useDateValidation: <TInputDate, TDate>(props: DateValidationProps<TInputDate, TDate>) => DateValidationError;

package/internals/hooks/validation/useDateValidation.js

@@ -23,6 +23,12 @@ export const validateDate = ({
     case Boolean(props.shouldDisableDate && props.shouldDisableDate(date)):
       return 'shouldDisableDate';
 
+    case Boolean(props.shouldDisableMonth && props.shouldDisableMonth(date)):
+      return 'shouldDisableMonth';
+
+    case Boolean(props.shouldDisableYear && props.shouldDisableYear(date)):
+      return 'shouldDisableYear';
+
     case Boolean(props.disableFuture && adapter.utils.isAfterDay(date, now)):
       return 'disableFuture';
 
@@ -39,8 +45,10 @@ export const validateDate = ({
       return null;
   }
 };
-export const useIsDayDisabled = ({
+export const useIsDateDisabled = ({
   shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
   minDate,
   maxDate,
   disableFuture,
@@ -52,12 +60,14 @@ export const useIsDayDisabled = ({
     value: day,
     props: {
       shouldDisableDate,
+      shouldDisableMonth,
+      shouldDisableYear,
       minDate,
       maxDate,
       disableFuture,
       disablePast
     }
-  }) !== null, [adapter, shouldDisableDate, minDate, maxDate, disableFuture, disablePast]);
+  }) !== null, [adapter, shouldDisableDate, shouldDisableMonth, shouldDisableYear, minDate, maxDate, disableFuture, disablePast]);
 };
 export const isSameDateError = (a, b) => a === b;
 export const useDateValidation = props => useValidation(props, validateDate, isSameDateError);

package/internals/index.d.ts

@@ -6,8 +6,8 @@ export { MobileKeyboardInputView } from './components/CalendarOrClockPicker/Cale
 export type { CalendarOrClockPickerProps } from './components/CalendarOrClockPicker/CalendarOrClockPicker';
 export { calendarOrClockPickerClasses } from './components/CalendarOrClockPicker/calendarOrClockPickerClasses';
 export type { CalendarOrClockPickerClassKey, CalendarOrClockPickerClasses, } from './components/CalendarOrClockPicker/calendarOrClockPickerClasses';
-export { PickersArrowSwitcher } from './components/PickersArrowSwitcher';
-export type { ExportedArrowSwitcherProps } from './components/PickersArrowSwitcher';
+export { PickersArrowSwitcher } from './components/PickersArrowSwitcher/PickersArrowSwitcher';
+export type { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, } from './components/PickersArrowSwitcher';
 export { PickerStaticWrapper } from './components/PickerStaticWrapper/PickerStaticWrapper';
 export type { PickerStaticWrapperProps } from './components/PickerStaticWrapper/PickerStaticWrapper';
 export type { PickersStaticWrapperSlotsComponent, PickersStaticWrapperSlotsComponentsProps, } from './components/PickerStaticWrapper/PickerStaticWrapper';
@@ -21,8 +21,8 @@ export type { PickersToolbarButtonClassKey, PickersToolbarButtonClasses, } from
 export type { PickersToolbarTextProps } from './components/PickersToolbarText';
 export { pickersToolbarTextClasses } from './components/pickersToolbarTextClasses';
 export type { PickersToolbarTextClassKey, PickersToolbarTextClasses, } from './components/pickersToolbarTextClasses';
-export { pickersArrowSwitcherClasses } from './components/pickersArrowSwitcherClasses';
-export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses, } from './components/pickersArrowSwitcherClasses';
+export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/pickersArrowSwitcherClasses';
+export type { PickersArrowSwitcherClassKey, PickersArrowSwitcherClasses, } from './components/PickersArrowSwitcher/pickersArrowSwitcherClasses';
 export type { PickerPopperProps } from './components/PickersPopper';
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export type { PickersPopperClassKey, PickersPopperClasses, } from './components/pickersPopperClasses';
@@ -38,7 +38,7 @@ export { useMaskedInput } from './hooks/useMaskedInput';
 export { usePickerState } from './hooks/usePickerState';
 export type { PickerStateProps, PickerStatePickerProps } from './hooks/usePickerState';
 export type { PickerStateValueManager, PickerSelectionState } from './hooks/usePickerState';
-export { useDefaultDates, useUtils, useLocaleText } from './hooks/useUtils';
+export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText } from './hooks/useUtils';
 export type { BaseDateValidationProps, DayValidationProps } from './hooks/validation/models';
 export { useValidation } from './hooks/validation/useValidation';
 export type { ValidationProps, Validator } from './hooks/validation/useValidation';

package/internals/index.js

@@ -2,13 +2,13 @@ export { DesktopTooltipWrapper } from './components/wrappers/DesktopTooltipWrapp
 export { MobileWrapper } from './components/wrappers/MobileWrapper';
 export { MobileKeyboardInputView } from './components/CalendarOrClockPicker/CalendarOrClockPicker';
 export { calendarOrClockPickerClasses } from './components/CalendarOrClockPicker/calendarOrClockPickerClasses';
-export { PickersArrowSwitcher } from './components/PickersArrowSwitcher';
+export { PickersArrowSwitcher } from './components/PickersArrowSwitcher/PickersArrowSwitcher';
 export { PickerStaticWrapper } from './components/PickerStaticWrapper/PickerStaticWrapper';
 export { PickersToolbar } from './components/PickersToolbar';
 export { pickersToolbarClasses } from './components/pickersToolbarClasses';
 export { pickersToolbarButtonClasses } from './components/pickersToolbarButtonClasses';
 export { pickersToolbarTextClasses } from './components/pickersToolbarTextClasses';
-export { pickersArrowSwitcherClasses } from './components/pickersArrowSwitcherClasses';
+export { pickersArrowSwitcherClasses } from './components/PickersArrowSwitcher/pickersArrowSwitcherClasses';
 export { pickersPopperClasses } from './components/pickersPopperClasses';
 export { PickersToolbarButton } from './components/PickersToolbarButton';
 export { pickerStaticWrapperClasses } from './components/PickerStaticWrapper/pickerStaticWrapperClasses';
@@ -16,7 +16,7 @@ export { WrapperVariantContext } from './components/wrappers/WrapperVariantConte
 export { DAY_MARGIN } from './constants/dimensions';
 export { useMaskedInput } from './hooks/useMaskedInput';
 export { usePickerState } from './hooks/usePickerState';
-export { useDefaultDates, useUtils, useLocaleText } from './hooks/useUtils';
+export { useLocalizationContext, useDefaultDates, useUtils, useLocaleText } from './hooks/useUtils';
 export { useValidation } from './hooks/validation/useValidation';
 export { validateDate } from './hooks/validation/useDateValidation';
 export { usePreviousMonthDisabled, useNextMonthDisabled } from './hooks/date-helpers-hooks';

package/internals/models/muiPickersAdapter.d.ts

@@ -1,10 +1,15 @@
 import { IUtils } from '@date-io/core/IUtils';
-export declare type MuiPickersAdapter<TDate> = IUtils<TDate>;
-export declare type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
-export declare type MuiFormatTokenMap = {
-    [formatToken: string]: MuiDateSectionName;
-};
+
+// TODO: Maybe we should add the same constraint.
+// @ts-expect-error TDate in our codebase does not have the `ExtendableDateType` constraint.
+export type MuiPickersAdapter<TDate> = IUtils<TDate>;
+
+export type MuiDateSectionName = 'day' | 'month' | 'year' | 'hour' | 'minute' | 'second' | 'am-pm';
+
+export type MuiFormatTokenMap = { [formatToken: string]: MuiDateSectionName };
+
 export interface MuiPickerFieldAdapter<TDate> extends MuiPickersAdapter<TDate> {
-    formatTokenMap: MuiFormatTokenMap;
-    expandFormat: (format: string) => string;
+  formatTokenMap: MuiFormatTokenMap;
+
+  expandFormat: (format: string) => string;
 }

package/internals/models/props/baseToolbarProps.d.ts

@@ -7,14 +7,6 @@ import { PickerStatePickerProps } from '../../hooks/usePickerState';
 export interface BaseToolbarProps<TDate, TValue> extends ExportedCalendarPickerProps<TDate>, ExportedClockPickerProps<TDate>, Omit<PickerStatePickerProps<TValue>, 'onDateChange'> {
     ampmInClock?: boolean;
     dateRangeIcon?: React.ReactNode;
-    /**
-     * Text for aria label of the button switching between input and interactive view.
-     * @deprecated Use the translation key `inputModeToggleButtonAriaLabel` instead, see https://mui.com/x/react-date-pickers/localization
-     * @param {boolean} isKeyboardInputOpen Indicates if the interface is the keyboard input.
-     * @param {'calendar' | 'clock' } viewType Indicates if the interface is about a date or a time.
-     * @returns {string} The arial label
-     */
-    getMobileKeyboardInputViewButtonText?: (isKeyboardInputOpen: boolean, viewType: 'calendar' | 'clock') => string;
     isLandscape: boolean;
     onChange: PickerOnChangeFn<TDate>;
     openView: CalendarOrClockPickerView;

package/internals/models/props/staticPickerProps.d.ts

@@ -1,9 +1,3 @@
 import { BasePickerProps } from './basePickerProps';
-import { PickerStaticWrapperProps } from '../../components/PickerStaticWrapper';
-export declare type StaticPickerProps<BaseProps extends BasePickerProps<any, any>> = Omit<BaseProps, 'open' | 'onOpen' | 'onClose'> & {
-    /**
-     * Force static wrapper inner components to be rendered in mobile or desktop mode.
-     * @default 'mobile'
-     */
-    displayStaticWrapperAs?: PickerStaticWrapperProps['displayStaticWrapperAs'];
-};
+import { ExportedPickerStaticWrapperProps } from '../../components/PickerStaticWrapper';
+export declare type StaticPickerProps<TDate, BaseProps extends BasePickerProps<any, any>> = Omit<BaseProps, 'open' | 'onOpen' | 'onClose'> & ExportedPickerStaticWrapperProps<TDate>;

package/legacy/CalendarPicker/CalendarPicker.js

@@ -1,7 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _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';
@@ -73,9 +71,7 @@ var CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.viewTransitionContainer;
   }
-})({
-  overflowY: 'auto'
-});
+})({});
 
 /**
  *
@@ -91,10 +87,9 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
   var utils = useUtils();
   var id = useId();
   var props = useCalendarPickerDefaultizedProps(inProps, 'MuiCalendarPicker');
-
   var autoFocus = props.autoFocus,
       onViewChange = props.onViewChange,
-      date = props.date,
+      value = props.value,
       disableFuture = props.disableFuture,
       disablePast = props.disablePast,
       defaultCalendarMonth = props.defaultCalendarMonth,
@@ -116,8 +111,14 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
       disableHighlightToday = props.disableHighlightToday,
       focusedView = props.focusedView,
       onFocusedViewChange = props.onFocusedViewChange,
-      providedClasses = props.classes,
-      other = _objectWithoutProperties(props, _excluded);
+      showDaysOutsideCurrentMonth = props.showDaysOutsideCurrentMonth,
+      dayOfWeekFormatter = props.dayOfWeekFormatter,
+      renderDay = props.renderDay,
+      components = props.components,
+      componentsProps = props.componentsProps,
+      loading = props.loading,
+      renderLoading = props.renderLoading,
+      sx = props.sx;
 
   var _useViews = useViews({
     view: view,
@@ -131,7 +132,7 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
       openNext = _useViews.openNext;
 
   var _useCalendarState = useCalendarState({
-    date: date,
+    value: value,
     defaultCalendarMonth: defaultCalendarMonth,
     reduceAnimations: reduceAnimations,
     onMonthChange: onMonthChange,
@@ -148,7 +149,7 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
       isDateDisabled = _useCalendarState.isDateDisabled,
       onMonthSwitchingAnimationEnd = _useCalendarState.onMonthSwitchingAnimationEnd;
 
-  var handleDateMonthChange = React.useCallback(function (newDate, selectionState) {
+  var handleDateMonthChange = React.useCallback(function (newDate) {
     var startOfMonth = utils.startOfMonth(newDate);
     var endOfMonth = utils.endOfMonth(newDate);
     var closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -162,7 +163,7 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
     }) : newDate;
 
     if (closestEnabledDate) {
-      onChange(closestEnabledDate, selectionState);
+      onChange(closestEnabledDate, 'finish');
       onMonthChange == null ? void 0 : onMonthChange(startOfMonth);
     } else {
       openNext();
@@ -171,7 +172,7 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
 
     changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onMonthChange, changeMonth, openNext, utils]);
-  var handleDateYearChange = React.useCallback(function (newDate, selectionState) {
+  var handleDateYearChange = React.useCallback(function (newDate) {
     var startOfYear = utils.startOfYear(newDate);
     var endOfYear = utils.endOfYear(newDate);
     var closestEnabledDate = isDateDisabled(newDate) ? findClosestEnabledDate({
@@ -185,7 +186,7 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
     }) : newDate;
 
     if (closestEnabledDate) {
-      onChange(closestEnabledDate, selectionState);
+      onChange(closestEnabledDate, 'finish');
       onYearChange == null ? void 0 : onYearChange(closestEnabledDate);
     } else {
       openNext();
@@ -195,35 +196,18 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
     changeFocusedDay(closestEnabledDate, true);
   }, [changeFocusedDay, disableFuture, disablePast, isDateDisabled, maxDate, minDate, onChange, onYearChange, openNext, utils, changeMonth]);
   var onSelectedDayChange = React.useCallback(function (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]);
+  }, [utils, value, onChange]);
   React.useEffect(function () {
-    if (date && isDateDisabled(date)) {
-      var closestEnabledDate = findClosestEnabledDate({
-        utils: utils,
-        date: date,
-        minDate: minDate,
-        maxDate: maxDate,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        isDateDisabled: 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
-
-  React.useEffect(function () {
-    if (date) {
-      changeMonth(date);
+    if (value != null && utils.isValid(value)) {
+      changeMonth(value);
     }
-  }, [date]); // eslint-disable-line
+  }, [value]); // eslint-disable-line
 
   var ownerState = props;
   var classes = useUtilityClasses(ownerState);
@@ -234,8 +218,8 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
     minDate: minDate
   }; // When disabled, limit the view to the selected date
 
-  var minDateWithDisabled = disabled && date || minDate;
-  var maxDateWithDisabled = disabled && date || maxDate;
+  var minDateWithDisabled = disabled && value || minDate;
+  var maxDateWithDisabled = disabled && value || maxDate;
   var commonViewProps = {
     disableHighlightToday: disableHighlightToday,
     readOnly: readOnly,
@@ -272,11 +256,16 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
       }
     };
   });
+  React.useEffect(function () {
+    // 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,
@@ -293,16 +282,18 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
       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,
@@ -311,21 +302,28 @@ export var CalendarPicker = /*#__PURE__*/React.forwardRef(function CalendarPicke
           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
         }))]
       })
     })]
@@ -351,7 +349,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.
@@ -391,20 +388,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.
@@ -484,12 +467,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
@@ -522,6 +499,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/legacy/CalendarPicker/DayPicker.js

@@ -9,7 +9,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";
@@ -144,13 +144,17 @@ export function DayPicker(inProps) {
       minDate = props.minDate,
       maxDate = props.maxDate,
       shouldDisableDate = props.shouldDisableDate,
+      shouldDisableMonth = props.shouldDisableMonth,
+      shouldDisableYear = props.shouldDisableYear,
       _props$dayOfWeekForma = props.dayOfWeekFormatter,
       dayOfWeekFormatter = _props$dayOfWeekForma === void 0 ? defaultDayOfWeekFormatter : _props$dayOfWeekForma,
       hasFocus = props.hasFocus,
       onFocusedViewChange = props.onFocusedViewChange,
       gridLabelId = props.gridLabelId;
-  var isDateDisabled = useIsDayDisabled({
+  var isDateDisabled = useIsDateDisabled({
     shouldDisableDate: shouldDisableDate,
+    shouldDisableMonth: shouldDisableMonth,
+    shouldDisableYear: shouldDisableYear,
     minDate: minDate,
     maxDate: maxDate,
     disablePast: disablePast,

package/legacy/CalendarPicker/PickersCalendarHeader.js

@@ -9,7 +9,6 @@ import { PickersFadeTransitionGroup } from './PickersFadeTransitionGroup';
 import { ArrowDropDown } from '../internals/components/icons';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { usePreviousMonthDisabled, useNextMonthDisabled } from '../internals/hooks/date-helpers-hooks';
-import { buildDeprecatedPropsWarning } from '../internals/utils/warning';
 import { getPickersCalendarHeaderUtilityClass } from './pickersCalendarHeaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -97,7 +96,6 @@ var PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDown, {
     transform: 'rotate(180deg)'
   });
 });
-var deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translation are deprecated. See https://mui.com/x/react-date-pickers/localization for more information.');
 /**
  * @ignore - do not document.
  */
@@ -115,26 +113,15 @@ export function PickersCalendarHeader(inProps) {
       disabled = props.disabled,
       disableFuture = props.disableFuture,
       disablePast = props.disablePast,
-      getViewSwitchingButtonTextProp = props.getViewSwitchingButtonText,
-      leftArrowButtonTextProp = props.leftArrowButtonText,
       maxDate = props.maxDate,
       minDate = props.minDate,
       onMonthChange = props.onMonthChange,
       onViewChange = props.onViewChange,
       currentView = props.openView,
       reduceAnimations = props.reduceAnimations,
-      rightArrowButtonTextProp = props.rightArrowButtonText,
       views = props.views,
       labelId = props.labelId;
-  deprecatedPropsWarning({
-    leftArrowButtonText: leftArrowButtonTextProp,
-    rightArrowButtonText: rightArrowButtonTextProp,
-    getViewSwitchingButtonText: getViewSwitchingButtonTextProp
-  });
   var localeText = useLocaleText();
-  var leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.previousMonth;
-  var rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
-  var getViewSwitchingButtonText = getViewSwitchingButtonTextProp != null ? getViewSwitchingButtonTextProp : localeText.calendarViewSwitchingButtonAriaLabel;
   var utils = useUtils();
   var classes = useUtilityClasses(props);
   var switchViewButtonProps = componentsProps.switchViewButton || {};
@@ -200,7 +187,7 @@ export function PickersCalendarHeader(inProps) {
       }), views.length > 1 && !disabled && /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewButton, _extends({
         size: "small",
         as: components.SwitchViewButton,
-        "aria-label": getViewSwitchingButtonText(currentView),
+        "aria-label": localeText.calendarViewSwitchingButtonAriaLabel(currentView),
         className: classes.switchViewButton
       }, switchViewButtonProps, {
         children: /*#__PURE__*/_jsx(PickersCalendarHeaderSwitchViewIcon, {
@@ -212,14 +199,14 @@ export function PickersCalendarHeader(inProps) {
     }), /*#__PURE__*/_jsx(Fade, {
       in: currentView === 'day',
       children: /*#__PURE__*/_jsx(PickersArrowSwitcher, {
-        leftArrowButtonText: leftArrowButtonText,
-        rightArrowButtonText: rightArrowButtonText,
         components: components,
         componentsProps: componentsProps,
-        onLeftClick: selectPreviousMonth,
-        onRightClick: selectNextMonth,
-        isLeftDisabled: isPreviousMonthDisabled,
-        isRightDisabled: isNextMonthDisabled
+        onGoToPrevious: selectPreviousMonth,
+        isPreviousDisabled: isPreviousMonthDisabled,
+        previousLabel: localeText.previousMonth,
+        onGoToNext: selectNextMonth,
+        isNextDisabled: isNextMonthDisabled,
+        nextLabel: localeText.nextMonth
       })
     })]
   });