@mui/x-date-pickers-pro 6.0.2 → 6.0.3

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.3
+
+_Mar 23, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Bulgarian (bg-BG), Persian (fa-IR), Polish (pl-PL), and Dutch (nl-NL) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.0.3` / `@mui/x-data-grid-pro@v6.0.3` / `@mui/x-data-grid-premium@v6.0.3`
+
+#### Changes
+
+- [DataGrid] Fix overflow calculation issue in column group headers (#8246) @MBilalShafi
+- [DataGridPro] Fix column reorder glitches (#8335) @cherniavskii
+- [l10n] Improve Bulgarian (bg-BG) locale (#8315) @todevmilen
+- [l10n] Improve Persian (fa-IR) locale (#8268) @fakhamatia
+- [l10n] improve Dutch (nl-NL) locale (#8317) @developenguin
+
+### `@mui/x-date-pickers@v6.0.3` / `@mui/x-date-pickers-pro@v6.0.3`
+
+#### Changes
+
+- [fields] Allow to reset the value from the outside (#8287) @flaviendelangle
+- [fields] Cleanup section order generation (#8290) @flaviendelangle
+- [fields] Fix Safari input selection resetting regression (#8295) @LukasTy
+- [fields] Fix editing when all sections are selected (#8330) @flaviendelangle
+- [fields] Fix iOS browser scroll jumping when entering data (#8328) @LukasTy
+- [fields] New prop `unstableFieldRef` to imperatively interact with the selected sections (#8235) @flaviendelangle
+- [pickers] Align date calendar colors (#8318) @LukasTy
+- [pickers] Support invalid dates from the field (#8298) @flaviendelangle
+- [l10n] Improve Persian (fa-IR) locale (#8268) @fakhamatia
+- [l10n] Improve Polish (pl-PL) locale (#8344) @drmats
+- [l10n] improve Dutch (nl-NL) locale (#8317) @developenguin
+
+### Docs
+
+- [docs] Create examples of pickers with custom fields (#8034) @flaviendelangle
+- [docs] Fix 301 redirections @oliviertassinari
+- [docs] Fix link to React's docs @oliviertassinari
+- [docs] Fix pro license links to point to the same page (#8303) @LukasTy
+- [docs] Give an incentive to upgrade (#8269) @oliviertassinari
+- [docs] Improve contrast on data grid navigation (#8239) @oliviertassinari
+- [docs] Update shortcuts page to use slotProps (#8288) @dcorb
+- [docs] Explain the `shouldDisableTime` migration in more depth (#8348) @LukasTy
+
+### Core
+
+- [core] Remove unused `visx` chart package (#8259) @LukasTy
+- [core] Upgrade monorepo (#8331) @cherniavskii
+- [charts] Project setup (#8308) @alexfauquette
+- [test] Track visual regressions of column menu and filter/column panels (#8095) @cherniavskii
+
 ## 6.0.2
 
 _Mar 16, 2023_
@@ -98,11 +152,9 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 _Mar 3, 2023_
 
-We're happy to announce the first v6 stable release! 🎉🚀
+We're excited to [announce the first v6 stable release](https://mui.com/blog/mui-x-v6/)! 🎉🚀
 
 This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements.
-Head over to the [what's new](https://mui.com/x/whats-new/) page to check the highlighted new features.
-
 Migration guides are available with a complete list of the breaking changes:
 
 - [Data Grid](https://mui.com/x/migration/migration-data-grid-v5/)
@@ -119,6 +171,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
   -  experimentalFeatures={{ rowPinning: true }}
    />
   ```
+
 - ⚡️ Improved grid performance by rows and cells memoization (#7846) @m4theushw
 - ✨ Fields have a distinct visual state when empty (#8069) @LukasTy
 - 🌍 Improve Czech (cs-CZ) locale (#8113) @BlastyCZ
@@ -556,14 +609,14 @@ We'd like to offer a big thanks to the 10 contributors who made this release pos
   ```
 
 - The `error` and `onError` props were removed - the grid no longer catches errors during rendering.
-  To catch errors that happen during rendering use the [error boundary](https://reactjs.org/docs/error-boundaries.html).
+  To catch errors that happen during rendering use the [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary).
 
 - The `components.ErrorOverlay` slot was removed.
 
 - The `GridErrorOverlay` component was removed.
 
 - The `componentError` event was removed.
-  Use the [error boundary](https://reactjs.org/docs/error-boundaries.html) to catch errors thrown during rendering.
+  Use the [error boundary](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) to catch errors thrown during rendering.
 
 - The `apiRef.current.showError` method was removed.
   The UI for errors is no longer handled by the grid.

package/DateRangePickerDay/DateRangePickerDay.js

@@ -80,7 +80,7 @@ const DateRangePickerDayRoot = styled('div', {
 }, ownerState.isHighlighting && {
   borderRadius: 0,
   color: (theme.vars || theme).palette.primary.contrastText,
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.lightChannel} / 0.6)` : alpha(theme.palette.primary.light, 0.6),
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
   '&:first-of-type': startBorderStyle,
   '&:last-of-type': endBorderStyle
 }, (ownerState.isStartOfHighlighting || ownerState.isFirstVisibleCell) && _extends({}, startBorderStyle, {
@@ -139,7 +139,6 @@ const DateRangePickerDayDay = styled(PickersDay, {
     [`&.${dateRangePickerDayClasses.notSelectedDate}`]: styles.notSelectedDate
   }, styles.day]
 })(({
-  theme,
   ownerState
 }) => _extends({
   // Required to overlap preview border
@@ -147,12 +146,10 @@ const DateRangePickerDayDay = styled(PickersDay, {
   '& > *': {
     transform: 'scale(0.9)'
   }
-}, !ownerState.selected && {
-  backgroundColor: 'transparent'
 }, !ownerState.selected && ownerState.isHighlighting && {
-  color: theme.palette.getContrastText(alpha(theme.palette.primary.light, 0.6)),
+  opacity: 0.7,
   [`&.${pickersDayClasses.dayOutsideMonth}`]: {
-    color: alpha(theme.palette.getContrastText(theme.palette.primary.light), 0.4)
+    opacity: 0.4
   }
 }, ownerState.draggable && {
   cursor: 'grab'

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -287,6 +287,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -3,22 +3,20 @@ import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import { FieldRef } from '@mui/x-date-pickers/models';
 import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseDateRangeFieldProps } from '../internal/models/dateRange';
 import { RangePosition } from '../internal/models/range';
-export interface UseMultiInputDateRangeFieldParams<TDate, TChildProps extends {}> {
-    sharedProps: Omit<TChildProps, keyof UseMultiInputDateRangeFieldProps<TDate>> & UseMultiInputDateRangeFieldProps<TDate>;
-    startTextFieldProps: TChildProps;
-    endTextFieldProps: TChildProps;
-    startInputRef?: React.Ref<HTMLInputElement>;
-    endInputRef?: React.Ref<HTMLInputElement>;
-}
-export interface UseMultiInputDateRangeFieldProps<TDate> extends UseDateRangeFieldProps<TDate> {
+import { UseMultiInputRangeFieldParams } from '../internal/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
+import { RangeFieldSection } from '../internal/models/fields';
+export type UseMultiInputDateRangeFieldParams<TDate, TTextFieldProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateRangeFieldProps<TDate>, TTextFieldProps>;
+export interface UseMultiInputDateRangeFieldProps<TDate> extends Omit<UseDateRangeFieldProps<TDate>, 'unstableFieldRef'> {
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }
 export type UseMultiInputDateRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputDateRangeFieldProps<TDate>> & UseMultiInputDateRangeFieldProps<TDate>;
-export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, Omit<StackProps, 'position'> & {
+export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, Omit<StackProps, 'position'>> {
     autoFocus?: boolean;
-}> {
     /**
      * Overridable components.
      * @default {}

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -65,7 +65,10 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
@@ -85,6 +88,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -129,7 +135,9 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       startTextFieldProps,
       endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef
     }),
     {
       startDate: {
@@ -179,6 +187,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
    * Overridable components.
@@ -344,6 +353,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { FieldRef } from '@mui/x-date-pickers/models';
 import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
@@ -6,17 +7,16 @@ import TextField from '@mui/material/TextField';
 import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps } from '../internal/models/dateTimeRange';
 import { RangePosition } from '../internal/models/range';
-export interface UseMultiInputDateTimeRangeFieldParams<TDate, TChildProps extends {}> {
-    sharedProps: Omit<TChildProps, keyof UseMultiInputDateTimeRangeFieldProps<TDate>> & UseMultiInputDateTimeRangeFieldProps<TDate>;
-    startTextFieldProps: TChildProps;
-    endTextFieldProps: TChildProps;
-    startInputRef?: React.Ref<HTMLInputElement>;
-    endInputRef?: React.Ref<HTMLInputElement>;
-}
-export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends UseDateTimeRangeFieldProps<TDate> {
+import { RangeFieldSection } from '../internal/models/fields';
+import { UseMultiInputRangeFieldParams } from '../internal/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
+export type UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateTimeRangeFieldProps<TDate>, TTextFieldProps>;
+export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends Omit<UseDateTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }
 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;
     /**
      * Overridable components.
      * @default {}

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+const _excluded = ["slots", "slotProps", "components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableStartFieldRef", "unstableEndFieldRef", "autoFocus"],
   _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
   _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
@@ -60,7 +60,10 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const slots = innerSlots != null ? innerSlots : uncapitalizeObjectKeys(components);
@@ -80,6 +83,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startTextFieldProps = useSlotProps({
     elementType: TextField,
     externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -119,7 +125,9 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       startTextFieldProps,
       endTextFieldProps,
       startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+      unstableStartFieldRef,
+      endInputRef: endTextFieldProps.inputRef,
+      unstableEndFieldRef
     }),
     {
       startDate: {
@@ -169,6 +177,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  autoFocus: PropTypes.bool,
   className: PropTypes.string,
   /**
    * Overridable components.
@@ -310,6 +319,8 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * The system prop, which allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  unstableEndFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  unstableStartFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -3,20 +3,20 @@ import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
 import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import { FieldRef } from '@mui/x-date-pickers/models';
 import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internal/models/timeRange';
 import { RangePosition } from '../internal/models/range';
-export interface UseMultiInputTimeRangeFieldParams<TDate, TChildProps extends {}> {
-    sharedProps: Omit<TChildProps, keyof UseMultiInputTimeRangeFieldProps<TDate>> & UseMultiInputTimeRangeFieldProps<TDate>;
-    startTextFieldProps: TChildProps;
-    endTextFieldProps: TChildProps;
-    startInputRef?: React.Ref<HTMLInputElement>;
-    endInputRef?: React.Ref<HTMLInputElement>;
-}
-export interface UseMultiInputTimeRangeFieldProps<TDate> extends UseTimeRangeFieldProps<TDate> {
+import { UseMultiInputRangeFieldParams } from '../internal/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
+import { RangeFieldSection } from '../internal/models/fields';
+export type UseMultiInputTimeRangeFieldParams<TDate, TTextFieldProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputTimeRangeFieldProps<TDate>, TTextFieldProps>;
+export interface UseMultiInputTimeRangeFieldProps<TDate> extends Omit<UseTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
+    unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
+    unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }
 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;
     /**
      * Overridable components.
      * @default {}

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -251,6 +251,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/SingleInputDateRangeField/useSingleInputDateRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useDefaultDates, applyDefaultDate, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
@@ -34,7 +34,8 @@ export const useSingleInputDateRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedDateRa,
     other = _objectWithoutPropertiesLoose(_useDefaultizedDateRa, _excluded);
   return useField({
@@ -53,7 +54,8 @@ export const useSingleInputDateRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: rangeValueManager,
     fieldValueManager: rangeFieldValueManager,

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -299,6 +299,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField, applyDefaultDate, useDefaultDates } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateDateTimeRange } from '../internal/hooks/validation/useDateTimeRangeValidation';
@@ -44,7 +44,8 @@ export const useSingleInputDateTimeRangeField = ({
       shouldDisableTime,
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedTimeRa,
     other = _objectWithoutPropertiesLoose(_useDefaultizedTimeRa, _excluded);
   return useField({
@@ -68,7 +69,8 @@ export const useSingleInputDateTimeRangeField = ({
       shouldDisableTime,
       disableIgnoringDatePartForTimeValidation,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: rangeValueManager,
     fieldValueManager: rangeFieldValueManager,

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -275,6 +275,10 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"];
+const _excluded = ["value", "defaultValue", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { useUtils, useField } from '@mui/x-date-pickers/internals';
 import { rangeValueManager, rangeFieldValueManager } from '../internal/utils/valueManagers';
 import { validateTimeRange } from '../internal/hooks/validation/useTimeRangeValidation';
@@ -34,7 +34,8 @@ export const useSingleInputTimeRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     } = _useDefaultizedTimeRa,
     other = _objectWithoutPropertiesLoose(_useDefaultizedTimeRa, _excluded);
   return useField({
@@ -54,7 +55,8 @@ export const useSingleInputTimeRangeField = ({
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      unstableFieldRef
     },
     valueManager: rangeValueManager,
     fieldValueManager: rangeFieldValueManager,

package/index.d.ts

@@ -17,5 +17,5 @@ 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 { DateRange, RangePosition } 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.2
+ * @mui/x-date-pickers-pro v6.0.3
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.types.d.ts

@@ -5,7 +5,7 @@ import Typography, { TypographyProps } from '@mui/material/Typography';
 import { SlotComponentProps } from '@mui/base/utils';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout/PickersLayout.types';
 import { DateOrTimeView, UsePickerParams, BasePickerProps, PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
-import { DateRange } from '../../models';
+import { DateRange, RangeFieldSection } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
 export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
@@ -21,7 +21,7 @@ export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOr
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
+    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, unknown>>, {}, unknown>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;
     textField?: SlotComponentProps<typeof TextField, {}, {
@@ -29,7 +29,7 @@ export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends
     } & Record<string, any>>;
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps, UseRangePositionProps {
+export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, UseRangePositionProps {
     /**
      * If `true`, the start `input` element is focused during the first mount.
      */
@@ -49,6 +49,6 @@ export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeView,
 }
 export interface DesktopRangePickerAdditionalViewProps extends UseRangePositionResponse {
 }
-export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, DesktopRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
+export interface UseDesktopRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, DesktopRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
     props: TExternalProps;
 }

package/internal/hooks/useMobileRangePicker/useMobileRangePicker.types.d.ts

@@ -5,7 +5,7 @@ import Typography, { TypographyProps } from '@mui/material/Typography';
 import { SlotComponentProps } from '@mui/base/utils';
 import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout/PickersLayout.types';
 import { DateOrTimeView, UsePickerParams, BasePickerProps, PickersModalDialogSlotsComponent, PickersModalDialogSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
-import { DateRange } from '../../models';
+import { DateRange, RangeFieldSection } from '../../models';
 import { BaseMultiInputFieldProps } from '../../models/fields';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
 export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
@@ -20,7 +20,7 @@ export interface UseMobileRangePickerSlotsComponent<TDate, TView extends DateOrT
     TextField?: React.ElementType<TextFieldProps>;
 }
 export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersModalDialogSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, unknown>>, {}, unknown>;
+    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, unknown>>, {}, unknown>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;
     textField?: SlotComponentProps<typeof TextField, {}, {
@@ -28,7 +28,7 @@ export interface UseMobileRangePickerSlotsComponentsProps<TDate, TView extends D
     } & Record<string, any>>;
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null>, UsePickerViewsNonStaticProps, UseRangePositionProps {
+export interface MobileRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, UseRangePositionProps {
 }
 export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView, TError, TExternalProps extends UsePickerViewsProps<any, TView, any, any>> extends MobileRangeOnlyPickerProps<TDate>, BasePickerProps<DateRange<TDate>, TDate, TView, TError, TExternalProps, MobileRangePickerAdditionalViewProps> {
     /**
@@ -44,6 +44,6 @@ export interface UseMobileRangePickerProps<TDate, TView extends DateOrTimeView,
 }
 export interface MobileRangePickerAdditionalViewProps extends UseRangePositionResponse {
 }
-export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, TExternalProps, MobileRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
+export interface UseMobileRangePickerParams<TDate, TView extends DateOrTimeView, TExternalProps extends UseMobileRangePickerProps<TDate, TView, any, TExternalProps>> extends Pick<UsePickerParams<DateRange<TDate>, TDate, TView, RangeFieldSection, TExternalProps, MobileRangePickerAdditionalViewProps>, 'valueManager' | 'validator'> {
     props: TExternalProps;
 }

package/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.d.ts

@@ -1,4 +1,3 @@
-import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
 import { UseMultiInputDateRangeFieldParams } from '../../../MultiInputDateRangeField/MultiInputDateRangeField.types';
 import type { UseMultiInputRangeFieldResponse } from './useMultiInputRangeField.types';
-export declare const useMultiInputDateRangeField: <TDate, TChildProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps: inStartTextFieldProps, endTextFieldProps: inEndTextFieldProps, startInputRef, endInputRef, }: UseMultiInputDateRangeFieldParams<TDate, TChildProps>) => UseMultiInputRangeFieldResponse<Omit<TChildProps, keyof UseDateFieldProps<TDate>>>;
+export declare const useMultiInputDateRangeField: <TDate, TTextFieldProps extends {}>({ sharedProps: inSharedProps, startTextFieldProps, startInputRef, unstableStartFieldRef, endTextFieldProps, endInputRef, unstableEndFieldRef, }: UseMultiInputDateRangeFieldParams<TDate, TTextFieldProps>) => UseMultiInputRangeFieldResponse<TTextFieldProps>;