@mui/x-date-pickers-pro 6.10.2 → 6.11.1

package/CHANGELOG.md

@@ -3,6 +3,160 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⌚️ Move the tree view component from `@mui/lab` package
+
+  The `<TreeView />` component has been moved to the MUI X repository.
+  It is now accessible from its own package: `@mui/x-tree-view`.
+
+- 🌍 Improve Hebrew (he-IL), Finnish (fi-FI), and Italian (it-IT) locales on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@v6.11.0`
+
+- [DataGrid] Add `ariaV7` experimental flag (#9496) @cherniavskii
+- [DataGrid] Fix cell size when column width is set to `undefined` (#9871) @gitstart
+- [l10n] Improve Hebrew (he-IL) locale (#9820) @itayG98
+- [l10n] Improve Finnish (fi-FI) locale (#9848) @sambbaahh
+- [l10n] Improve Italian (it-IT) locale (#9627) @fabio-rizzello-omnia
+
+#### `@mui/x-data-grid-pro@v6.11.0` [![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.0`.
+
+#### `@mui/x-data-grid-premium@v6.11.0` [![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.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@v6.11.0`
+
+- [fields] Correctly handle events with a complete value insertion (#9896) @LukasTy
+- [fields] Fix hours editing on dayjs with timezone and DST (#9901) @flaviendelangle
+- [fields] Fix section clearing with timezone (#9819) @flaviendelangle
+- [pickers] Add `CalendarHeader` slot (#7784) @flaviendelangle
+- [pickers] Allow to override the `InputProps` of the `TextField` using the `slotProps` (#9849) @flaviendelangle
+- [pickers] Allow to override the opening aria text using the `localeText` prop on the pickers (#9870) @flaviendelangle
+- [pickers] Fix `sx` and `className` props on `MobileDateRangePicker` (#9853) @flaviendelangle
+- [pickers] Fix default descriptions (#9887) @LukasTy
+- [pickers] Fix offset management on dayjs adapter (#9884) @flaviendelangle
+- [pickers] Use device motion reduction preference (#9823) @LukasTy
+
+#### `@mui/x-date-pickers-pro@v6.11.0` [![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.0`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.6`
+
+- [charts] Add TS definition to the exported elements (#9885) @alexfauquette
+- [charts] Add sparkline (#9662) @alexfauquette
+- [charts] Fix missing configuration types (#9886) @alexfauquette
+- [charts] Introduce dataset to simplify plot of data from API (#9774) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.0`
+
+- [TreeView] Add missing exported types (#9862) @flaviendelangle
+- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
+- [TreeView] Create the package on the X repository (#9798) @flaviendelangle
+- [TreeView] Improve props typing (#9855) @flaviendelangle
+
+### Docs
+
+- [docs] Add Tree View doc (#9825) @flaviendelangle
+- [docs] Add charts nav item (#9821) @LukasTy
+- [docs] Add charts to MUI X introduction pages (#9704) @joserodolfofreitas
+- [docs] Add example for avoiding picker views layout shift (#9781) @noraleonte
+- [docs] Consistency of Next.js App Router @oliviertassinari
+- [docs] Fix API page regression: bring back slots section (#9866) @alexfauquette
+- [docs] Fix demo using Pro while it's MIT (#9842) @oliviertassinari
+- [docs] Get ready for next docs-infra change @oliviertassinari
+- [docs] Improve the slots documentation `Recommended usage` section (#9892) @flaviendelangle
+
+### Core
+
+- [core] Fix font loading issue dev-mode (#9843) @oliviertassinari
+- [core] Fix pipeline (#9894) @LukasTy
+- [core] Fix the link-check script on Windows (#9888) @alexfauquette
+- [core] Fix v7 capitalization (#9878) @oliviertassinari
+- [core] Regen doc (#9902) @flaviendelangle
+- [core] Remove benchmark package (#9413) @LukasTy
+- [core] Stop using the deprecated `JSX` global namespace (#9854) @flaviendelangle
+- [core] Update monorepo (#9846) @flaviendelangle
+- [core] Update tree data API docs (#9827) @cherniavskii
+- [test] Add pickers e2e tests (#9747) @LukasTy
+- [test] Data grid e2e tests follow-up (#9822) @cherniavskii
+
 ## 6.10.2
 
 _Jul 27, 2023_

package/DateRangeCalendar/DateRangeCalendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateRangeCalendarProps } from './DateRangeCalendar.types';
-type DateRangeCalendarComponent = (<TDate>(props: DateRangeCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DateRangeCalendarComponent = (<TDate>(props: DateRangeCalendarProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DateRangeCalendar: DateRangeCalendarComponent;

package/DateRangeCalendar/DateRangeCalendar.js

@@ -11,7 +11,8 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, uncapitalizeObjectKeys, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, useDefaultReduceAnimations, PickersArrowSwitcher, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, useNow, uncapitalizeObjectKeys, DEFAULT_DESKTOP_MODE_MEDIA_QUERY, buildWarning, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internals/utils/date-utils';
@@ -77,6 +78,7 @@ function useDateRangeCalendarDefaultizedProps(props, name) {
   var _themeProps$renderLoa, _themeProps$reduceAni, _props$loading, _props$disablePast, _props$disableFuture, _themeProps$calendars, _themeProps$disableDr;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
+  const defaultReduceAnimations = useDefaultReduceAnimations();
   const themeProps = useThemeProps({
     props,
     name

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '@mui/base/utils';
 import { Theme } from '@mui/material/styles';
 import { TimezoneProps } from '@mui/x-date-pickers/models';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, DayCalendarProps, ExportedUseViewsOptions, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, DayCalendarProps, ExportedUseViewsOptions, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRange, DayRangeValidationProps } from '../internals/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';

package/DateRangePicker/DateRangePicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DateRangePickerProps } from './DateRangePicker.types';
-type DatePickerComponent = (<TDate>(props: DateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DatePickerComponent = (<TDate>(props: DateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DateRangePicker: DatePickerComponent;

package/DateRangePickerDay/DateRangePickerDay.d.ts

@@ -35,7 +35,7 @@ export interface DateRangePickerDayProps<TDate> extends Omit<PickersDayProps<TDa
      */
     isVisuallySelected?: boolean;
 }
-type DateRangePickerDayComponent = <TDate>(props: DateRangePickerDayProps<TDate> & React.RefAttributes<HTMLButtonElement>) => JSX.Element;
+type DateRangePickerDayComponent = <TDate>(props: DateRangePickerDayProps<TDate> & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
 /**
  *
  * Demos:

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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DesktopDateRangePickerProps } from './DesktopDateRangePicker.types';
-type DesktopDateRangePickerComponent = (<TDate>(props: DesktopDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type DesktopDateRangePickerComponent = (<TDate>(props: DesktopDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const DesktopDateRangePicker: DesktopDateRangePickerComponent;

package/MobileDateRangePicker/MobileDateRangePicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MobileDateRangePickerProps } from './MobileDateRangePicker.types';
-type MobileDateRangePickerComponent = (<TDate>(props: MobileDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+type MobileDateRangePickerComponent = (<TDate>(props: MobileDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 declare const MobileDateRangePicker: MobileDateRangePickerComponent;

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { extractValidationProps } from '@mui/x-date-pickers/internals';
@@ -14,8 +12,7 @@ import { validateDateRange } from '../internals/utils/validation/validateDateRan
 const MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileDateRangePicker(inProps, ref) {
   var _defaultizedProps$slo2;
   // Props with the default values common to all date time pickers
-  const _useDateRangePickerDe = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker'),
-    defaultizedProps = _objectWithoutPropertiesLoose(_useDateRangePickerDe, _excluded);
+  const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiMobileDateRangePicker');
   const viewRenderers = _extends({
     day: renderDateRangeViewCalendar
   }, defaultizedProps.viewRenderers);

package/MultiInputDateRangeField/MultiInputDateRangeField.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { MultiInputDateRangeFieldProps } from './MultiInputDateRangeField.types';
-type MultiInputDateRangeFieldComponent = (<TDate>(props: MultiInputDateRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
+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;
 };
 declare const MultiInputDateRangeField: MultiInputDateRangeFieldComponent;

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,6 +1,9 @@
 import * as React from 'react';
 import { MultiInputDateTimeRangeFieldProps } from './MultiInputDateTimeRangeField.types';
-type MultiInputDateTimeRangeFieldComponent = (<TDate>(props: MultiInputDateTimeRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
+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;
 };
 declare const MultiInputDateTimeRangeField: MultiInputDateTimeRangeFieldComponent;

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,6 +1,9 @@
 import * as React from 'react';
 import { MultiInputTimeRangeFieldProps } from './MultiInputTimeRangeField.types';
-type MultiInputTimeRangeFieldComponent = (<TDate>(props: MultiInputTimeRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
+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;
 };
 declare const MultiInputTimeRangeField: MultiInputTimeRangeFieldComponent;

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 {}