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

package/CHANGELOG.md

@@ -3,6 +3,124 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.11.2
+
+_Aug 17, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🏎️ Lower the filtering delay in the grid
+- 🌍 Improve Spanish (es-ES) locale on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.11.2`
+
+- [DataGrid] Fix `eval` blocked by CSP (#9863) @romgrk
+- [DataGrid] Fix row id bug (#10051) @romgrk
+- [DataGrid] Honor `disableExport` flag in Print Export (#10044) @MBilalShafi
+- [DataGrid] Lower filter debounce delay (#9712) @romgrk
+- [DataGrid] Unhide potential ref binding issue (#9965) @oliviertassinari
+- [l10n] Improve Chinese (zh-CN) and Chinese(traditional) (zh-TW) locales (#9999) @MyNameIsTakenOMG
+- [l10n] Improve Spanish (es-ES) locale (#10037) @Macampu420
+
+#### `@mui/x-data-grid-pro@v6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@v6.11.2`.
+
+#### `@mui/x-data-grid-premium@v6.11.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@v6.11.2`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.11.2`
+
+- [pickers] Fix month switcher RTL (#10003) @alexfauquette
+- [pickers] Follow-up on using device motion reduction preference (#9858) @LukasTy
+- [pickers] Pass the shortcut information in the `onChange` context (#9985) @flaviendelangle
+- [pickers] Replace `Grid` toolbar component with a styled `div` (#10052) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.11.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@v6.11.2`.
+
+### Docs
+
+- [docs] Add migration guide for the Tree View (#9987) @flaviendelangle
+- [docs] Fix en-US changelog @oliviertassinari
+- [docs] Update column types (#10040) @romgrk
+
+### Core
+
+- [core] Remove unnecessary Box (#9831) @oliviertassinari
+- [core] Set GitHub Action top level permission @oliviertassinari
+- [core] Split the pickers test utils (#9976) @flaviendelangle
+
+## 6.11.1
+
+_Aug 11, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Add theme augmentation to `@mui/x-tree-view`
+- 📈 Enable charts customization using `slot` and `slotProps` props
+- 🌍 Improve Finnish (fi-FI) and Icelandic (is-IS) locales on the pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.11.1`
+
+- [DataGrid] `getCellAggregationResult`: Handle `null` `rowNode` case (#9915) @romgrk
+
+#### `@mui/x-data-grid-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@6.11.1`.
+
+#### `@mui/x-data-grid-premium@6.11.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@6.11.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.11.1`
+
+- [fields] Use `numeric` `inputmode` instead of `tel` (#9918) @LukasTy
+- [pickers] Always respect locale when formatting meridiem (#9979) @flaviendelangle
+- [pickers] Call `onChange` when selecting a shortcut with `changeImportance="set"` (#9974) @flaviendelangle
+- [pickers] Refactor `themeAugmentation` `styleOverrides` (#9978) @LukasTy
+- [l10n] Improve Finnish (fi-FI) locale (#9795) @kurkle
+- [l10n] Improve Icelandic (is-IS) locale (#9639) @magnimarels
+
+#### `@mui/x-date-pickers-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@6.11.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.7`
+
+- [charts] Fix label and tick alignment (#9952) @LukasTy
+- [charts] Remove not functional component `styleOverrides` (#9996) @LukasTy
+- [charts] Set custom ticks number (#9922) @alexfauquette
+- [charts] Use `slot`/`slotProps` for customization (#9744) @alexfauquette
+- [charts] Extend cheerful fiesta palette (#9980) @noraleonte
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.1`
+
+- [TreeView] Add theme augmentation (#9967) @flaviendelangle
+
+### Docs
+
+- [docs] Clarify the `shouldDisableClock` migration code options (#9920) @LukasTy
+
+### Core
+
+- [core] Port GitHub workflow for ensuring triage label is present (#9924) @DanailH
+- [docs-infra] Fix the import samples in Api pages (#9898) @alexfauquette
+
 ## 6.11.0
 
 _Aug 4, 2023_
@@ -2810,7 +2928,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 #### Changes
 
-- [DateRangePicker] Fix input focused style and mobile behaviour (#6645) @LukasTy
+- [DateRangePicker] Fix input focused style and mobile behavior (#6645) @LukasTy
 - [fields] Update sections when the locale changes (#6649) @flaviendelangle
 - [pickers] Add Ukrainian (uk-UA) locale (#6661) @Dufran
 - [pickers] Allow non-controlled usage of the calendar components (#6643) @flaviendelangle

package/DateRangeCalendar/DateRangeCalendar.js

@@ -610,8 +610,8 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
    */
   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/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -45,8 +45,8 @@ export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalend
      */
     readOnly?: boolean;
     /**
-     * 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?: boolean;
     /**

package/DateRangePicker/DateRangePicker.js

@@ -251,8 +251,8 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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/DateRangePickerDay/DateRangePickerDay.js

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

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -260,8 +260,8 @@ DesktopDateRangePicker.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/MobileDateRangePicker/MobileDateRangePicker.js

@@ -260,8 +260,8 @@ MobileDateRangePicker.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/MultiInputDateRangeField/MultiInputDateRangeField.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { MultiInputDateRangeFieldProps } from './MultiInputDateRangeField.types';
+import { MultiInputRangeFieldClasses } from '../models';
+export declare const multiInputDateRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputDateRangeFieldUtilityClass: (slot: string) => string;
 type MultiInputDateRangeFieldComponent = (<TDate>(props: MultiInputDateRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/MultiInputDateRangeField/MultiInputDateRangeField.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 { useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const multiInputDateRangeFieldClasses = generateUtilityClasses('MuiMultiInputDateRangeField', ['root', 'separator']);
+export const getMultiInputDateRangeFieldUtilityClass = slot => generateUtilityClass('MuiMultiInputDateRangeField', slot);
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    separator: ['separator']
+  };
+  return composeClasses(slots, getMultiInputDateRangeFieldUtilityClass, classes);
+};
 const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
   ref: ref,
   spacing: 2,
@@ -52,12 +66,14 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -66,7 +82,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: clsx(className, classes.root)
   });
   const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const startTextFieldProps = useSlotProps({
@@ -90,7 +107,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: (_slotProps$separator = slotProps == null ? void 0 : slotProps.separator) != null ? _slotProps$separator : componentsProps == null ? void 0 : componentsProps.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputDateRan = useMultiInputDateRangeField({
       sharedProps: _extends({}, dateFieldInternalProps, {
@@ -152,7 +170,12 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   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/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -9,6 +9,7 @@ import { UseDateRangeFieldProps } from '../internals/models/dateRange';
 import { RangePosition } from '../internals/models/range';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { RangeFieldSection } from '../internals/models/fields';
+import { MultiInputRangeFieldClasses } from '../models';
 export type UseMultiInputDateRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateRangeFieldProps<TDate>, TTextFieldSlotProps>;
 export interface UseMultiInputDateRangeFieldProps<TDate> extends Omit<UseDateRangeFieldProps<TDate>, 'unstableFieldRef'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
@@ -17,6 +18,10 @@ export interface UseMultiInputDateRangeFieldProps<TDate> extends Omit<UseDateRan
 export type UseMultiInputDateRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputDateRangeFieldProps<TDate>> & UseMultiInputDateRangeFieldProps<TDate>;
 export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, Omit<StackProps, 'position'>> {
     autoFocus?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputRangeFieldClasses>;
     /**
      * Overridable components.
      * @default {}

package/MultiInputDateRangeField/index.d.ts

@@ -1,3 +1,3 @@
-export { MultiInputDateRangeField } from './MultiInputDateRangeField';
+export { MultiInputDateRangeField, getMultiInputDateRangeFieldUtilityClass, multiInputDateRangeFieldClasses, } from './MultiInputDateRangeField';
 export { useMultiInputDateRangeField as unstable_useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
 export type { UseMultiInputDateRangeFieldProps, UseMultiInputDateRangeFieldComponentProps, MultiInputDateRangeFieldProps, } from './MultiInputDateRangeField.types';

package/MultiInputDateRangeField/index.js

@@ -1,2 +1,2 @@
-export { MultiInputDateRangeField } from './MultiInputDateRangeField';
+export { MultiInputDateRangeField, getMultiInputDateRangeFieldUtilityClass, multiInputDateRangeFieldClasses } from './MultiInputDateRangeField';
 export { useMultiInputDateRangeField as unstable_useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { MultiInputDateTimeRangeFieldProps } from './MultiInputDateTimeRangeField.types';
+import { MultiInputRangeFieldClasses } from '../models';
+export declare const multiInputDateTimeRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputDateTimeRangeFieldUtilityClass: (slot: string) => string;
 type MultiInputDateTimeRangeFieldComponent = (<TDate>(props: MultiInputDateTimeRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/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,
@@ -52,12 +66,14 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputDateTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -66,7 +82,8 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: clsx(className, classes.root)
   });
   const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const startTextFieldProps = useSlotProps({
@@ -90,7 +107,8 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputDateTim = useMultiInputDateTimeRangeField({
       sharedProps: _extends({}, dateTimeFieldInternalProps, {
@@ -157,7 +175,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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -9,6 +9,7 @@ import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps } fro
 import { RangePosition } from '../internals/models/range';
 import { RangeFieldSection } from '../internals/models/fields';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
+import { MultiInputRangeFieldClasses } from '../models';
 export type UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateTimeRangeFieldProps<TDate>, TTextFieldSlotProps>;
 export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends Omit<UseDateTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
@@ -17,6 +18,10 @@ export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends Omit<UseDat
 export type UseMultiInputDateTimeRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputDateTimeRangeFieldProps<TDate>> & UseMultiInputDateTimeRangeFieldProps<TDate>;
 export interface MultiInputDateTimeRangeFieldProps<TDate> extends UseMultiInputDateTimeRangeFieldComponentProps<TDate, Omit<StackProps, 'position'>> {
     autoFocus?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputRangeFieldClasses>;
     /**
      * Overridable components.
      * @default {}

package/MultiInputDateTimeRangeField/index.d.ts

@@ -1,3 +1,3 @@
-export { MultiInputDateTimeRangeField } from './MultiInputDateTimeRangeField';
+export { MultiInputDateTimeRangeField, getMultiInputDateTimeRangeFieldUtilityClass, multiInputDateTimeRangeFieldClasses, } from './MultiInputDateTimeRangeField';
 export { useMultiInputDateTimeRangeField as unstable_useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
 export type { UseMultiInputDateTimeRangeFieldProps, UseMultiInputDateTimeRangeFieldComponentProps, MultiInputDateTimeRangeFieldProps, } from './MultiInputDateTimeRangeField.types';

package/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/MultiInputTimeRangeField/MultiInputTimeRangeField.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { MultiInputTimeRangeFieldProps } from './MultiInputTimeRangeField.types';
+import { MultiInputRangeFieldClasses } from '../models';
+export declare const multiInputTimeRangeFieldClasses: MultiInputRangeFieldClasses;
+export declare const getMultiInputTimeRangeFieldUtilityClass: (slot: string) => string;
 type MultiInputTimeRangeFieldComponent = (<TDate>(props: MultiInputTimeRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/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,
@@ -52,12 +66,14 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disabled,
       autoFocus,
       unstableStartFieldRef,
-      unstableEndFieldRef
+      unstableEndFieldRef,
+      className
     } = forwardedProps,
     otherForwardedProps = _objectWithoutPropertiesLoose(forwardedProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
   const slotProps = innerSlotProps != null ? innerSlotProps : componentsProps;
   const ownerState = themeProps;
+  const classes = useUtilityClasses(ownerState);
   const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : MultiInputTimeRangeFieldRoot;
   const rootProps = useSlotProps({
     elementType: Root,
@@ -66,7 +82,8 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     additionalProps: {
       ref
     },
-    ownerState
+    ownerState,
+    className: clsx(className, classes.root)
   });
   const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : MuiTextField;
   const startTextFieldProps = useSlotProps({
@@ -90,7 +107,8 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const separatorProps = useSlotProps({
     elementType: Separator,
     externalSlotProps: slotProps == null ? void 0 : slotProps.separator,
-    ownerState
+    ownerState,
+    className: classes.separator
   });
   const _useMultiInputTimeRan = useMultiInputTimeRangeField({
       sharedProps: _extends({}, timeFieldInternalProps, {
@@ -157,7 +175,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/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -9,6 +9,7 @@ import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../in
 import { RangePosition } from '../internals/models/range';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { RangeFieldSection } from '../internals/models/fields';
+import { MultiInputRangeFieldClasses } from '../models';
 export type UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputTimeRangeFieldProps<TDate>, TTextFieldSlotProps>;
 export interface UseMultiInputTimeRangeFieldProps<TDate> extends Omit<UseTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
@@ -17,6 +18,10 @@ export interface UseMultiInputTimeRangeFieldProps<TDate> extends Omit<UseTimeRan
 export type UseMultiInputTimeRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputTimeRangeFieldProps<TDate>> & UseMultiInputTimeRangeFieldProps<TDate>;
 export interface MultiInputTimeRangeFieldProps<TDate> extends UseMultiInputTimeRangeFieldComponentProps<TDate, Omit<StackProps, 'position'>> {
     autoFocus?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<MultiInputRangeFieldClasses>;
     /**
      * Overridable components.
      * @default {}

package/MultiInputTimeRangeField/index.d.ts

@@ -1,3 +1,3 @@
-export { MultiInputTimeRangeField } from './MultiInputTimeRangeField';
+export { MultiInputTimeRangeField, getMultiInputTimeRangeFieldUtilityClass, multiInputTimeRangeFieldClasses, } from './MultiInputTimeRangeField';
 export { useMultiInputTimeRangeField as unstable_useMultiInputTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField';
 export type { UseMultiInputTimeRangeFieldProps, UseMultiInputTimeRangeFieldComponentProps, MultiInputTimeRangeFieldProps, } from './MultiInputTimeRangeField.types';

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

@@ -86,6 +86,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/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -91,6 +91,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/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -91,6 +91,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/StaticDateRangePicker/StaticDateRangePicker.js

@@ -210,8 +210,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/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