@mui/x-date-pickers-pro 6.0.0-beta.4 → 6.0.0-beta.5

package/CHANGELOG.md

@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.0-beta.5
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️ Add web worker support for Excel export (#7770) @m4theushw
+- 🎁 Add a button to remove all filters on the data grid filter panel (#7326) @MBilalShafi
+- ⚙️ Allow to customize options label and value in the data grid `singleSelect` column (#7684) @m4theushw
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v6.0.0-beta.5` / `@mui/x-data-grid-pro@v6.0.0-beta.5` / `@mui/x-data-grid-premium@v6.0.0-beta.5`
+
+#### Changes
+
+- [DataGrid] Allow to customize label and value for `singleSelect` (#7684) @m4theushw
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7964) @lolaignatova
+- [DataGrid] Introduce `slots` and deprecate `components` (#7882) @MBilalShafi
+- [DataGridPro] Add `Remove All` option in filter panel (#7326) @MBilalShafi
+- [DataGridPremium] Add web worker support for Excel export (#7770) @m4theushw
+
+### `@mui/x-date-pickers@v6.0.0-beta.5` / `@mui/x-date-pickers-pro@v6.0.0-beta.5`
+
+#### Breaking changes
+
+- The `MuiDateSectionName` type was renamed to `FieldSectionType`
+
+#### Changes
+
+- [fields] Fix multi input range fields validation when uncontrolled (#8002) @LukasTy
+- [fields] Fix single input time range fields slot props (#7988) @LukasTy
+- [fields] Make the `ArrowUp` / `ArrowDown` edition only impact the active section (#7993) @flaviendelangle
+- [fields] Fix single input range fields clearing (#7995) @flaviendelangle
+- [fields] Clean the section object (#8009) @flaviendelangle
+- [pickers] Fix `textField` slot `error` prop propagation (#7987) @LukasTy
+
+### `@mui/x-codemod@v6.0.0-beta.5`
+
+#### Changes
+
+- [codemod] Add `apiRef.current.getRowIndex` to `DataGrid` renaming codemod (#8001) @MBilalShafi
+
+### Docs
+
+- [docs] Fine tune range fields demos (#7992) @LukasTy
+- [docs] Fix a few scroll issues on mobile (#7900) @oliviertassinari
+- [docs] Fix inconsistency in the data grid migration guide (#7963) @MBilalShafi
+
+### Core
+
+- [core] Fix `moment` locale on adapter tests (#8020) @flaviendelangle
+- [test] Support all adapters on the field tests about the formats (#7996) @flaviendelangle
+
 ## 6.0.0-beta.4
 
 _Feb 16, 2023_
@@ -2179,6 +2233,26 @@ You can find more information about the new api, including how to set those tran
 - [test] Skip tests for column pinning and dynamic row height (#5997) @m4theushw
 - [website] Improve security header @oliviertassinari
 
+## 5.17.25
+
+_Feb 23, 2023_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.25` / `@mui/x-data-grid-pro@v5.17.25` / `@mui/x-data-grid-premium@v5.17.25`
+
+#### Changes
+
+- [DataGrid] Fix `ownerState` being `undefined` in theme style overrides (#7757) @lolaignatova
+
+### `@mui/x-date-pickers@v5.0.20` / `@mui/x-date-pickers-pro@v5.0.20`
+
+#### Changes
+
+- [DateTimePicker] Ensure toolbar `viewType` is correctly updated (#7942) @LukasTy
+
 ## 5.17.24
 
 _Feb 16, 2023_

package/DateRangePicker/DateRangePicker.js

@@ -243,7 +243,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -251,7 +251,7 @@ DesktopDateRangePicker.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -254,7 +254,7 @@ MobileDateRangePicker.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -251,7 +251,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -293,7 +293,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -267,7 +267,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -216,7 +216,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -10,22 +10,23 @@ import { useSlotProps } from '@mui/base/utils';
 import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateTimeRangeField(inProps, ref) {
-  var _ref, _slots$input;
+  var _ref, _slots$textField, _slotProps$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputDateTimeRangeField'
   });
   const {
       slots,
+      slotProps,
       components,
       componentsProps
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const Input = (_ref = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components == null ? void 0 : components.Input) != null ? _ref : TextField;
+  const Input = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : TextField;
   const inputProps = useSlotProps({
     elementType: Input,
-    externalSlotProps: componentsProps == null ? void 0 : componentsProps.input,
+    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
     externalForwardedProps: other,
     ownerState
   });
@@ -248,7 +249,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts

@@ -39,11 +39,12 @@ export interface SingleInputDateTimeRangeFieldProps<TDate> extends UseSingleInpu
 export type SingleInputDateTimeRangeFieldOwnerState<TDate> = SingleInputDateTimeRangeFieldProps<TDate>;
 export interface SingleInputDateTimeRangeFieldSlotsComponent {
     /**
-     * Input rendered.
-     * @default TextField
+     * Form control with an input to render the value.
+     * Receives the same props as `@mui/material/TextField`.
+     * @default TextField from '@mui/material'
      */
-    Input?: React.ElementType;
+    TextField?: React.ElementType;
 }
 export interface SingleInputDateTimeRangeFieldSlotsComponentsProps<TDate> {
-    input?: SlotComponentProps<typeof TextField, {}, SingleInputDateTimeRangeFieldOwnerState<TDate>>;
+    textField?: SlotComponentProps<typeof TextField, {}, SingleInputDateTimeRangeFieldOwnerState<TDate>>;
 }

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -10,7 +10,7 @@ import { useSlotProps } from '@mui/base/utils';
 import { useSingleInputTimeRangeField } from './useSingleInputTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputTimeRangeField(inProps, ref) {
-  var _ref, _slots$input, _slotProps$input;
+  var _ref, _slots$textField, _slotProps$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputTimeRangeField'
@@ -23,10 +23,10 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const Input = (_ref = (_slots$input = slots == null ? void 0 : slots.input) != null ? _slots$input : components == null ? void 0 : components.Input) != null ? _ref : TextField;
+  const Input = (_ref = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : components == null ? void 0 : components.TextField) != null ? _ref : TextField;
   const inputProps = useSlotProps({
     elementType: Input,
-    externalSlotProps: (_slotProps$input = slotProps == null ? void 0 : slotProps.input) != null ? _slotProps$input : componentsProps == null ? void 0 : componentsProps.input,
+    externalSlotProps: (_slotProps$textField = slotProps == null ? void 0 : slotProps.textField) != null ? _slotProps$textField : componentsProps == null ? void 0 : componentsProps.textField,
     externalForwardedProps: other,
     ownerState
   });
@@ -233,7 +233,7 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts

@@ -39,11 +39,12 @@ export interface SingleInputTimeRangeFieldProps<TDate> extends UseSingleInputTim
 export type SingleInputTimeRangeFieldOwnerState<TDate> = SingleInputTimeRangeFieldProps<TDate>;
 export interface SingleInputTimeRangeFieldSlotsComponent {
     /**
-     * Input rendered.
-     * @default TextField
+     * Form control with an input to render the value.
+     * Receives the same props as `@mui/material/TextField`.
+     * @default TextField from '@mui/material'
      */
-    Input?: React.ElementType;
+    TextField?: React.ElementType;
 }
 export interface SingleInputTimeRangeFieldSlotsComponentsProps<TDate> {
-    input?: SlotComponentProps<typeof TextField, {}, SingleInputTimeRangeFieldOwnerState<TDate>>;
+    textField?: SlotComponentProps<typeof TextField, {}, SingleInputTimeRangeFieldOwnerState<TDate>>;
 }

package/index.d.ts

@@ -15,5 +15,7 @@ export * from './MobileDateRangePicker';
 export * from './StaticDateRangePicker';
 export * from './dateRangeViewRenderers';
 export type { DateRangeValidationError } from './internal/hooks/validation/useDateRangeValidation';
+export type { DateTimeRangeValidationError } from './internal/hooks/validation/useDateTimeRangeValidation';
+export type { TimeRangeValidationError } from './internal/hooks/validation/useTimeRangeValidation';
 export type { DateRange } from './internal/models/range';
 export type { UseDateRangeFieldProps } from './internal/models/dateRange';

package/index.js

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

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 import { useLocalizationContext, useValidation } from '@mui/x-date-pickers/internals';
+import useControlled from '@mui/utils/useControlled';
 import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField';
 import { validateDateRange } from '../validation/useDateRangeValidation';
 import { rangeValueManager } from '../../utils/valueManagers';
@@ -13,7 +14,7 @@ export const useMultiInputDateRangeField = ({
   startInputRef,
   endInputRef
 }) => {
-  var _ref2;
+  var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedDateRangeFieldProps(inSharedProps);
   const adapter = useLocalizationContext();
   const {
@@ -25,16 +26,18 @@ export const useMultiInputDateRangeField = ({
     readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
+  const [value, setValue] = useControlled({
+    name: 'useMultiInputDateRangeField',
+    state: 'value',
+    controlled: valueProp,
+    default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
-    if (!onChange) {
-      return () => {};
-    }
     return (newDate, rawContext) => {
-      var _ref;
-      const currentDateRange = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : rangeValueManager.emptyValue;
-      const newDateRange = index === 0 ? [newDate, currentDateRange[1]] : [currentDateRange[0], newDate];
+      const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
+      setValue(newDateRange);
       const context = _extends({}, rawContext, {
         validationError: validateDateRange({
           adapter,
@@ -44,12 +47,17 @@ export const useMultiInputDateRangeField = ({
           })
         })
       });
-      onChange(newDateRange, context);
+      onChange == null ? void 0 : onChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
-  const startInputProps = _extends({}, inStartTextFieldProps, {
+  const validationError = useValidation(_extends({}, sharedProps, {
+    value
+  }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const startInputProps = _extends({
+    error: !!validationError[0]
+  }, inStartTextFieldProps, {
     disabled,
     readOnly,
     format,
@@ -57,7 +65,9 @@ export const useMultiInputDateRangeField = ({
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
-  const endInputProps = _extends({}, inEndTextFieldProps, {
+  const endInputProps = _extends({
+    error: !!validationError[1]
+  }, inEndTextFieldProps, {
     format,
     disabled,
     readOnly,
@@ -65,24 +75,14 @@ export const useMultiInputDateRangeField = ({
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange
   });
-  const rawStartDateResponse = useDateField({
+  const startDateResponse = useDateField({
     props: startInputProps,
     inputRef: startInputRef
   });
-  const rawEndDateResponse = useDateField({
+  const endDateResponse = useDateField({
     props: endInputProps,
     inputRef: endInputRef
   });
-  const value = (_ref2 = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref2 : rangeValueManager.emptyValue;
-  const validationError = useValidation(_extends({}, sharedProps, {
-    value
-  }), validateDateRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
-  const startDateResponse = _extends({}, rawStartDateResponse, {
-    error: !!validationError[0]
-  });
-  const endDateResponse = _extends({}, rawEndDateResponse, {
-    error: !!validationError[1]
-  });
   return {
     startDate: startDateResponse,
     endDate: endDateResponse

package/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-pickers/DateTimeField';
 import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation } from '@mui/x-date-pickers/internals';
+import useControlled from '@mui/utils/useControlled';
 import { validateDateTimeRange } from '../validation/useDateTimeRangeValidation';
 import { rangeValueManager } from '../../utils/valueManagers';
 export const useDefaultizedDateTimeRangeFieldProps = props => {
@@ -29,7 +30,7 @@ export const useMultiInputDateTimeRangeField = ({
   startInputRef,
   endInputRef
 }) => {
-  var _ref2;
+  var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedDateTimeRangeFieldProps(inSharedProps);
   const adapter = useLocalizationContext();
   const {
@@ -41,16 +42,18 @@ export const useMultiInputDateTimeRangeField = ({
     readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
+  const [value, setValue] = useControlled({
+    name: 'useMultiInputDateTimeRangeField',
+    state: 'value',
+    controlled: valueProp,
+    default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
-    if (!onChange) {
-      return () => {};
-    }
     return (newDate, rawContext) => {
-      var _ref;
-      const currentDateRange = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : rangeValueManager.emptyValue;
-      const newDateRange = index === 0 ? [newDate, currentDateRange[1]] : [currentDateRange[0], newDate];
+      const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
+      setValue(newDateRange);
       const context = _extends({}, rawContext, {
         validationError: validateDateTimeRange({
           adapter,
@@ -60,12 +63,17 @@ export const useMultiInputDateTimeRangeField = ({
           })
         })
       });
-      onChange(newDateRange, context);
+      onChange == null ? void 0 : onChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
-  const startInputProps = _extends({}, inStartTextFieldProps, {
+  const validationError = useValidation(_extends({}, sharedProps, {
+    value
+  }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const startInputProps = _extends({
+    error: !!validationError[0]
+  }, inStartTextFieldProps, {
     format,
     disabled,
     readOnly,
@@ -73,7 +81,9 @@ export const useMultiInputDateTimeRangeField = ({
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
-  const endInputProps = _extends({}, inEndTextFieldProps, {
+  const endInputProps = _extends({
+    error: !!validationError[1]
+  }, inEndTextFieldProps, {
     format,
     disabled,
     readOnly,
@@ -81,24 +91,14 @@ export const useMultiInputDateTimeRangeField = ({
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange
   });
-  const rawStartDateResponse = useDateTimeField({
+  const startDateResponse = useDateTimeField({
     props: startInputProps,
     inputRef: startInputRef
   });
-  const rawEndDateResponse = useDateTimeField({
+  const endDateResponse = useDateTimeField({
     props: endInputProps,
     inputRef: endInputRef
   });
-  const value = (_ref2 = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref2 : rangeValueManager.emptyValue;
-  const validationError = useValidation(_extends({}, sharedProps, {
-    value
-  }), validateDateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
-  const startDateResponse = _extends({}, rawStartDateResponse, {
-    error: !!validationError[0]
-  });
-  const endDateResponse = _extends({}, rawEndDateResponse, {
-    error: !!validationError[1]
-  });
   return {
     startDate: startDateResponse,
     endDate: endDateResponse

package/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeField';
 import { useLocalizationContext, useUtils, useValidation } from '@mui/x-date-pickers/internals';
+import useControlled from '@mui/utils/useControlled';
 import { validateTimeRange } from '../validation/useTimeRangeValidation';
 import { rangeValueManager } from '../../utils/valueManagers';
 export const useDefaultizedTimeRangeFieldProps = props => {
@@ -23,7 +24,7 @@ export const useMultiInputTimeRangeField = ({
   startInputRef,
   endInputRef
 }) => {
-  var _ref2;
+  var _firstDefaultValue$cu;
   const sharedProps = useDefaultizedTimeRangeFieldProps(inSharedProps);
   const adapter = useLocalizationContext();
   const {
@@ -35,16 +36,18 @@ export const useMultiInputTimeRangeField = ({
     readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
+  const [value, setValue] = useControlled({
+    name: 'useMultiInputTimeRangeField',
+    state: 'value',
+    controlled: valueProp,
+    default: (_firstDefaultValue$cu = firstDefaultValue.current) != null ? _firstDefaultValue$cu : rangeValueManager.emptyValue
+  });
 
   // TODO: Maybe export utility from `useField` instead of copy/pasting the logic
   const buildChangeHandler = index => {
-    if (!onChange) {
-      return () => {};
-    }
     return (newDate, rawContext) => {
-      var _ref;
-      const currentDateRange = (_ref = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref : rangeValueManager.emptyValue;
-      const newDateRange = index === 0 ? [newDate, currentDateRange[1]] : [currentDateRange[0], newDate];
+      const newDateRange = index === 0 ? [newDate, value[1]] : [value[0], newDate];
+      setValue(newDateRange);
       const context = _extends({}, rawContext, {
         validationError: validateTimeRange({
           adapter,
@@ -54,12 +57,17 @@ export const useMultiInputTimeRangeField = ({
           })
         })
       });
-      onChange(newDateRange, context);
+      onChange == null ? void 0 : onChange(newDateRange, context);
     };
   };
   const handleStartDateChange = useEventCallback(buildChangeHandler(0));
   const handleEndDateChange = useEventCallback(buildChangeHandler(1));
-  const startInputProps = _extends({}, inStartTextFieldProps, {
+  const validationError = useValidation(_extends({}, sharedProps, {
+    value
+  }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
+  const startInputProps = _extends({
+    error: !!validationError[0]
+  }, inStartTextFieldProps, {
     format,
     disabled,
     readOnly,
@@ -67,7 +75,9 @@ export const useMultiInputTimeRangeField = ({
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
-  const endInputProps = _extends({}, inEndTextFieldProps, {
+  const endInputProps = _extends({
+    error: !!validationError[1]
+  }, inEndTextFieldProps, {
     format,
     disabled,
     readOnly,
@@ -75,24 +85,14 @@ export const useMultiInputTimeRangeField = ({
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange
   });
-  const rawStartDateResponse = useTimeField({
+  const startDateResponse = useTimeField({
     props: startInputProps,
     inputRef: startInputRef
   });
-  const rawEndDateResponse = useTimeField({
+  const endDateResponse = useTimeField({
     props: endInputProps,
     inputRef: endInputRef
   });
-  const value = (_ref2 = valueProp != null ? valueProp : firstDefaultValue.current) != null ? _ref2 : rangeValueManager.emptyValue;
-  const validationError = useValidation(_extends({}, sharedProps, {
-    value
-  }), validateTimeRange, rangeValueManager.isSameError, rangeValueManager.defaultErrorState);
-  const startDateResponse = _extends({}, rawStartDateResponse, {
-    error: !!validationError[0]
-  });
-  const endDateResponse = _extends({}, rawEndDateResponse, {
-    error: !!validationError[1]
-  });
   return {
     startDate: startDateResponse,
     endDate: endDateResponse

package/internal/models/fields.d.ts

@@ -4,8 +4,6 @@ import { BaseFieldProps, FieldSection } from '@mui/x-date-pickers/internals';
 export interface RangeFieldSection extends FieldSection {
     dateName: 'start' | 'end';
 }
-export interface RangeFieldSectionWithoutPosition extends Omit<RangeFieldSection, 'start' | 'end' | 'startInInput' | 'endInInput'> {
-}
 /**
  * Props the `textField` slot of the multi input field can receive when used inside a picker.
  */

package/internal/utils/date-fields-utils.d.ts

@@ -6,17 +6,17 @@ export declare const splitDateRangeSections: (sections: RangeFieldSection[]) =>
 export declare const removeLastSeparator: (dateSections: RangeFieldSection[]) => (RangeFieldSection | {
     separator: null;
     dateName: "end" | "start";
+    value: string;
+    format: string;
+    placeholder: string;
+    type: import("@mui/x-date-pickers").FieldSectionType;
+    contentType: "letter" | "digit";
+    hasLeadingZeros: boolean;
+    modified: boolean;
     start: number;
     end: number;
     startInInput: number;
     endInInput: number;
-    value: string;
-    placeholder: string;
     startSeparator: string;
     endSeparator: string;
-    dateSectionName: import("@mui/x-date-pickers").MuiDateSectionName;
-    contentType: "letter" | "digit";
-    formatValue: string;
-    edited: boolean;
-    hasTrailingZeroes: boolean;
 })[];

package/internal/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY3NjQ5ODQwMDAwMA==";
+  const releaseInfo = "MTY3NzEwNjgwMDAwMA==";
   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/legacy/DateRangePicker/DateRangePicker.js

@@ -242,7 +242,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -250,7 +250,7 @@ DesktopDateRangePicker.propTypes = {
    * This prop accept four formats:
    * 1. If a number is provided, the section at this index will be selected.
    * 2. If an object with a `startIndex` and `endIndex` properties are provided, the sections between those two indexes will be selected.
-   * 3. If a string of type `MuiDateSectionName` is provided, the first section with that name will be selected.
+   * 3. If a string of type `FieldSectionType` is provided, the first section with that name will be selected.
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */