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

package/ClockPicker/ClockPicker.js

@@ -7,7 +7,6 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { Clock } from './Clock';
 import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
-import { buildDeprecatedPropsWarning } from '../internals/utils/warning';
 import { getHourNumbers, getMinutesNumbers } from './ClockNumbers';
 import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher';
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from '../internals/utils/time-utils';
@@ -46,14 +45,13 @@ const ClockPickerArrowSwitcher = styled(PickersArrowSwitcher, {
   right: 12,
   top: 15
 });
-const deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translation are deprecated. See https://mui.com/x/react-date-pickers/localization for more information.');
+
 /**
  *
  * API:
  *
  * - [ClockPicker API](https://mui.com/x/api/date-pickers/clock-picker/)
  */
-
 export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -65,17 +63,11 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
     autoFocus,
     components,
     componentsProps,
-    date,
+    value,
     disableIgnoringDatePartForTimeValidation,
-    getClockLabelText: getClockLabelTextProp,
-    getHoursClockNumberText: getHoursClockNumberTextProp,
-    getMinutesClockNumberText: getMinutesClockNumberTextProp,
-    getSecondsClockNumberText: getSecondsClockNumberTextProp,
-    leftArrowButtonText: leftArrowButtonTextProp,
     maxTime,
     minTime,
     minutesStep = 1,
-    rightArrowButtonText: rightArrowButtonTextProp,
     shouldDisableTime,
     showViewSwitcher,
     onChange,
@@ -84,24 +76,11 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
     openTo,
     onViewChange,
     className,
+    sx,
     disabled,
     readOnly
   } = props;
-  deprecatedPropsWarning({
-    leftArrowButtonText: leftArrowButtonTextProp,
-    rightArrowButtonText: rightArrowButtonTextProp,
-    getClockLabelText: getClockLabelTextProp,
-    getHoursClockNumberText: getHoursClockNumberTextProp,
-    getMinutesClockNumberText: getMinutesClockNumberTextProp,
-    getSecondsClockNumberText: getSecondsClockNumberTextProp
-  });
   const localeText = useLocaleText();
-  const leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.openPreviousView;
-  const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.openNextView;
-  const getClockLabelText = getClockLabelTextProp != null ? getClockLabelTextProp : localeText.clockLabelText;
-  const getHoursClockNumberText = getHoursClockNumberTextProp != null ? getHoursClockNumberTextProp : localeText.hoursClockNumberText;
-  const getMinutesClockNumberText = getMinutesClockNumberTextProp != null ? getMinutesClockNumberTextProp : localeText.minutesClockNumberText;
-  const getSecondsClockNumberText = getSecondsClockNumberTextProp != null ? getSecondsClockNumberTextProp : localeText.secondsClockNumberText;
   const {
     openView,
     setOpenView,
@@ -117,11 +96,11 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
   });
   const now = useNow();
   const utils = useUtils();
-  const dateOrMidnight = React.useMemo(() => date || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [date, now, utils]);
+  const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const {
     meridiemMode,
     handleMeridiemChange
-  } = useMeridiemMode(dateOrMidnight, ampm, handleChangeAndOpenNext);
+  } = useMeridiemMode(selectedTimeOrMidnight, ampm, handleChangeAndOpenNext);
   const isTimeDisabled = React.useCallback((rawValue, viewType) => {
     const isAfter = createIsAfterIgnoreDatePart(disableIgnoringDatePartForTimeValidation, utils);
 
@@ -140,13 +119,13 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
       return true;
     };
 
-    const isValidValue = (value, step = 1) => {
-      if (value % step !== 0) {
+    const isValidValue = (timeValue, step = 1) => {
+      if (timeValue % step !== 0) {
         return false;
       }
 
       if (shouldDisableTime) {
-        return !shouldDisableTime(value, viewType);
+        return !shouldDisableTime(timeValue, viewType);
       }
 
       return true;
@@ -155,19 +134,19 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
     switch (viewType) {
       case 'hours':
         {
-          const value = convertValueToMeridiem(rawValue, meridiemMode, ampm);
-          const dateWithNewHours = utils.setHours(dateOrMidnight, value);
+          const valueWithMeridiem = convertValueToMeridiem(rawValue, meridiemMode, ampm);
+          const dateWithNewHours = utils.setHours(selectedTimeOrMidnight, valueWithMeridiem);
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
             start,
             end
-          }) || !isValidValue(value);
+          }) || !isValidValue(valueWithMeridiem);
         }
 
       case 'minutes':
         {
-          const dateWithNewMinutes = utils.setMinutes(dateOrMidnight, rawValue);
+          const dateWithNewMinutes = utils.setMinutes(selectedTimeOrMidnight, rawValue);
           const start = utils.setSeconds(dateWithNewMinutes, 0);
           const end = utils.setSeconds(dateWithNewMinutes, 59);
           return !containsValidTime({
@@ -178,7 +157,7 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
 
       case 'seconds':
         {
-          const dateWithNewSeconds = utils.setSeconds(dateOrMidnight, rawValue);
+          const dateWithNewSeconds = utils.setSeconds(selectedTimeOrMidnight, rawValue);
           const start = dateWithNewSeconds;
           const end = dateWithNewSeconds;
           return !containsValidTime({
@@ -190,27 +169,27 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
       default:
         throw new Error('not supported');
     }
-  }, [ampm, dateOrMidnight, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils]);
+  }, [ampm, selectedTimeOrMidnight, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils]);
   const selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (openView) {
       case 'hours':
         {
-          const handleHoursChange = (value, isFinish) => {
-            const valueWithMeridiem = convertValueToMeridiem(value, meridiemMode, ampm);
-            handleChangeAndOpenNext(utils.setHours(dateOrMidnight, valueWithMeridiem), isFinish);
+          const handleHoursChange = (hourValue, isFinish) => {
+            const valueWithMeridiem = convertValueToMeridiem(hourValue, meridiemMode, ampm);
+            handleChangeAndOpenNext(utils.setHours(selectedTimeOrMidnight, valueWithMeridiem), isFinish);
           };
 
           return {
             onChange: handleHoursChange,
-            value: utils.getHours(dateOrMidnight),
+            viewValue: utils.getHours(selectedTimeOrMidnight),
             children: getHourNumbers({
-              date,
+              value,
               utils,
               ampm,
               onChange: handleHoursChange,
-              getClockNumberText: getHoursClockNumberText,
-              isDisabled: value => disabled || isTimeDisabled(value, 'hours'),
+              getClockNumberText: localeText.hoursClockNumberText,
+              isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
               selectedId
             })
           };
@@ -218,21 +197,21 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
 
       case 'minutes':
         {
-          const minutesValue = utils.getMinutes(dateOrMidnight);
+          const minutesValue = utils.getMinutes(selectedTimeOrMidnight);
 
-          const handleMinutesChange = (value, isFinish) => {
-            handleChangeAndOpenNext(utils.setMinutes(dateOrMidnight, value), isFinish);
+          const handleMinutesChange = (minuteValue, isFinish) => {
+            handleChangeAndOpenNext(utils.setMinutes(selectedTimeOrMidnight, minuteValue), isFinish);
           };
 
           return {
-            value: minutesValue,
+            viewValue: minutesValue,
             onChange: handleMinutesChange,
             children: getMinutesNumbers({
               utils,
               value: minutesValue,
               onChange: handleMinutesChange,
-              getClockNumberText: getMinutesClockNumberText,
-              isDisabled: value => disabled || isTimeDisabled(value, 'minutes'),
+              getClockNumberText: localeText.minutesClockNumberText,
+              isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
               selectedId
             })
           };
@@ -240,21 +219,21 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
 
       case 'seconds':
         {
-          const secondsValue = utils.getSeconds(dateOrMidnight);
+          const secondsValue = utils.getSeconds(selectedTimeOrMidnight);
 
-          const handleSecondsChange = (value, isFinish) => {
-            handleChangeAndOpenNext(utils.setSeconds(dateOrMidnight, value), isFinish);
+          const handleSecondsChange = (secondValue, isFinish) => {
+            handleChangeAndOpenNext(utils.setSeconds(selectedTimeOrMidnight, secondValue), isFinish);
           };
 
           return {
-            value: secondsValue,
+            viewValue: secondsValue,
             onChange: handleSecondsChange,
             children: getMinutesNumbers({
               utils,
               value: secondsValue,
               onChange: handleSecondsChange,
-              getClockNumberText: getSecondsClockNumberText,
-              isDisabled: value => disabled || isTimeDisabled(value, 'seconds'),
+              getClockNumberText: localeText.secondsClockNumberText,
+              isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
               selectedId
             })
           };
@@ -263,31 +242,31 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
       default:
         throw new Error('You must provide the type for ClockView');
     }
-  }, [openView, utils, date, ampm, getHoursClockNumberText, getMinutesClockNumberText, getSecondsClockNumberText, meridiemMode, handleChangeAndOpenNext, dateOrMidnight, isTimeDisabled, selectedId, disabled]);
+  }, [openView, utils, value, ampm, localeText.hoursClockNumberText, localeText.minutesClockNumberText, localeText.secondsClockNumberText, meridiemMode, handleChangeAndOpenNext, selectedTimeOrMidnight, isTimeDisabled, selectedId, disabled]);
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(ClockPickerRoot, {
     ref: ref,
     className: clsx(classes.root, className),
     ownerState: ownerState,
+    sx: sx,
     children: [showViewSwitcher && /*#__PURE__*/_jsx(ClockPickerArrowSwitcher, {
       className: classes.arrowSwitcher,
-      leftArrowButtonText: leftArrowButtonText,
-      rightArrowButtonText: rightArrowButtonText,
       components: components,
       componentsProps: componentsProps,
-      onLeftClick: () => setOpenView(previousView),
-      onRightClick: () => setOpenView(nextView),
-      isLeftDisabled: !previousView,
-      isRightDisabled: !nextView,
+      onGoToPrevious: () => setOpenView(previousView),
+      isPreviousDisabled: !previousView,
+      previousLabel: localeText.openPreviousView,
+      onGoToNext: () => setOpenView(nextView),
+      isNextDisabled: !nextView,
+      nextLabel: localeText.openNextView,
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(Clock, _extends({
       autoFocus: autoFocus,
-      date: date,
       ampmInClock: ampmInClock,
+      value: value,
       type: openView,
       ampm: ampm,
-      getClockLabelText: getClockLabelText,
       minutesStep: minutesStep,
       isTimeDisabled: isTimeDisabled,
       meridiemMode: meridiemMode,
@@ -339,11 +318,6 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    */
   componentsProps: PropTypes.object,
 
-  /**
-   * Selected date @DateIOType.
-   */
-  date: PropTypes.any,
-
   /**
    * If `true`, the picker and text field are disabled.
    * @default false
@@ -356,59 +330,6 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
 
-  /**
-   * Accessible text that helps user to understand which time and view is selected.
-   * @template TDate
-   * @param {ClockPickerView} view The current view rendered.
-   * @param {TDate | null} time The current time.
-   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-   * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   * @default <TDate extends any>(
-   *   view: ClockView,
-   *   time: TDate | null,
-   *   adapter: MuiPickersAdapter<TDate>,
-   * ) =>
-   *   `Select ${view}. ${
-   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-   *   }`
-   */
-  getClockLabelText: PropTypes.func,
-
-  /**
-   * Get clock number aria-text for hours.
-   * @param {string} hours The hours to format.
-   * @returns {string} the formatted hours text.
-   * @default (hours: string) => `${hours} hours`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getHoursClockNumberText: PropTypes.func,
-
-  /**
-   * Get clock number aria-text for minutes.
-   * @param {string} minutes The minutes to format.
-   * @returns {string} the formatted minutes text.
-   * @default (minutes: string) => `${minutes} minutes`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getMinutesClockNumberText: PropTypes.func,
-
-  /**
-   * Get clock number aria-text for seconds.
-   * @param {string} seconds The seconds to format.
-   * @returns {string} the formatted seconds text.
-   * @default (seconds: string) => `${seconds} seconds`
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  getSecondsClockNumberText: PropTypes.func,
-
-  /**
-   * Left arrow icon aria-label text.
-   * @default 'open previous view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  leftArrowButtonText: PropTypes.string,
-
   /**
    * Max time acceptable time.
    * For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
@@ -450,13 +371,6 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
    */
   readOnly: PropTypes.bool,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @default 'open next view'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Dynamically check if time is disabled or not.
    * If returns `false` appropriate time point will ot be acceptable.
@@ -467,6 +381,16 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
   shouldDisableTime: PropTypes.func,
   showViewSwitcher: 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]),
+
+  /**
+   * Selected date @DateIOType.
+   */
+  value: PropTypes.any,
+
   /**
    * Controlled open view.
    */

package/ClockPicker/ClockPointer.d.ts

@@ -5,7 +5,7 @@ export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement>
     hasSelected: boolean;
     isInner: boolean;
     type: ClockPickerView;
-    value: number;
+    viewValue: number;
     classes?: Partial<ClockPointerClasses>;
 }
 /**

package/ClockPicker/ClockPointer.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "hasSelected", "isInner", "type", "value"];
+const _excluded = ["className", "hasSelected", "isInner", "type", "viewValue"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
@@ -71,7 +71,7 @@ export function ClockPointer(inProps) {
     className,
     isInner,
     type,
-    value
+    viewValue
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -88,9 +88,9 @@ export function ClockPointer(inProps) {
 
   const getAngleStyle = () => {
     const max = type === 'hours' ? 12 : 60;
-    let angle = 360 / max * value;
+    let angle = 360 / max * viewValue;
 
-    if (type === 'hours' && value > 12) {
+    if (type === 'hours' && viewValue > 12) {
       angle -= 360; // round up angle to max 360 degrees
     }
 

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from './DateField.interfaces';
-export declare const useDateField: <TInputDate, TDate, TProps extends UseDateFieldProps<TInputDate, TDate>>(inProps: TProps) => import("../internals/hooks/useField").UseFieldResponse<Omit<TProps & Omit<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast"> & Required<Pick<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast">>, "defaultValue" | "onChange" | "onError" | "value" | "format" | "readOnly" | "minDate" | "maxDate" | "disableFuture" | "disablePast" | "shouldDisableDate">>;
+export declare const useDateField: <TInputDate, TDate, TProps extends UseDateFieldProps<TInputDate, TDate>>(inProps: TProps) => import("../internals/hooks/useField").UseFieldResponse<Omit<TProps & Omit<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast"> & Required<Pick<UseDateFieldProps<TInputDate, TDate>, "minDate" | "maxDate" | "disableFuture" | "disablePast">>, "defaultValue" | "onChange" | "onError" | "value" | "minDate" | "maxDate" | "format" | "disableFuture" | "disablePast" | "readOnly" | "shouldDisableMonth" | "shouldDisableDate" | "shouldDisableYear">>;

package/DateField/useDateField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast"];
 import { datePickerValueManager } from '../DatePicker/shared';
 import { useField, splitFormatIntoSections, addPositionPropertiesToSections, createDateStrFromSections } from '../internals/hooks/useField';
 import { isSameDateError, validateDate } from '../internals/hooks/validation/useDateValidation';
@@ -47,6 +47,8 @@ export const useDateField = inProps => {
     readOnly,
     onError,
     shouldDisableDate,
+    shouldDisableMonth,
+    shouldDisableYear,
     minDate,
     maxDate,
     disableFuture,
@@ -64,6 +66,8 @@ export const useDateField = inProps => {
       readOnly,
       onError,
       shouldDisableDate,
+      shouldDisableMonth,
+      shouldDisableYear,
       minDate,
       maxDate,
       disableFuture,

package/DatePicker/DatePicker.js

@@ -159,14 +159,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    * @default (date, utils) => `Choose date, selected date is ${utils.format(utils.date(date), 'fullDate')}`
    */
   getOpenDialogAriaText: PropTypes.func,
-
-  /**
-   * 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,
   ignoreInvalidInputs: PropTypes.bool,
 
   /**
@@ -188,12 +180,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * 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.
@@ -201,6 +187,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -358,12 +349,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -401,6 +386,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   showToolbar: 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]),
+
   /**
    * Component that will replace default toolbar renderer.
    * @default DatePickerToolbar

package/DateTimePicker/DateTimePicker.js

@@ -173,25 +173,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   disablePast: PropTypes.bool,
 
-  /**
-   * Accessible text that helps user to understand which time and view is selected.
-   * @template TDate
-   * @param {ClockPickerView} view The current view rendered.
-   * @param {TDate | null} time The current time.
-   * @param {MuiPickersAdapter<TDate>} adapter The current date adapter.
-   * @returns {string} The clock label.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
-   * @default <TDate extends any>(
-   *   view: ClockView,
-   *   time: TDate | null,
-   *   adapter: MuiPickersAdapter<TDate>,
-   * ) =>
-   *   `Select ${view}. ${
-   *     time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}`
-   *   }`
-   */
-  getClockLabelText: PropTypes.func,
-
   /**
    * Get aria-label text for control that opens picker dialog. Aria-label text must include selected date. @DateIOType
    * @template TInputDate, TDate
@@ -202,14 +183,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   getOpenDialogAriaText: PropTypes.func,
 
-  /**
-   * 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,
-
   /**
    * Toggles visibility of date time switching tabs
    * @default false for mobile, true for desktop
@@ -236,12 +209,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   })]),
   label: PropTypes.node,
 
-  /**
-   * 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.
@@ -249,6 +216,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   loading: PropTypes.bool,
 
+  /**
+   * Locale for components texts
+   */
+  localeText: PropTypes.object,
+
   /**
    * Custom mask. Can be used to override generate from format. (e.g. `__/__/____ __:__` or `__/__/____ __:__ _M`).
    */
@@ -434,12 +406,6 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   rifmFormatter: PropTypes.func,
 
-  /**
-   * Right arrow icon aria-label text.
-   * @deprecated
-   */
-  rightArrowButtonText: PropTypes.string,
-
   /**
    * Disable specific date. @DateIOType
    * @template TDate
@@ -486,6 +452,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    */
   showToolbar: 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]),
+
   /**
    * Time tab icon.
    */

package/DesktopDatePicker/DesktopDatePicker.d.ts

@@ -6,7 +6,7 @@ export interface DesktopDatePickerSlotsComponent extends DesktopWrapperSlotsComp
 }
 export interface DesktopDatePickerSlotsComponentsProps extends DesktopWrapperSlotsComponentsProps, CalendarPickerSlotsComponentsProps {
 }
-export interface DesktopDatePickerProps<TInputDate, TDate> extends Omit<BaseDatePickerProps<TInputDate, TDate>, 'components' | 'componentsProps'>, DesktopWrapperProps {
+export interface DesktopDatePickerProps<TInputDate, TDate> extends Omit<BaseDatePickerProps<TInputDate, TDate>, 'components' | 'componentsProps'>, DesktopWrapperProps<TDate> {
     /**
      * Overrideable components.
      * @default {}