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

package/CHANGELOG.md

@@ -3,21 +3,111 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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 +119,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 +131,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 +161,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.js

@@ -287,6 +287,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
 
   /**
    * Left arrow icon aria-label text.
+   * @deprecated
    */
   leftArrowButtonText: PropTypes.string,
 
@@ -370,6 +371,7 @@ process.env.NODE_ENV !== "production" ? CalendarPicker.propTypes = {
 
   /**
    * Right arrow icon aria-label text.
+   * @deprecated
    */
   rightArrowButtonText: PropTypes.string,
 

package/CalendarPicker/PickersCalendarHeader.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import Fade from '@mui/material/Fade';
 import { styled } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
-import { useUtils } from '../internals/hooks/useUtils';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
 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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PickersCalendarHeaderRoot = styled('div')({
@@ -53,11 +54,12 @@ const PickersCalendarHeaderSwitchView = styled(ArrowDropDown)(({
 function getSwitchingViewAriaText(view) {
   return view === 'year' ? 'year view is open, switch to calendar view' : 'calendar view is open, switch to year view';
 }
+
+const deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translation are deprecated. See https://mui.com/x/react-date-pickers/localization for more information.');
 /**
  * @ignore - do not document.
  */
 
-
 export function PickersCalendarHeader(props) {
   const {
     components = {},
@@ -67,16 +69,23 @@ export function PickersCalendarHeader(props) {
     disableFuture,
     disablePast,
     getViewSwitchingButtonText = getSwitchingViewAriaText,
-    leftArrowButtonText = 'Previous month',
+    leftArrowButtonText: leftArrowButtonTextProp,
     maxDate,
     minDate,
     onMonthChange,
     onViewChange,
     openView: currentView,
     reduceAnimations,
-    rightArrowButtonText = 'Next month',
+    rightArrowButtonText: rightArrowButtonTextProp,
     views
   } = props;
+  deprecatedPropsWarning({
+    leftArrowButtonText: leftArrowButtonTextProp,
+    rightArrowButtonText: rightArrowButtonTextProp
+  });
+  const localeText = useLocaleText();
+  const leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.previousMonth;
+  const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   const utils = useUtils();
   const switchViewButtonProps = componentsProps.switchViewButton || {};
 

package/CalendarPicker/index.d.ts

@@ -1,5 +1,5 @@
 export { CalendarPicker } from './CalendarPicker';
-export type { CalendarPickerProps } from './CalendarPicker';
+export type { CalendarPickerProps, CalendarPickerSlotsComponent, CalendarPickerSlotsComponentsProps, } from './CalendarPicker';
 export { getCalendarPickerUtilityClass, calendarPickerClasses } from './calendarPickerClasses';
 export type { CalendarPickerClassKey, CalendarPickerClasses } from './calendarPickerClasses';
 export type { CalendarPickerView } from '../internals/models';

package/ClockPicker/ClockPicker.d.ts

@@ -91,6 +91,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
     /**
      * 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?: string;
     /**
@@ -100,6 +101,7 @@ export interface ClockPickerProps<TDate> extends ExportedClockPickerProps<TDate>
     /**
      * 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?: string;
     showViewSwitcher?: boolean;

package/ClockPicker/ClockPicker.js

@@ -6,7 +6,8 @@ import { unstable_useId as useId } from '@mui/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { Clock } from './Clock';
-import { useUtils, useNow } from '../internals/hooks/useUtils';
+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';
@@ -54,12 +55,14 @@ const defaultGetHoursClockNumberText = hours => `${hours} hours`;
 
 const defaultGetSecondsClockNumberText = seconds => `${seconds} seconds`;
 
+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,
@@ -77,11 +80,11 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
     getHoursClockNumberText = defaultGetHoursClockNumberText,
     getMinutesClockNumberText = defaultGetMinutesClockNumberText,
     getSecondsClockNumberText = defaultGetSecondsClockNumberText,
-    leftArrowButtonText = 'open previous view',
+    leftArrowButtonText: leftArrowButtonTextProp,
     maxTime,
     minTime,
     minutesStep = 1,
-    rightArrowButtonText = 'open next view',
+    rightArrowButtonText: rightArrowButtonTextProp,
     shouldDisableTime,
     showViewSwitcher,
     onChange,
@@ -93,6 +96,13 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
     disabled,
     readOnly
   } = props;
+  deprecatedPropsWarning({
+    leftArrowButtonText: leftArrowButtonTextProp,
+    rightArrowButtonText: rightArrowButtonTextProp
+  });
+  const localeText = useLocaleText();
+  const leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.openPreviousView;
+  const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.openNextView;
   const {
     openView,
     setOpenView,
@@ -108,8 +118,7 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
   });
   const now = useNow();
   const utils = useUtils();
-  const midnight = utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0);
-  const dateOrMidnight = date || midnight;
+  const dateOrMidnight = React.useMemo(() => date || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [date, now, utils]);
   const {
     meridiemMode,
     handleMeridiemChange
@@ -148,12 +157,7 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
       case 'hours':
         {
           const value = convertValueToMeridiem(rawValue, meridiemMode, ampm);
-
-          if (date == null) {
-            return !isValidValue(value);
-          }
-
-          const dateWithNewHours = utils.setHours(date, value);
+          const dateWithNewHours = utils.setHours(dateOrMidnight, value);
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
@@ -164,11 +168,7 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
 
       case 'minutes':
         {
-          if (date == null) {
-            return !isValidValue(rawValue, minutesStep);
-          }
-
-          const dateWithNewMinutes = utils.setMinutes(date, rawValue);
+          const dateWithNewMinutes = utils.setMinutes(dateOrMidnight, rawValue);
           const start = utils.setSeconds(dateWithNewMinutes, 0);
           const end = utils.setSeconds(dateWithNewMinutes, 59);
           return !containsValidTime({
@@ -179,11 +179,7 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
 
       case 'seconds':
         {
-          if (date == null) {
-            return !isValidValue(rawValue);
-          }
-
-          const dateWithNewSeconds = utils.setSeconds(date, rawValue);
+          const dateWithNewSeconds = utils.setSeconds(dateOrMidnight, rawValue);
           const start = dateWithNewSeconds;
           const end = dateWithNewSeconds;
           return !containsValidTime({
@@ -195,7 +191,7 @@ export const ClockPicker = /*#__PURE__*/React.forwardRef(function ClockPicker(in
       default:
         throw new Error('not supported');
     }
-  }, [ampm, date, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils]);
+  }, [ampm, dateOrMidnight, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils]);
   const selectedId = useId();
   const viewProps = React.useMemo(() => {
     switch (openView) {
@@ -405,6 +401,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
   /**
    * 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,
 
@@ -452,6 +449,7 @@ process.env.NODE_ENV !== "production" ? ClockPicker.propTypes = {
   /**
    * 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,
 

package/DatePicker/DatePicker.d.ts

@@ -1,13 +1,19 @@
 import * as React from 'react';
-import { DesktopDatePickerProps } from '../DesktopDatePicker';
-import { MobileDatePickerProps } from '../MobileDatePicker';
-export interface DatePickerProps<TInputDate, TDate> extends DesktopDatePickerProps<TInputDate, TDate>, MobileDatePickerProps<TInputDate, TDate> {
+import { DesktopDatePickerProps, DesktopDatePickerSlotsComponent, DesktopDatePickerSlotsComponentsProps } from '../DesktopDatePicker';
+import { MobileDatePickerProps, MobileDatePickerSlotsComponent, MobileDatePickerSlotsComponentsProps } from '../MobileDatePicker';
+export interface DatePickerSlotsComponent extends MobileDatePickerSlotsComponent, DesktopDatePickerSlotsComponent {
+}
+export interface DatePickerSlotsComponentsProps extends MobileDatePickerSlotsComponentsProps, DesktopDatePickerSlotsComponentsProps {
+}
+export interface DatePickerProps<TInputDate, TDate> extends Omit<DesktopDatePickerProps<TInputDate, TDate>, 'components' | 'componentsProps'>, Omit<MobileDatePickerProps<TInputDate, TDate>, 'components' | 'componentsProps'> {
     /**
      * CSS media query when `Mobile` mode will be changed to `Desktop`.
      * @default '@media (pointer: fine)'
      * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
      */
     desktopModeMediaQuery?: string;
+    components?: Partial<DatePickerSlotsComponent>;
+    componentsProps?: Partial<DatePickerSlotsComponentsProps>;
 }
 declare type DatePickerComponent = (<TInputDate, TDate = TInputDate>(props: DatePickerProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;

package/DatePicker/DatePicker.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["cancelText", "desktopModeMediaQuery", "DialogProps", "okText", "PopperProps", "showTodayButton", "todayText", "TransitionComponent"];
+const _excluded = ["desktopModeMediaQuery", "DialogProps", "PopperProps", "TransitionComponent"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
@@ -27,13 +27,9 @@ export const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(inPr
   });
 
   const {
-    cancelText,
     desktopModeMediaQuery = '@media (pointer: fine)',
     DialogProps,
-    okText,
     PopperProps,
-    showTodayButton,
-    todayText,
     TransitionComponent
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -50,11 +46,7 @@ export const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(inPr
 
   return /*#__PURE__*/_jsx(MobileDatePicker, _extends({
     ref: ref,
-    cancelText: cancelText,
-    DialogProps: DialogProps,
-    okText: okText,
-    showTodayButton: showTodayButton,
-    todayText: todayText
+    DialogProps: DialogProps
   }, other));
 });
 process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
@@ -69,12 +61,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
   autoFocus: PropTypes.bool,
-
-  /**
-   * Cancel text message.
-   * @default 'Cancel'
-   */
-  cancelText: PropTypes.node,
   children: PropTypes.node,
 
   /**
@@ -82,35 +68,12 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   className: PropTypes.string,
 
-  /**
-   * If `true`, it shows the clear action in the picker dialog.
-   * @default false
-   */
-  clearable: PropTypes.bool,
-
-  /**
-   * Clear text message.
-   * @default 'Clear'
-   */
-  clearText: PropTypes.node,
-
   /**
    * If `true` the popup or dialog will immediately close after submitting full date.
    * @default `true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
    */
   closeOnSelect: PropTypes.bool,
-
-  /**
-   * The components used for each slot.
-   * Either a string to use an HTML element or a component.
-   * @default {}
-   */
   components: PropTypes.object,
-
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
   componentsProps: PropTypes.object,
 
   /**
@@ -203,6 +166,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
 
   /**
    * Left arrow icon aria-label text.
+   * @deprecated
    */
   leftArrowButtonText: PropTypes.string,
 
@@ -228,12 +192,6 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   minDate: PropTypes.any,
 
-  /**
-   * Ok button text.
-   * @default 'OK'
-   */
-  okText: PropTypes.node,
-
   /**
    * Callback fired when date is accepted @DateIOType.
    * @template TValue
@@ -376,6 +334,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
 
   /**
    * Right arrow icon aria-label text.
+   * @deprecated
    */
   rightArrowButtonText: PropTypes.string,
 
@@ -411,23 +370,11 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
 
-  /**
-   * If `true`, the today button is displayed. **Note** that `showClearButton` has a higher priority.
-   * @default false
-   */
-  showTodayButton: PropTypes.bool,
-
   /**
    * If `true`, show the toolbar even in desktop mode.
    */
   showToolbar: PropTypes.bool,
 
-  /**
-   * Today text message.
-   * @default 'Today'
-   */
-  todayText: PropTypes.node,
-
   /**
    * Component that will replace default toolbar renderer.
    * @default DatePickerToolbar

package/DatePicker/DatePickerToolbar.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '../internals/models/props/baseToolbarProps';
+export declare const datePickerToolbarClasses: Record<"root" | "title", string>;
 declare type DatePickerToolbarComponent = (<TDate>(props: BaseToolbarProps<TDate, TDate | null> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;
 };

package/DatePicker/DatePickerToolbar.js

@@ -5,18 +5,26 @@ import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import { generateUtilityClasses } from '@mui/material';
-import { PickersToolbar } from '../internals/components/PickersToolbar';
+import { PickersToolbar, pickersToolbarClasses } from '../internals/components/PickersToolbar';
 import { useUtils } from '../internals/hooks/useUtils';
 import { isYearAndMonthViews, isYearOnlyView } from './shared';
 import { jsx as _jsx } from "react/jsx-runtime";
-const classes = generateUtilityClasses('PrivateDatePickerToolbar', ['penIcon']);
-const DatePickerToolbarRoot = styled(PickersToolbar)({
-  [`& .${classes.penIcon}`]: {
+export const datePickerToolbarClasses = generateUtilityClasses('MuiDatePickerToolbar', ['root', 'title']);
+const DatePickerToolbarRoot = styled(PickersToolbar, {
+  name: 'MuiDatePickerToolbar',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({
+  [`& .${pickersToolbarClasses.penIconButton}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DatePickerToolbarTitle = styled(Typography)(({
+const DatePickerToolbarTitle = styled(Typography, {
+  name: 'MuiDatePickerToolbar',
+  slot: 'Title',
+  overridesResolver: (props, styles) => styles.title
+})(({
   ownerState
 }) => _extends({}, ownerState.isLandscape && {
   margin: 'auto 16px auto auto'
@@ -68,13 +76,14 @@ export const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePick
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: isLandscape,
-    penIconClassName: classes.penIcon,
-    ownerState: ownerState
+    ownerState: ownerState,
+    className: datePickerToolbarClasses.root
   }, other, {
     children: /*#__PURE__*/_jsx(DatePickerToolbarTitle, {
       variant: "h4",
       align: isLandscape ? 'left' : 'center',
       ownerState: ownerState,
+      className: datePickerToolbarClasses.title,
       children: dateText
     })
   }));