@mui/x-date-pickers-pro 5.0.0 → 5.0.2

package/legacy/DateRangePicker/DateRangePickerInput.js

@@ -2,12 +2,30 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["currentlySelectingRangeEnd", "disableOpenPicker", "endText", "onBlur", "onChange", "open", "openPicker", "rawValue", "rawValue", "readOnly", "renderInput", "setCurrentlySelectingRangeEnd", "startText", "TextFieldProps", "validationError"];
+var _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";
-var DateRangePickerInputRoot = styled('div')(function (_ref) {
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getDateRangePickerInputUtilityClass, classes);
+};
+
+var DateRangePickerInputRoot = styled('div', {
+  name: 'MuiDateRangePickerInput',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})(function (_ref) {
   var theme = _ref.theme;
   return _defineProperty({
     display: 'flex',
@@ -21,7 +39,12 @@ var DateRangePickerInputRoot = styled('div')(function (_ref) {
 /**
  * @ignore - internal component.
  */
-export var DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(props, ref) {
+export var DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRangePickerInput(inProps, ref) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerInput'
+  });
+
   var currentlySelectingRangeEnd = props.currentlySelectingRangeEnd,
       disableOpenPicker = props.disableOpenPicker,
       endText = props.endText,
@@ -41,11 +64,13 @@ export var DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRan
       _props$validationErro = _slicedToArray(props.validationError, 2),
       startValidationError = _props$validationErro[0],
       endValidationError = _props$validationErro[1],
+      className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
   var utils = useUtils();
   var startRef = React.useRef(null);
   var endRef = React.useRef(null);
+  var classes = useUtilityClasses(props);
   React.useEffect(function () {
     if (!open) {
       return;
@@ -148,6 +173,7 @@ export var DateRangePickerInput = /*#__PURE__*/React.forwardRef(function DateRan
   return /*#__PURE__*/_jsx(DateRangePickerInputRoot, {
     onBlur: onBlur,
     ref: ref,
+    className: clsx(classes.root, className),
     children: renderInput(startInputProps, endInputProps)
   });
 });

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -2,31 +2,51 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 var dateRangePickerToolbarClasses = generateUtilityClasses('MuiDateRangePickerToolbar', ['root']);
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return composeClasses(slots, getDateRangePickerToolbarUtilityClass, classes);
+};
+
 var DateRangePickerToolbarRoot = styled(PickersToolbar, {
   name: 'MuiDateRangePickerToolbar',
   slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
+  overridesResolver: function overridesResolver(_, styles) {
     return styles.root;
   }
 })(_defineProperty({}, "& .".concat(pickersToolbarClasses.penIconButton), {
   position: 'relative',
   top: 4
 }));
-var DateRangePickerToolbarContainer = styled('div')({
+var DateRangePickerToolbarContainer = styled('div', {
+  name: 'MuiDateRangePickerToolbar',
+  slot: 'Container',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.container;
+  }
+})({
   display: 'flex'
 });
 /**
  * @ignore - internal component.
  */
 
-export var DateRangePickerToolbar = function DateRangePickerToolbar(props) {
+export var DateRangePickerToolbar = /*#__PURE__*/React.forwardRef(function DateRangePickerToolbar(inProps, ref) {
   var utils = useUtils();
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerToolbar'
+  });
 
   var currentlySelectingRangeEnd = props.currentlySelectingRangeEnd,
       _props$parsedValue = _slicedToArray(props.parsedValue, 2),
@@ -45,14 +65,17 @@ export var DateRangePickerToolbar = function DateRangePickerToolbar(props) {
   var startDateValue = start ? utils.formatByString(start, toolbarFormat || utils.formats.shortDate) : startText;
   var endDateValue = end ? utils.formatByString(end, toolbarFormat || utils.formats.shortDate) : endText;
   var ownerState = props;
+  var 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,
@@ -73,4 +96,4 @@ export var DateRangePickerToolbar = function DateRangePickerToolbar(props) {
       })]
     })
   });
-};
+});

package/legacy/DateRangePicker/DateRangePickerViewDesktop.js

@@ -1,22 +1,47 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["calendars", "changeMonth", "components", "componentsProps", "currentlySelectingRangeEnd", "currentMonth", "parsedValue", "disableFuture", "disablePast", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText"];
+var _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";
-var DateRangePickerViewDesktopRoot = styled('div')({
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    root: ['root'],
+    container: ['container']
+  };
+  return composeClasses(slots, getDateRangePickerViewDesktopUtilityClass, classes);
+};
+
+var DateRangePickerViewDesktopRoot = styled('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Root',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.root;
+  }
+})({
   display: 'flex',
   flexDirection: 'row'
 });
-var DateRangePickerViewDesktopContainer = styled('div')(function (_ref) {
+var DateRangePickerViewDesktopContainer = styled('div', {
+  name: 'MuiDateRangePickerViewDesktop',
+  slot: 'Container',
+  overridesResolver: function overridesResolver(_, styles) {
+    return styles.container;
+  }
+})(function (_ref) {
   var theme = _ref.theme;
   return {
     '&:not(:last-of-type)': {
@@ -59,7 +84,12 @@ var deprecatedPropsWarning = buildDeprecatedPropsWarning('Props for translation
  * @ignore - internal component.
  */
 
-export function DateRangePickerViewDesktop(props) {
+export function DateRangePickerViewDesktop(inProps) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerViewDesktop'
+  });
+
   var calendars = props.calendars,
       changeMonth = props.changeMonth,
       components = props.components,
@@ -78,6 +108,8 @@ export function DateRangePickerViewDesktop(props) {
     return /*#__PURE__*/_jsx(DateRangePickerDay, _extends({}, dateRangeProps));
   } : _props$renderDay,
       rightArrowButtonTextProp = props.rightArrowButtonText,
+      className = props.className,
+      providedClasses = props.classes,
       other = _objectWithoutProperties(props, _excluded);
 
   deprecatedPropsWarning({
@@ -88,6 +120,7 @@ export function DateRangePickerViewDesktop(props) {
   var leftArrowButtonText = leftArrowButtonTextProp != null ? leftArrowButtonTextProp : localeText.previousMonth;
   var rightArrowButtonText = rightArrowButtonTextProp != null ? rightArrowButtonTextProp : localeText.nextMonth;
   var utils = useUtils();
+  var classes = useUtilityClasses(props);
   var defaultDates = useDefaultDates();
   var minDate = minDateProp != null ? minDateProp : defaultDates.minDate;
   var maxDate = maxDateProp != null ? maxDateProp : defaultDates.maxDate;
@@ -138,9 +171,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(function (_, index) {
       var monthOnIteration = utils.setMonth(currentMonth, utils.getMonth(currentMonth) + index);
       return /*#__PURE__*/_jsxs(DateRangePickerViewDesktopContainer, {
+        className: classes.container,
         children: [/*#__PURE__*/_jsx(DateRangePickerViewDesktopArrowSwitcher, {
           onLeftClick: selectPreviousMonth,
           onRightClick: selectNextMonth,

package/legacy/DateRangePicker/DateRangePickerViewMobile.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["changeMonth", "components", "componentsProps", "parsedValue", "leftArrowButtonText", "maxDate", "minDate", "onSelectedDaysChange", "renderDay", "rightArrowButtonText", "disabled", "readOnly"];
+var _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';
@@ -30,6 +30,7 @@ export function DateRangePickerViewMobile(props) {
       rightArrowButtonText = props.rightArrowButtonText,
       disabled = props.disabled,
       readOnly = props.readOnly,
+      providedClasses = props.classes,
       other = _objectWithoutProperties(props, _excluded);
 
   var utils = useUtils();

package/legacy/DateRangePicker/dateRangePickerInputClasses.js

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

package/legacy/DateRangePicker/dateRangePickerToolbarClasses.js

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

package/legacy/DateRangePicker/dateRangePickerViewDesktopClasses.js

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

package/legacy/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/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -1,12 +1,12 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["className", "day", "outsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "selected"];
 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';
@@ -46,14 +46,14 @@ var startBorderStyle = {
 var DateRangePickerDayRoot = styled('div', {
   name: 'MuiDateRangePickerDay',
   slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.root;
+  overridesResolver: function overridesResolver(_, styles) {
+    return [_defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayHighlight), styles.rangeIntervalDayHighlight), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayHighlightStart), styles.rangeIntervalDayHighlightStart), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayHighlightEnd), styles.rangeIntervalDayHighlightEnd), styles.root];
   }
-})(function (_ref) {
+})(function (_ref4) {
   var _extends2;
 
-  var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+  var theme = _ref4.theme,
+      ownerState = _ref4.ownerState;
   return _extends((_extends2 = {}, _defineProperty(_extends2, "&:first-of-type .".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), _extends({}, startBorderStyle, {
     borderLeftColor: theme.palette.divider
   })), _defineProperty(_extends2, "&:last-of-type .".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), _extends({}, endBorderStyle, {
@@ -81,10 +81,13 @@ DateRangePickerDayRoot.propTypes = {
 };
 var DateRangePickerDayRangeIntervalPreview = styled('div', {
   name: 'MuiDateRangePickerDay',
-  slot: 'RangeIntervalPreview'
-})(function (_ref2) {
-  var theme = _ref2.theme,
-      ownerState = _ref2.ownerState;
+  slot: 'RangeIntervalPreview',
+  overridesResolver: function overridesResolver(_, styles) {
+    return [_defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayPreview), styles.rangeIntervalDayPreview), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayPreviewStart), styles.rangeIntervalDayPreviewStart), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.rangeIntervalDayPreviewEnd), styles.rangeIntervalDayPreviewEnd), styles.rangeIntervalPreview];
+  }
+})(function (_ref8) {
+  var theme = _ref8.theme,
+      ownerState = _ref8.ownerState;
   return _extends({
     // replace default day component margin with transparent border to avoid jumping on preview
     border: '2px solid transparent'
@@ -108,10 +111,13 @@ DateRangePickerDayRangeIntervalPreview.propTypes = {
 };
 var DateRangePickerDayDay = styled(PickersDay, {
   name: 'MuiDateRangePickerDay',
-  slot: 'Day'
-})(function (_ref3) {
-  var theme = _ref3.theme,
-      ownerState = _ref3.ownerState;
+  slot: 'Day',
+  overridesResolver: function overridesResolver(_, styles) {
+    return [_defineProperty({}, "&.".concat(dateRangePickerDayClasses.dayInsideRangeInterval), styles.dayInsideRangeInterval), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.dayOutsideRangeInterval), styles.dayOutsideRangeInterval), _defineProperty({}, "&.".concat(dateRangePickerDayClasses.notSelectedDate), styles.notSelectedDate), styles.day];
+  }
+})(function (_ref12) {
+  var theme = _ref12.theme,
+      ownerState = _ref12.ownerState;
   return _extends({
     // Required to overlap preview border
     transform: 'scale(1.1)',
@@ -128,7 +134,12 @@ var DateRangePickerDayDay = styled(PickersDay, {
     color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6))
   });
 });
-var DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(props, ref) {
+var DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiDateRangePickerDay'
+  });
+
   var className = props.className,
       day = props.day,
       outsideCurrentMonth = props.outsideCurrentMonth,

package/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["displayStaticWrapperAs", "value", "onChange", "components", "componentsProps"];
+var _excluded = ["displayStaticWrapperAs", "value", "onChange", "components", "componentsProps", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier } from '@mui/x-license-pro';
@@ -45,6 +45,7 @@ export var StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function Static
       onChange = props.onChange,
       components = props.components,
       componentsProps = props.componentsProps,
+      className = props.className,
       other = _objectWithoutProperties(props, _excluded);
 
   var DateInputProps = _extends({}, inputProps, other, {
@@ -59,7 +60,8 @@ export var StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function Static
   return /*#__PURE__*/_jsx(PickerStaticWrapper, _extends({
     displayStaticWrapperAs: displayStaticWrapperAs,
     components: components,
-    componentsProps: componentsProps
+    componentsProps: componentsProps,
+    className: className
   }, wrapperProps, {
     children: /*#__PURE__*/_jsx(DateRangePickerView, _extends({
       open: wrapperProps.open,

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.0.0
+/** @license MUI v5.0.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY2MjA2NjAwMDAwMA==";
+  var releaseInfo = "MTY2MzI5NzIwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/modern/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;
@@ -131,6 +156,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/modern/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 => {
       })]
     })
   });
-};
+});