@mui/x-date-pickers-pro 5.0.1 → 5.0.3

package/CHANGELOG.md

@@ -3,6 +3,74 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 Fix lost characters when typing into fields in the DataGrid (#5646) @m4theushw
+- 🌏 New locale and improvements for pickers
+- 🎁 Improve support to theme augmentation for pickers
+
+### `@mui/x-data-grid@v5.17.3` / `@mui/x-data-grid-pro@v5.17.3` / `@mui/x-data-grid-premium@v5.17.3`
+
+#### Changes
+
+- [DataGrid] Only update input with value prop if debounce is off (#5646) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.2` / `@mui/x-date-pickers-pro@v5.0.2`
+
+#### Changes
+
+- [pickers] Add Icelandic (is-IS) locale (#6137) @elvatli
+- [pickers] Fix `@mui/x-date-pickers` theme augmentation and style overriding (#6156) @LukasTy
+- [pickers] Fix `@mui/x-date-pickers-pro` theme augmentation (#6096) @LukasTy
+- [pickers] Improve German (de-DE) locale (#6138) @alexfauquette
+
+### Docs
+
+- [docs] Improve main demo to show new functionalities (#5292) @joserodolfofreitas
+
+### Core
+
+- [core] Update to typescript 4.8.3 (#6136) @flaviendelangle
+- [core] Update RFC template (#6100) @bytasv
+
 ## 5.17.2
 
 _Sep 9, 2022_
@@ -11,7 +79,7 @@ This release will the last regular release for our `v5` packages.
 From now on, we'll be focusing on developing MUI X v6.
 You can check the [roadmap](https://github.com/mui/mui-x/projects/1) for more details on what's coming next.
 
-And if you'd like to help, please consider volunteering to give us a [user interview](https://docs.google.com/forms/d/11L_zxL7oD_B-ZrZDuSyIkUzJLzOTUU2M4vHXxMVtWhU/edit).
+And if you'd like to help, please consider volunteering to give us a [user interview](https://forms.gle/vsBv6CLPz9h57xg8A).
 We'd love to know more about your use cases, pain points and expectations for the future.
 
 The `v5` packages will only get new versions to patch critical bug fixes.
@@ -67,7 +135,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
 
 _Sep 2, 2022_
 
-🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
 
 If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
 

package/DateRangePicker/DateRangePicker.js

@@ -170,7 +170,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Text for end input label and toolbar placeholder.
    * @default 'End'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   endText: PropTypes.node,
 
@@ -188,7 +188,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Get aria-label text for switching between views button.
    * @param {CalendarPickerView} currentView The view from which we want to get the button text.
    * @returns {string} The label of the view.
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   getViewSwitchingButtonText: PropTypes.func,
   ignoreInvalidInputs: PropTypes.bool,
@@ -422,7 +422,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   /**
    * Text for start input label and toolbar placeholder.
    * @default 'Start'
-   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+   * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
    */
   startText: PropTypes.node,
 

package/DateRangePicker/DateRangePickerInput.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { DateInputProps, ExportedDateInputProps, MuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { CurrentlySelectingRangeEndProps, DateRange } from '../internal/models/dateRange';
 import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation';
+import { DateRangePickerInputClasses } from './dateRangePickerInputClasses';
 export interface ExportedDateRangePickerInputProps<TInputDate, TDate> extends Omit<ExportedDateInputProps<TInputDate, TDate>, 'renderInput'> {
     /**
      * The `renderInput` prop allows you to customize the rendered input.
@@ -27,13 +28,14 @@ export interface ExportedDateRangePickerInputProps<TInputDate, TDate> extends Om
     renderInput: (startProps: MuiTextFieldProps, endProps: MuiTextFieldProps) => React.ReactElement;
     onChange: (date: DateRange<TDate>, keyboardInputValue?: string) => void;
 }
-export interface DateRangeInputProps<TInputDate, TDate> extends ExportedDateRangePickerInputProps<TInputDate, TDate>, Omit<DateInputProps<TInputDate, TDate>, keyof ExportedDateRangePickerInputProps<TInputDate, TDate> | 'rawValue' | 'validationError'>, CurrentlySelectingRangeEndProps {
+export interface DateRangePickerInputProps<TInputDate, TDate> extends ExportedDateRangePickerInputProps<TInputDate, TDate>, Omit<DateInputProps<TInputDate, TDate>, keyof ExportedDateRangePickerInputProps<TInputDate, TDate> | 'rawValue' | 'validationError'>, CurrentlySelectingRangeEndProps {
     startText: React.ReactNode;
     endText: React.ReactNode;
     validationError: DateRangeValidationError;
     rawValue: DateRange<TInputDate>;
+    classes?: Partial<DateRangePickerInputClasses>;
 }
-declare type DatePickerInputComponent = <TInputDate, TDate>(props: DateRangeInputProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
+declare type DatePickerInputComponent = <TInputDate, TDate>(props: DateRangePickerInputProps<TInputDate, TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element;
 /**
  * @ignore - internal component.
  */

package/DateRangePicker/DateRangePickerInput.js

@@ -1,11 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError"];
+const _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError", "className"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useUtils, executeInTheNextEventLoopTick, useMaskedInput, onSpaceOrEnter } from '@mui/x-date-pickers/internals';
+import { getDateRangePickerInputUtilityClass } from './dateRangePickerInputClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const DateRangePickerInputRoot = styled('div')(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getDateRangePickerInputUtilityClass, classes);
+};
+
+const DateRangePickerInputRoot = styled('div', {
+  name: 'MuiDateRangePickerInput',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme
 }) => ({
   display: 'flex',
@@ -19,7 +37,12 @@ const DateRangePickerInputRoot = styled('div')(({
 /**
  * @ignore - internal component.
  */
-export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(props, ref) {
+export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerInput'
+  });
+
   const {
     currentlySelectingRangeEnd,
     disableOpenPicker,
@@ -34,13 +57,15 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
     setCurrentlySelectingRangeEnd,
     startText,
     TextFieldProps,
-    validationError: [startValidationError, endValidationError]
+    validationError: [startValidationError, endValidationError],
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const utils = useUtils();
   const startRef = React.useRef(null);
   const endRef = React.useRef(null);
+  const classes = useUtilityClasses(props);
   React.useEffect(() => {
     if (!open) {
       return;
@@ -135,6 +160,7 @@ export const DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateR
   return /*#__PURE__*/_jsx(DateRangePickerInputRoot, {
     onBlur: onBlur,
     ref: ref,
+    className: clsx(classes.root, className),
     children: renderInput(startInputProps, endInputProps)
   });
 });

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { BaseToolbarProps } from '@mui/x-date-pickers/internals';
 import { DateRange, CurrentlySelectingRangeEndProps } from '../internal/models';
-export declare const dateRangePickerToolbarClasses: Record<"root", string>;
-interface DateRangePickerToolbarProps<TDate> extends CurrentlySelectingRangeEndProps, Pick<BaseToolbarProps<TDate, DateRange<TDate>>, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' | 'toolbarTitle' | 'toolbarFormat' | 'parsedValue'> {
+import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
+export interface DateRangePickerToolbarProps<TDate> extends CurrentlySelectingRangeEndProps, Pick<BaseToolbarProps<TDate, DateRange<TDate>>, 'isMobileKeyboardViewOpen' | 'toggleMobileKeyboardView' | 'toolbarTitle' | 'toolbarFormat' | 'parsedValue'> {
     startText: React.ReactNode;
     endText: React.ReactNode;
+    classes?: Partial<DateRangePickerToolbarClasses>;
 }
 /**
  * @ignore - internal component.
  */
-export declare const DateRangePickerToolbar: <TDate extends unknown>(props: DateRangePickerToolbarProps<TDate>) => JSX.Element;
-export {};
+export declare const DateRangePickerToolbar: React.ForwardRefExoticComponent<DateRangePickerToolbarProps<unknown> & React.RefAttributes<HTMLDivElement>>;

package/DateRangePicker/DateRangePickerToolbar.js

@@ -1,30 +1,50 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { PickersToolbar, PickersToolbarButton, pickersToolbarClasses, useUtils, useLocaleText } from '@mui/x-date-pickers/internals';
+import { getDateRangePickerToolbarUtilityClass } from './dateRangePickerToolbarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const dateRangePickerToolbarClasses = generateUtilityClasses('MuiDateRangePickerToolbar', ['root']);
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return composeClasses(slots, getDateRangePickerToolbarUtilityClass, classes);
+};
+
 const DateRangePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateRangePickerToolbar',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => styles.root
 })({
   [`& .${pickersToolbarClasses.penIconButton}`]: {
     position: 'relative',
     top: 4
   }
 });
-const DateRangePickerToolbarContainer = styled('div')({
+const DateRangePickerToolbarContainer = styled('div', {
+  name: 'MuiDateRangePickerToolbar',
+  slot: 'Container',
+  overridesResolver: (_, styles) => styles.container
+})({
   display: 'flex'
 });
 /**
  * @ignore - internal component.
  */
 
-export const DateRangePickerToolbar = props => {
+export const DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
   const utils = useUtils();
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerToolbar'
+  });
   const {
     currentlySelectingRangeEnd,
     parsedValue: [start, end],
@@ -41,14 +61,17 @@ export const DateRangePickerToolbar = props => {
   const startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : startText;
   const endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : endText;
   const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(DateRangePickerToolbarRoot, {
     toolbarTitle: toolbarTitle,
     isMobileKeyboardViewOpen: isMobileKeyboardViewOpen,
     toggleMobileKeyboardView: toggleMobileKeyboardView,
     isLandscape: false,
-    className: dateRangePickerToolbarClasses.root,
+    className: classes.root,
     ownerState: ownerState,
+    ref: ref,
     children: /*#__PURE__*/_jsxs(DateRangePickerToolbarContainer, {
+      className: classes.container,
       children: [/*#__PURE__*/_jsx(PickersToolbarButton, {
         variant: start !== null ? 'h5' : 'h6',
         value: startDateValue,
@@ -65,4 +88,4 @@ export const DateRangePickerToolbar = props => {
       })]
     })
   });
-};
+});

package/DateRangePicker/DateRangePickerView.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ExportedCalendarPickerProps, PickerStatePickerProps, BaseDateValidationProps, DayValidationProps } from '@mui/x-date-pickers/internals';
 import { DateRange, CurrentlySelectingRangeEndProps, DayRangeValidationProps } from '../internal/models/dateRange';
 import { DateRangePickerViewMobileSlotsComponent, DateRangePickerViewMobileSlotsComponentsProps } from './DateRangePickerViewMobile';
-import { DateRangeInputProps } from './DateRangePickerInput';
+import { DateRangePickerInputProps } from './DateRangePickerInput';
 import { ExportedDesktopDateRangeCalendarProps } from './DateRangePickerViewDesktop';
 export interface DateRangePickerViewSlotsComponent extends DateRangePickerViewMobileSlotsComponent {
 }
@@ -47,7 +47,7 @@ interface DateRangePickerViewProps<TInputDate, TDate> extends CurrentlySelecting
     open: boolean;
     startText: React.ReactNode;
     endText: React.ReactNode;
-    DateInputProps: DateRangeInputProps<TInputDate, TDate>;
+    DateInputProps: DateRangePickerInputProps<TInputDate, TDate>;
 }
 declare type DateRangePickerViewComponent = (<TInputDate, TDate = TInputDate>(props: DateRangePickerViewProps<TInputDate, TDate>) => JSX.Element) & {
     propTypes?: any;

package/DateRangePicker/DateRangePickerViewDesktop.d.ts

@@ -2,6 +2,7 @@
 import { ExportedArrowSwitcherProps, DayPickerProps, DayValidationProps } from '@mui/x-date-pickers/internals';
 import { DateRange } from '../internal/models';
 import { DateRangePickerDayProps } from '../DateRangePickerDay';
+import { DateRangePickerViewDesktopClasses } from './dateRangePickerViewDesktopClasses';
 export interface ExportedDesktopDateRangeCalendarProps<TDate> {
     /**
      * The number of calendars that render on **desktop**.
@@ -18,14 +19,14 @@ export interface ExportedDesktopDateRangeCalendarProps<TDate> {
      */
     renderDay?: (day: TDate, dateRangePickerDayProps: DateRangePickerDayProps<TDate>) => JSX.Element;
 }
-interface DesktopDateRangeCalendarProps<TDate> extends ExportedDesktopDateRangeCalendarProps<TDate>, Omit<DayPickerProps<TDate>, 'selectedDays' | 'renderDay' | 'onFocusedDayChange'>, DayValidationProps<TDate>, ExportedArrowSwitcherProps {
+export interface DesktopDateRangeCalendarProps<TDate> extends ExportedDesktopDateRangeCalendarProps<TDate>, Omit<DayPickerProps<TDate>, 'selectedDays' | 'renderDay' | 'onFocusedDayChange' | 'classes'>, DayValidationProps<TDate>, ExportedArrowSwitcherProps {
     calendars: 1 | 2 | 3;
     parsedValue: DateRange<TDate>;
     changeMonth: (date: TDate) => void;
     currentlySelectingRangeEnd: 'start' | 'end';
+    classes?: Partial<DateRangePickerViewDesktopClasses>;
 }
 /**
  * @ignore - internal component.
  */
-export declare function DateRangePickerViewDesktop<TDate>(props: DesktopDateRangeCalendarProps<TDate>): JSX.Element;
-export {};
+export declare function DateRangePickerViewDesktop<TDate>(inProps: DesktopDateRangeCalendarProps<TDate>): JSX.Element;

package/DateRangePicker/DateRangePickerViewDesktop.js

@@ -1,21 +1,44 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText"];
+const _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "className", "classes"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useDefaultDates, useUtils, useLocaleText, PickersArrowSwitcher, usePreviousMonthDisabled, useNextMonthDisabled, DayPicker, buildDeprecatedPropsWarning, DAY_MARGIN } from '@mui/x-date-pickers/internals';
 import { calculateRangePreview } from './date-range-manager';
 import { DateRangePickerDay } from '../DateRangePickerDay';
 import { isWithinRange, isStartOfRange, isEndOfRange } from '../internal/utils/date-utils';
 import { doNothing } from '../internal/utils/utils';
+import { getDateRangePickerViewDesktopUtilityClass } from './dateRangePickerViewDesktopClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const DateRangePickerViewDesktopRoot = styled('div')({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return composeClasses(slots, getDateRangePickerViewDesktopUtilityClass, classes);
+};
+
+const DateRangePickerViewDesktopRoot = styled('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({
   display: 'flex',
   flexDirection: 'row'
 });
-const DateRangePickerViewDesktopContainer = styled('div')(({
+const DateRangePickerViewDesktopContainer = styled('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Container',
+  overridesResolver: (_, styles) => styles.container
+})(({
   theme
 }) => ({
   '&:not(:last-of-type)': {
@@ -57,7 +80,12 @@ const deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translatio
  * @ignore - internal component.
  */
 
-export function DateRangePickerViewDesktop(props) {
+export function DateRangePickerViewDesktop(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerViewDesktop'
+  });
+
   const {
     calendars,
     changeMonth,
@@ -73,7 +101,8 @@ export function DateRangePickerViewDesktop(props) {
     minDate: minDateProp,
     onSelectedDaysChange,
     renderDay = (_, dateRangeProps) => /*#__PURE__*/_jsx(DateRangePickerDay, _extends({}, dateRangeProps)),
-    rightArrowButtonText: rightArrowButtonTextProp
+    rightArrowButtonText: rightArrowButtonTextProp,
+    className
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -85,6 +114,7 @@ export function DateRangePickerViewDesktop(props) {
   const leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.previousMonth;
   const rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   const utils = useUtils();
+  const classes = useUtilityClasses(props);
   const defaultDates = useDefaultDates();
   const minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
   const maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
@@ -126,9 +156,11 @@ export function DateRangePickerViewDesktop(props) {
     changeMonth(utils.getPreviousMonth(currentMonth));
   }, [changeMonth, currentMonth, utils]);
   return /*#__PURE__*/_jsx(DateRangePickerViewDesktopRoot, {
+    className: clsx(className, classes.root),
     children: getCalendarsArray(calendars).map((_, index) => {
       const monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
       return /*#__PURE__*/_jsxs(DateRangePickerViewDesktopContainer, {
+        className: classes.container,
         children: [/*#__PURE__*/_jsx(DateRangePickerViewDesktopArrowSwitcher, {
           onLeftClick: selectPreviousMonth,
           onRightClick: selectNextMonth,

package/DateRangePicker/DateRangePickerViewMobile.d.ts

@@ -8,7 +8,7 @@ export interface DateRangePickerViewMobileSlotsComponentsProps extends PickersCa
 }
 export interface ExportedMobileDateRangeCalendarProps<TDate> extends Pick<ExportedDesktopDateRangeCalendarProps<TDate>, 'renderDay'> {
 }
-interface DesktopDateRangeCalendarProps<TDate> extends ExportedMobileDateRangeCalendarProps<TDate>, Omit<DayPickerProps<TDate>, 'selectedDays' | 'renderDay' | 'onFocusedDayChange'>, DayValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
+interface DesktopDateRangeCalendarProps<TDate> extends ExportedMobileDateRangeCalendarProps<TDate>, Omit<DayPickerProps<TDate>, 'selectedDays' | 'renderDay' | 'onFocusedDayChange' | 'classes'>, DayValidationProps<TDate>, ExportedCalendarHeaderProps<TDate> {
     /**
      * Overrideable components.
      * @default {}

package/DateRangePicker/DateRangePickerViewMobile.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly"];
+const _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly", "classes"];
 import * as React from 'react';
 import { PickersCalendarHeader, useDefaultDates, useUtils, DayPicker } from '@mui/x-date-pickers/internals';
 import { doNothing } from '../internal/utils/utils';

package/DateRangePicker/dateRangePickerInputClasses.d.ts

@@ -0,0 +1,7 @@
+export interface DateRangePickerInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type DateRangePickerInputClassKey = keyof DateRangePickerInputClasses;
+export declare function getDateRangePickerInputUtilityClass(slot: string): string;
+export declare const dateRangePickerInputClasses: DateRangePickerInputClasses;

package/DateRangePicker/dateRangePickerInputClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateRangePickerInputUtilityClass(slot) {
+  return generateUtilityClass('MuiDateRangePickerInput', slot);
+}
+export const dateRangePickerInputClasses = generateUtilityClasses('MuiDateRangePickerInput', ['root']);

package/DateRangePicker/dateRangePickerToolbarClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DateRangePickerToolbarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the container element. */
+    container: string;
+}
+export declare type DateRangePickerToolbarClassKey = keyof DateRangePickerToolbarClasses;
+export declare function getDateRangePickerToolbarUtilityClass(slot: string): string;
+export declare const dateRangePickerToolbarClasses: DateRangePickerToolbarClasses;

package/DateRangePicker/dateRangePickerToolbarClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateRangePickerToolbarUtilityClass(slot) {
+  return generateUtilityClass('MuiDateRangePickerToolbar', slot);
+}
+export const dateRangePickerToolbarClasses = generateUtilityClasses('MuiDateRangePickerToolbar', ['root', 'container']);

package/DateRangePicker/dateRangePickerViewDesktopClasses.d.ts

@@ -0,0 +1,9 @@
+export interface DateRangePickerViewDesktopClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the container element. */
+    container: string;
+}
+export declare type DateRangePickerViewDesktopClassKey = keyof DateRangePickerViewDesktopClasses;
+export declare function getDateRangePickerViewDesktopUtilityClass(slot: string): string;
+export declare const dateRangePickerViewDesktopClasses: DateRangePickerViewDesktopClasses;

package/DateRangePicker/dateRangePickerViewDesktopClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getDateRangePickerViewDesktopUtilityClass(slot) {
+  return generateUtilityClass('MuiDateRangePickerViewDesktop', slot);
+}
+export const dateRangePickerViewDesktopClasses = generateUtilityClasses('MuiDateRangePickerViewDesktop', ['root', 'container']);

package/DateRangePicker/index.d.ts

@@ -1,3 +1,9 @@
 export { DateRangePicker } from './DateRangePicker';
 export type { DateRangePickerProps } from './DateRangePicker';
+export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses, } from './dateRangePickerInputClasses';
+export type { DateRangePickerInputClasses, DateRangePickerInputClassKey, } from './dateRangePickerInputClasses';
+export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses, } from './dateRangePickerToolbarClasses';
+export type { DateRangePickerToolbarClasses, DateRangePickerToolbarClassKey, } from './dateRangePickerToolbarClasses';
+export { getDateRangePickerViewDesktopUtilityClass, dateRangePickerViewDesktopClasses, } from './dateRangePickerViewDesktopClasses';
+export type { DateRangePickerViewDesktopClasses, DateRangePickerViewDesktopClassKey, } from './dateRangePickerViewDesktopClasses';
 export type { DateRange } from '../internal/models';

package/DateRangePicker/index.js

@@ -1 +1,4 @@
-export { DateRangePicker } from './DateRangePicker';
+export { DateRangePicker } from './DateRangePicker';
+export { getDateRangePickerInputUtilityClass, dateRangePickerInputClasses } from './dateRangePickerInputClasses';
+export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
+export { getDateRangePickerViewDesktopUtilityClass, dateRangePickerViewDesktopClasses } from './dateRangePickerViewDesktopClasses';

package/DateRangePicker/shared.d.ts

@@ -8,7 +8,7 @@ export interface BaseDateRangePickerProps<TInputDate, TDate> extends Omit<BasePi
     /**
      * Text for end input label and toolbar placeholder.
      * @default 'End'
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     endText?: React.ReactNode;
     /**
@@ -26,7 +26,7 @@ export interface BaseDateRangePickerProps<TInputDate, TDate> extends Omit<BasePi
     /**
      * Text for start input label and toolbar placeholder.
      * @default 'Start'
-     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization
+     * @deprecated Use the `localeText` prop of `LocalizationProvider` instead, see https://mui.com/x/react-date-pickers/localization/.
      */
     startText?: React.ReactNode;
 }

package/DateRangePickerDay/DateRangePickerDay.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license-pro';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { DAY_MARGIN, useUtils, areDayPropsEqual } from '@mui/x-date-pickers/internals';
 import { PickersDay } from '@mui/x-date-pickers/PickersDay';
@@ -47,7 +47,13 @@ const startBorderStyle = {
 const DateRangePickerDayRoot = styled('div', {
   name: 'MuiDateRangePickerDay',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (_, styles) => [{
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayHighlight}`]: styles.rangeIntervalDayHighlight
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayHighlightStart}`]: styles.rangeIntervalDayHighlightStart
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayHighlightEnd}`]: styles.rangeIntervalDayHighlightEnd
+  }, styles.root]
 })(({
   theme,
   ownerState
@@ -80,7 +86,14 @@ DateRangePickerDayRoot.propTypes = {
 };
 const DateRangePickerDayRangeIntervalPreview = styled('div', {
   name: 'MuiDateRangePickerDay',
-  slot: 'RangeIntervalPreview'
+  slot: 'RangeIntervalPreview',
+  overridesResolver: (_, styles) => [{
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: styles.rangeIntervalDayPreview
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewStart}`]: styles.rangeIntervalDayPreviewStart
+  }, {
+    [`&.${dateRangePickerDayClasses.rangeIntervalDayPreviewEnd}`]: styles.rangeIntervalDayPreviewEnd
+  }, styles.rangeIntervalPreview]
 })(({
   theme,
   ownerState
@@ -106,7 +119,14 @@ DateRangePickerDayRangeIntervalPreview.propTypes = {
 };
 const DateRangePickerDayDay = styled(PickersDay, {
   name: 'MuiDateRangePickerDay',
-  slot: 'Day'
+  slot: 'Day',
+  overridesResolver: (_, styles) => [{
+    [`&.${dateRangePickerDayClasses.dayInsideRangeInterval}`]: styles.dayInsideRangeInterval
+  }, {
+    [`&.${dateRangePickerDayClasses.dayOutsideRangeInterval}`]: styles.dayOutsideRangeInterval
+  }, {
+    [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
+  }, styles.day]
 })(({
   theme,
   ownerState
@@ -125,7 +145,12 @@ const DateRangePickerDayDay = styled(PickersDay, {
 }, !ownerState.selected && ownerState.isHighlighting && {
   color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6))
 }));
-const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(props, ref) {
+const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerDay'
+  });
+
   const {
     className,
     day,