@mui/x-date-pickers-pro 6.11.0 → 6.11.2

package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,19 +1,33 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import { splitFieldInternalAndForwardedProps, uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const multiInputDateTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
+export const getMultiInputDateTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateTimeRangeField', slot);
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    separator: ['separator']
+  };
+  return composeClasses(slots, getMultiInputDateTimeRangeFieldUtilityClass, classes);
+};
 const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
   ref: ref,
   spacing: 2,
@@ -48,12 +62,14 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -62,7 +78,8 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: clsx(className, classes.root)
   });
   const TextField = slots?.textField ?? MuiTextField;
   const startTextFieldProps = useSlotProps({
@@ -86,7 +103,8 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputDateTim = useMultiInputDateTimeRangeField({
       sharedProps: _extends({}, dateTimeFieldInternalProps, {
@@ -153,7 +171,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   ampm: PropTypes.bool,
   autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/MultiInputDateTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputDateTimeRangeField } from './MultiInputDateTimeRangeField';
+export { MultiInputDateTimeRangeField, getMultiInputDateTimeRangeFieldUtilityClass, multiInputDateTimeRangeFieldClasses } from './MultiInputDateTimeRangeField';
 export { useMultiInputDateTimeRangeField as unstable_useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';

package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,19 +1,33 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { clsx } from 'clsx';
 import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 import { splitFieldInternalAndForwardedProps, uncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { useMultiInputTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const multiInputTimeRangeFieldClasses = generateUtilityClasses('MuiMultiInputTimeRangeField', ['root', 'separator']);
+export const getMultiInputTimeRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputTimeRangeField', slot);
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    separator: ['separator']
+  };
+  return composeClasses(slots, getMultiInputTimeRangeFieldUtilityClass, classes);
+};
 const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
   ref: ref,
   spacing: 2,
@@ -48,12 +62,14 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const slots = innerSlots ?? uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = slots?.root ?? MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -62,7 +78,8 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: clsx(className, classes.root)
   });
   const TextField = slots?.textField ?? MuiTextField;
   const startTextFieldProps = useSlotProps({
@@ -86,7 +103,8 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputTimeRan = useMultiInputTimeRangeField({
       sharedProps: _extends({}, timeFieldInternalProps, {
@@ -153,7 +171,12 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    */
   ampm: PropTypes.bool,
   autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/MultiInputTimeRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputTimeRangeField } from './MultiInputTimeRangeField';
+export { MultiInputTimeRangeField, getMultiInputTimeRangeFieldUtilityClass, multiInputTimeRangeFieldClasses } from './MultiInputTimeRangeField';
 export { useMultiInputTimeRangeField as unstable_useMultiInputTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField';

package/modern/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -85,6 +85,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -90,6 +90,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -90,6 +90,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
   /**
    * Overridable components.
    * @default {}

package/modern/StaticDateRangePicker/StaticDateRangePicker.js

@@ -209,8 +209,8 @@ StaticDateRangePicker.propTypes = {
   rangePosition: PropTypes.oneOf(['end', 'start']),
   readOnly: PropTypes.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: PropTypes.bool,
   /**

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.11.0
+ * @mui/x-date-pickers-pro v6.11.2
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -33,7 +33,8 @@ export const useDesktopRangePicker = _ref => {
     disabled,
     autoFocus,
     disableOpenPicker,
-    localeText
+    localeText,
+    reduceAnimations
   } = props;
   const fieldContainerRef = React.useRef(null);
   const popperRef = React.useRef(null);
@@ -122,6 +123,7 @@ export const useDesktopRangePicker = _ref => {
       slots: slots,
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
+      reduceAnimations: reduceAnimations,
       children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
         slots: slots,
         slotProps: slotPropsForLayout,

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY5MTA4OTIwMDAwMA==";
+  const releaseInfo = "MTY5MjI0NDgwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/models/index.js

@@ -1 +1,2 @@
-export * from './validation';
+export * from './validation';
+export * from './multiInputRangeFieldClasses';

package/modern/models/multiInputRangeFieldClasses.js

@@ -0,0 +1 @@
+export {};

package/modern/tests/describeRangeValidation/testDayViewRangeValidation.js

@@ -5,7 +5,7 @@ const _excluded = ["defaultCalendarMonth"],
 import * as React from 'react';
 import { expect } from 'chai';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const isDisable = el => el.getAttribute('disabled') !== null;
 const testDisabledDate = (day, expectedAnswer, isDesktop) => {

package/modern/tests/describeRangeValidation/testTextFieldKeyboardRangeValidation.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { act } from '@mui/monorepo/test/utils/createRenderer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testInvalidStatus = (expectedAnswer, isSingleInput) => {

package/modern/tests/describeRangeValidation/testTextFieldRangeValidation.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { screen } from '@mui/monorepo/test/utils';
-import { adapterToUse } from 'test/utils/pickers-utils';
+import { adapterToUse } from 'test/utils/pickers';
 import { jsx as _jsx } from "react/jsx-runtime";
 const testInvalidStatus = (expectedAnswer, isSingleInput) => {
   const answers = isSingleInput ? [expectedAnswer[0] || expectedAnswer[1]] : expectedAnswer;

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -615,8 +615,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   readOnly: _propTypes.default.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: _propTypes.default.bool,
   /**

package/node/DateRangePicker/DateRangePicker.js

@@ -261,8 +261,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
   readOnly: _propTypes.default.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: _propTypes.default.bool,
   /**

package/node/DateRangePickerDay/DateRangePickerDay.js

@@ -242,6 +242,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  component: _propTypes.default.elementType,
   /**
    * The date to show.
    */

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -266,8 +266,8 @@ DesktopDateRangePicker.propTypes = {
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
   readOnly: _propTypes.default.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: _propTypes.default.bool,
   /**

package/node/MobileDateRangePicker/MobileDateRangePicker.js

@@ -266,8 +266,8 @@ MobileDateRangePicker.propTypes = {
   rangePosition: _propTypes.default.oneOf(['end', 'start']),
   readOnly: _propTypes.default.bool,
   /**
-   * Disable heavy animations.
-   * @default typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
+   * If `true`, disable heavy animations.
+   * @default `@media(prefers-reduced-motion: reduce)` || typeof navigator !== 'undefined' && /(android)/i.test(navigator.userAgent)
    */
   reduceAnimations: _propTypes.default.bool,
   /**

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -4,24 +4,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MultiInputDateRangeField = void 0;
+exports.multiInputDateRangeFieldClasses = exports.getMultiInputDateRangeFieldUtilityClass = exports.MultiInputDateRangeField = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputDateRangeField = require("../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const multiInputDateRangeFieldClasses = (0, _utils2.unstable_generateUtilityClasses)('MuiMultiInputDateRangeField', ['root', 'separator']);
+exports.multiInputDateRangeFieldClasses = multiInputDateRangeFieldClasses;
+const getMultiInputDateRangeFieldUtilityClass = slot => (0, _utils2.unstable_generateUtilityClass)('MuiMultiInputDateRangeField', slot);
+exports.getMultiInputDateRangeFieldUtilityClass = getMultiInputDateRangeFieldUtilityClass;
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    separator: ['separator']
+  };
+  return (0, _utils2.unstable_composeClasses)(slots, getMultiInputDateRangeFieldUtilityClass, classes);
+};
 const MultiInputDateRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, (0, _extends2.default)({
   ref: ref,
   spacing: 2,
@@ -56,12 +72,14 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
   const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = slots?.root ?? MultiInputDateRangeFieldRoot;
   const rootProps = (0, _utils.useSlotProps)({
     elementType: Root,
@@ -70,7 +88,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: (0, _clsx.default)(className, classes.root)
   });
   const TextField = slots?.textField ?? _TextField.default;
   const startTextFieldProps = (0, _utils.useSlotProps)({
@@ -94,7 +113,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const separatorProps = (0, _utils.useSlotProps)({
     elementType: Separator,
     externalSlotProps: slotProps?.separator ?? componentsProps?.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputDateRan = (0, _useMultiInputDateRangeField.useMultiInputDateRangeField)({
       sharedProps: (0, _extends2.default)({}, dateFieldInternalProps, {
@@ -157,7 +177,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   autoFocus: _propTypes.default.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  component: _propTypes.default.elementType,
   /**
    * Overridable components.
    * @default {}

package/node/MultiInputDateRangeField/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "MultiInputDateRangeField", {
     return _MultiInputDateRangeField.MultiInputDateRangeField;
   }
 });
+Object.defineProperty(exports, "getMultiInputDateRangeFieldUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _MultiInputDateRangeField.getMultiInputDateRangeFieldUtilityClass;
+  }
+});
+Object.defineProperty(exports, "multiInputDateRangeFieldClasses", {
+  enumerable: true,
+  get: function () {
+    return _MultiInputDateRangeField.multiInputDateRangeFieldClasses;
+  }
+});
 Object.defineProperty(exports, "unstable_useMultiInputDateRangeField", {
   enumerable: true,
   get: function () {

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -4,24 +4,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MultiInputDateTimeRangeField = void 0;
+exports.multiInputDateTimeRangeFieldClasses = exports.getMultiInputDateTimeRangeFieldUtilityClass = exports.MultiInputDateTimeRangeField = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _internals = require("@mui/x-date-pickers/internals");
 var _useMultiInputDateTimeRangeField = require("../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const multiInputDateTimeRangeFieldClasses = (0, _utils2.unstable_generateUtilityClasses)('MuiMultiInputDateTimeRangeField', ['root', 'separator']);
+exports.multiInputDateTimeRangeFieldClasses = multiInputDateTimeRangeFieldClasses;
+const getMultiInputDateTimeRangeFieldUtilityClass = slot => (0, _utils2.unstable_generateUtilityClass)('MuiMultiInputDateTimeRangeField', slot);
+exports.getMultiInputDateTimeRangeFieldUtilityClass = getMultiInputDateTimeRangeFieldUtilityClass;
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    separator: ['separator']
+  };
+  return (0, _utils2.unstable_composeClasses)(slots, getMultiInputDateTimeRangeFieldUtilityClass, classes);
+};
 const MultiInputDateTimeRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, (0, _extends2.default)({
   ref: ref,
   spacing: 2,
@@ -56,12 +72,14 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = (0, _objectWithoutPropertiesLoose2.default)(forwardedProps, _excluded);
   const slots = innerSlots ?? (0, _internals.uncapitalizeObjectKeys)(components);
   const slotProps = innerSlotProps ?? componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = slots?.root ?? MultiInputDateTimeRangeFieldRoot;
   const rootProps = (0, _utils.useSlotProps)({
     elementType: Root,
@@ -70,7 +88,8 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: (0, _clsx.default)(className, classes.root)
   });
   const TextField = slots?.textField ?? _TextField.default;
   const startTextFieldProps = (0, _utils.useSlotProps)({
@@ -94,7 +113,8 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const separatorProps = (0, _utils.useSlotProps)({
     elementType: Separator,
     externalSlotProps: slotProps?.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputDateTim = (0, _useMultiInputDateTimeRangeField.useMultiInputDateTimeRangeField)({
       sharedProps: (0, _extends2.default)({}, dateTimeFieldInternalProps, {
@@ -162,7 +182,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    */
   ampm: _propTypes.default.bool,
   autoFocus: _propTypes.default.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  component: _propTypes.default.elementType,
   /**
    * Overridable components.
    * @default {}

package/node/MultiInputDateTimeRangeField/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "MultiInputDateTimeRangeField", {
     return _MultiInputDateTimeRangeField.MultiInputDateTimeRangeField;
   }
 });
+Object.defineProperty(exports, "getMultiInputDateTimeRangeFieldUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _MultiInputDateTimeRangeField.getMultiInputDateTimeRangeFieldUtilityClass;
+  }
+});
+Object.defineProperty(exports, "multiInputDateTimeRangeFieldClasses", {
+  enumerable: true,
+  get: function () {
+    return _MultiInputDateTimeRangeField.multiInputDateTimeRangeFieldClasses;
+  }
+});
 Object.defineProperty(exports, "unstable_useMultiInputDateTimeRangeField", {
   enumerable: true,
   get: function () {