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

package/CHANGELOG.md

@@ -3,6 +3,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.4
+
+_Mar 30, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Danish (da-DK), and improve Norwegian (nb-NO), Spanish (es-ES), and Swedish (sv-SE) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.0.4` / `@mui/x-data-grid-pro@v6.0.4` / `@mui/x-data-grid-premium@v6.0.4`
+
+#### Changes
+
+- [DataGrid] Fix column header tooltip not showing when the title is truncated (#8433) @rohitnatesh
+- [DataGrid] Fix filter model buttons' display condition (#8415) @MBilalShafi
+- [DataGrid] Fix infinite rerender in a flex parent (#8436) @cherniavskii
+- [DataGrid] Prevent reopening column menu when clicking in the button while it is open (#8286) @tanuj-22
+- [DataGrid] Rename `components` by `slots` in column menu API (#7999) @MBilalShafi
+- [DataGrid] Remove hardcoded CSS classes' usages (#8444) @MBilalShafi
+- [DataGridPremium] Fix aggregation initial state causing issue with quick filter (#8441) @MBilalShafi
+- [l10n] Improve Danish (da-DK) locale (#8368) @BossElijah
+- [l10n] Improve Danish (da-DK) locale (#8378) @BossElijah
+- [l10n] Improve Norwegian (nb-NO) locale (#8367) @BossElijah
+- [l10n] Improve Norwegian (nb-NO) locale (#8409) @BossElijah
+- [l10n] Improve Spanish (es-ES) locale (#8420) @martjanz
+- [l10n] Improve Swedish (sv-SE) locale (#8381) @BossElijah
+
+### `@mui/x-date-pickers@v6.0.4` / `@mui/x-date-pickers-pro@v6.0.4`
+
+#### Changes
+
+- [fields] Add missing tokens to `AdapterDateFnsJalali` (#8402) @flaviendelangle
+- [fields] Clean the active date manager (#8370) @flaviendelangle
+- [fields] Cleanup `useFieldState`  (#8292) @flaviendelangle
+- [fields] Only add RTL characters when needed (#8325) @flaviendelangle
+- [pickers] Add support for single input fields in range pickers  (#7927) @flaviendelangle
+- [pickers] Allows non token characters in format (#8256) @alexfauquette
+- [pickers] Avoid root imports and move public models to the models folder (#8337) @flaviendelangle
+- [pickers] Update `view` when `views` or `openTo` changes (#8361) @LukasTy
+- [l10n] Improve Norwegian (nb-NO) locale (#8382) @BossElijah
+- [l10n] Add Danish (da-DK) locale (#8379) @BossElijah
+- [l10n] Improve Swedish (sv-SE) locale (#8381) @BossElijah
+
+### `@mui/x-codemod@v6.0.4`
+
+#### Changes
+
+- [codemod] Fix `remove-stabilized-experimentalFeatures` codemod (#8289) @alexfauquette
+
+### Docs
+
+- [docs] Fix `GridCellParams` signature in migration guide (#8427) @cherniavskii
+- [docs] Fix "Custom field" demos responsive styles (#8408) @LukasTy
+- [docs] Remove `label` from demos where it reduces clarity (#8416) @LukasTy
+- [docs] Update slots' references in Data Grid migration guide (#8159) @MBilalShafi
+
+### Core
+
+- [charts] Work on typing (#8421) @flaviendelangle
+
 ## 6.0.3
 
 _Mar 23, 2023_

package/DateRangePicker/DateRangePicker.js

@@ -147,6 +147,18 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/DateRangePicker/DateRangePickerToolbar.d.ts

@@ -3,7 +3,7 @@ import { BaseToolbarProps, ExportedBaseToolbarProps } from '@mui/x-date-pickers/
 import { DateRange } from '../internal/models';
 import { UseRangePositionResponse } from '../internal/hooks/useRangePosition';
 import { DateRangePickerToolbarClasses } from './dateRangePickerToolbarClasses';
-export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'>, UseRangePositionResponse {
+export interface DateRangePickerToolbarProps<TDate> extends Omit<BaseToolbarProps<DateRange<TDate>, 'day'>, 'views' | 'view' | 'onViewChange' | 'onChange' | 'isLandscape'>, Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
     classes?: Partial<DateRangePickerToolbarClasses>;
 }
 export interface ExportedDateRangePickerToolbarProps extends ExportedBaseToolbarProps {

package/DateRangePicker/shared.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LocalizedComponent } from '@mui/x-date-pickers';
+import { LocalizedComponent } from '@mui/x-date-pickers/locales';
 import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation';
 import { DateRange } from '../internal/models';

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -155,6 +155,18 @@ DesktopDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -158,6 +158,18 @@ MobileDateRangePicker.propTypes = {
    * Defaults to localized format based on the used `views`.
    */
   format: PropTypes.string,
+  /**
+   * Pass a ref to the `input` element.
+   * Ignored if the field has several inputs.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  /**
+   * The label content.
+   * Ignored if the field has several inputs.
+   */
+  label: PropTypes.node,
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.
    * Can be used to preload information and show it in calendar.

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -9,7 +9,7 @@ import { UseDateRangeFieldProps } from '../internal/models/dateRange';
 import { RangePosition } from '../internal/models/range';
 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 type UseMultiInputDateRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateRangeFieldProps<TDate>, TTextFieldSlotProps>;
 export interface UseMultiInputDateRangeFieldProps<TDate> extends Omit<UseDateRangeFieldProps<TDate>, 'unstableFieldRef'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -9,7 +9,7 @@ import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps } fro
 import { RangePosition } from '../internal/models/range';
 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 type UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateTimeRangeFieldProps<TDate>, TTextFieldSlotProps>;
 export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends Omit<UseDateTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;

package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -9,7 +9,7 @@ import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../in
 import { RangePosition } from '../internal/models/range';
 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 type UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputTimeRangeFieldProps<TDate>, TTextFieldSlotProps>;
 export interface UseMultiInputTimeRangeFieldProps<TDate> extends Omit<UseTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;

package/SingleInputDateRangeField/SingleInputDateRangeField.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
 type DateRangeFieldComponent = (<TDate>(props: SingleInputDateRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
     propTypes?: any;
+    fieldType?: string;
 };
 declare const SingleInputDateRangeField: DateRangeFieldComponent;
 export { SingleInputDateRangeField };

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -52,6 +52,7 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     })
   }));
 });
+SingleInputDateRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
 type DateRangeFieldComponent = (<TDate>(props: SingleInputDateTimeRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
     propTypes?: any;
+    fieldType?: string;
 };
 declare const SingleInputDateTimeRangeField: DateRangeFieldComponent;
 export { SingleInputDateTimeRangeField };

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -52,6 +52,7 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
     })
   }));
 });
+SingleInputDateTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/SingleInputTimeRangeField/SingleInputTimeRangeField.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { SingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
 type DateRangeFieldComponent = (<TDate>(props: SingleInputTimeRangeFieldProps<TDate> & React.RefAttributes<HTMLInputElement>) => JSX.Element) & {
     propTypes?: any;
+    fieldType?: string;
 };
 declare const SingleInputTimeRangeField: DateRangeFieldComponent;
 export { SingleInputTimeRangeField };

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -52,6 +52,7 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     })
   }));
 });
+SingleInputTimeRangeField.fieldType = 'single-input';
 process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DateOrTimeView } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { DateRangeCalendarProps } from '../DateRangeCalendar';
 export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeView> extends DateRangeCalendarProps<TDate> {
     view: TView;

package/index.js

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DateOrTimeView } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
 import { UseDesktopRangePickerParams, UseDesktopRangePickerProps } from './useDesktopRangePicker.types';
 export declare const useDesktopRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, validator, }: UseDesktopRangePickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
+import { useSlotProps } from '@mui/base/utils';
 import { useLicenseVerifier } from '@mui/x-license-pro';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
 import { executeInTheNextEventLoopTick, getActiveElement, usePicker, PickersPopper } from '@mui/x-date-pickers/internals';
-import { useRangePickerInputProps } from '../useRangePickerInputProps';
+import { useEnrichedRangePickerFieldProps } from '../useEnrichedRangePickerFieldProps';
 import { getReleaseInfo } from '../../utils/releaseInfo';
 import { useRangePosition } from '../useRangePosition';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +16,7 @@ export const useDesktopRangePicker = ({
   valueManager,
   validator
 }) => {
-  var _slots$layout;
+  var _fieldType, _slots$layout;
   useLicenseVerifier('x-date-pickers-pro', releaseInfo);
   const {
     slots,
@@ -24,17 +24,20 @@ export const useDesktopRangePicker = ({
     className,
     sx,
     format,
+    label,
+    inputRef,
     readOnly,
     disabled,
     autoFocus,
     disableOpenPicker,
     localeText
   } = props;
-  const fieldRef = React.useRef(null);
+  const fieldContainerRef = React.useRef(null);
   const popperRef = React.useRef(null);
   const {
     rangePosition,
-    onRangePositionChange
+    onRangePositionChange,
+    singleInputFieldRef
   } = useRangePosition(props);
   const {
     open,
@@ -56,26 +59,15 @@ export const useDesktopRangePicker = ({
   });
   const handleBlur = () => {
     executeInTheNextEventLoopTick(() => {
-      var _fieldRef$current, _popperRef$current;
-      if ((_fieldRef$current = fieldRef.current) != null && _fieldRef$current.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
+      var _fieldContainerRef$cu, _popperRef$current;
+      if ((_fieldContainerRef$cu = fieldContainerRef.current) != null && _fieldContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
         return;
       }
       actions.onDismiss();
     });
   };
-  const fieldSlotProps = useRangePickerInputProps({
-    wrapperVariant: 'desktop',
-    open,
-    actions,
-    readOnly,
-    disabled,
-    disableOpenPicker,
-    localeText,
-    onBlur: handleBlur,
-    rangePosition,
-    onRangePositionChange
-  });
   const Field = slots.field;
+  const fieldType = (_fieldType = Field.fieldType) != null ? _fieldType : 'multi-input';
   const fieldProps = useSlotProps({
     elementType: Field,
     externalSlotProps: slotProps == null ? void 0 : slotProps.field,
@@ -86,25 +78,28 @@ export const useDesktopRangePicker = ({
       sx,
       format,
       autoFocus: autoFocus && !props.open,
-      ref: fieldRef
+      ref: fieldContainerRef
+    }, fieldType === 'single-input' && {
+      inputRef
     }),
     ownerState: props
   });
-  const slotsForField = _extends({
-    textField: slots.textField,
-    root: slots.fieldRoot,
-    separator: slots.fieldSeparator
-  }, fieldProps.slots);
-  const slotPropsForField = _extends({}, fieldProps.slotProps, {
-    textField: ownerState => {
-      const externalInputProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.textField, ownerState);
-      return _extends({}, ownerState.position === 'start' ? fieldSlotProps.startInput : fieldSlotProps.endInput, externalInputProps);
-    },
-    root: ownerState => {
-      const externalRootProps = resolveComponentProps(slotProps == null ? void 0 : slotProps.fieldRoot, ownerState);
-      return _extends({}, externalRootProps, fieldSlotProps.root);
-    },
-    separator: slotProps == null ? void 0 : slotProps.fieldSeparator
+  const enrichedFieldProps = useEnrichedRangePickerFieldProps({
+    wrapperVariant: 'desktop',
+    fieldType,
+    open,
+    actions,
+    readOnly,
+    disableOpenPicker,
+    label,
+    localeText,
+    onBlur: handleBlur,
+    rangePosition,
+    onRangePositionChange,
+    singleInputFieldRef,
+    pickerSlotProps: slotProps,
+    pickerSlots: slots,
+    fieldProps
   });
   const slotPropsForLayout = _extends({}, slotProps, {
     toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
@@ -115,13 +110,10 @@ export const useDesktopRangePicker = ({
   const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
-    children: [/*#__PURE__*/_jsx(Field, _extends({}, fieldProps, {
-      slots: slotsForField,
-      slotProps: slotPropsForField
-    })), /*#__PURE__*/_jsx(PickersPopper, _extends({
+    children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
       role: "tooltip",
       containerRef: popperRef,
-      anchorEl: fieldRef.current,
+      anchorEl: fieldContainerRef.current,
       onBlur: handleBlur
     }, actions, {
       open: open,

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

@@ -1,35 +1,15 @@
-import * as React from 'react';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import Stack, { StackProps } from '@mui/material/Stack';
-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, RangeFieldSection } from '../../models';
-import { BaseMultiInputFieldProps } from '../../models/fields';
+import { UsePickerParams, BasePickerProps, PickersPopperSlotsComponent, PickersPopperSlotsComponentsProps, ExportedBaseToolbarProps, UsePickerViewsProps, UncapitalizeObjectKeys, BaseNonStaticPickerProps, UsePickerValueNonStaticProps, UsePickerViewsNonStaticProps } from '@mui/x-date-pickers/internals';
+import { DateOrTimeView } from '@mui/x-date-pickers/models';
+import { ExportedPickersLayoutSlotsComponent, ExportedPickersLayoutSlotsComponentsProps } from '@mui/x-date-pickers/PickersLayout';
+import { DateRange, RangeFieldSection, BaseRangeNonStaticPickerProps } from '../../models';
 import { UseRangePositionProps, UseRangePositionResponse } from '../useRangePosition';
-export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView> {
-    Field: React.ElementType;
-    FieldRoot?: React.ElementType<StackProps>;
-    FieldSeparator?: React.ElementType<TypographyProps>;
-    /**
-     * Form control with an input to render a date or time inside the default field.
-     * It is rendered twice: once for the start element and once for the end element.
-     * Receives the same props as `@mui/material/TextField`.
-     * @default TextField from '@mui/material'
-     */
-    TextField?: React.ElementType<TextFieldProps>;
+import { RangePickerFieldSlotsComponent, RangePickerFieldSlotsComponentsProps } from '../useEnrichedRangePickerFieldProps';
+export interface UseDesktopRangePickerSlotsComponent<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponent, ExportedPickersLayoutSlotsComponent<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotsComponent {
 }
-export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView> {
-    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, unknown>>, {}, unknown>;
-    fieldRoot?: SlotComponentProps<typeof Stack, {}, unknown>;
-    fieldSeparator?: SlotComponentProps<typeof Typography, {}, unknown>;
-    textField?: SlotComponentProps<typeof TextField, {}, {
-        position?: 'start' | 'end';
-    } & Record<string, any>>;
+export interface UseDesktopRangePickerSlotsComponentsProps<TDate, TView extends DateOrTimeView> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<DateRange<TDate>, TDate, TView>, RangePickerFieldSlotsComponentsProps<TDate> {
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, UseRangePositionProps {
+export interface DesktopRangeOnlyPickerProps<TDate> extends BaseNonStaticPickerProps, UsePickerValueNonStaticProps<TDate | null, RangeFieldSection>, UsePickerViewsNonStaticProps, BaseRangeNonStaticPickerProps, UseRangePositionProps {
     /**
      * If `true`, the start `input` element is focused during the first mount.
      */
@@ -47,7 +27,7 @@ export interface UseDesktopRangePickerProps<TDate, TView extends DateOrTimeView,
      */
     slotProps?: UseDesktopRangePickerSlotsComponentsProps<TDate, TView>;
 }
-export interface DesktopRangePickerAdditionalViewProps extends UseRangePositionResponse {
+export interface DesktopRangePickerAdditionalViewProps extends Pick<UseRangePositionResponse, 'rangePosition' | 'onRangePositionChange'> {
 }
 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/useEnrichedRangePickerFieldProps.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Stack, { StackProps } from '@mui/material/Stack';
+import Typography, { TypographyProps } from '@mui/material/Typography';
+import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { SlotComponentProps } from '@mui/base/utils';
+import { BaseSingleInputFieldProps, DateOrTimeView } from '@mui/x-date-pickers/models';
+import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
+import { BaseFieldProps, UsePickerResponse, WrapperVariant, UncapitalizeObjectKeys, UsePickerProps } from '@mui/x-date-pickers/internals';
+import { BaseMultiInputFieldProps, DateRange, RangeFieldSection, RangePosition, UseDateRangeFieldProps } from '../models';
+import { UseRangePositionResponse } from './useRangePosition';
+export interface RangePickerFieldSlotsComponent {
+    Field: React.ElementType;
+    /**
+     * Element rendered at the root.
+     * Ignored if the field has only one input.
+     */
+    FieldRoot?: React.ElementType<StackProps>;
+    /**
+     * Element rendered between the two inputs.
+     * Ignored if the field has only one input.
+     */
+    FieldSeparator?: React.ElementType<TypographyProps>;
+    /**
+     * Form control with an input to render a date or time inside the default field.
+     * It is rendered twice: once for the start element and once for the end element.
+     * Receives the same props as `@mui/material/TextField`.
+     * @default TextField from '@mui/material'
+     */
+    TextField?: React.ElementType<TextFieldProps>;
+}
+export interface RangePickerFieldSlotsComponentsProps<TDate> {
+    field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, unknown>>, {}, UsePickerProps<DateRange<TDate>, any, RangeFieldSection, any, any, any>>;
+    fieldRoot?: SlotComponentProps<typeof Stack, {}, Record<string, any>>;
+    fieldSeparator?: SlotComponentProps<typeof Typography, {}, Record<string, any>>;
+    textField?: SlotComponentProps<typeof TextField, {}, UseDateRangeFieldProps<TDate> & {
+        position?: RangePosition;
+    }>;
+}
+export interface UseEnrichedRangePickerFieldPropsParams<TDate, TView extends DateOrTimeView, TError, FieldProps extends BaseFieldProps<DateRange<TDate>, RangeFieldSection, TError> = BaseFieldProps<DateRange<TDate>, RangeFieldSection, TError>> extends Pick<UsePickerResponse<DateRange<TDate>, TView, RangeFieldSection, any>, 'open' | 'actions'>, UseRangePositionResponse {
+    wrapperVariant: WrapperVariant;
+    fieldType: 'single-input' | 'multi-input';
+    readOnly?: boolean;
+    labelId?: string;
+    disableOpenPicker?: boolean;
+    onBlur?: () => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+    label?: React.ReactNode;
+    localeText: PickersInputLocaleText<TDate> | undefined;
+    pickerSlotProps: RangePickerFieldSlotsComponentsProps<TDate> | undefined;
+    pickerSlots: UncapitalizeObjectKeys<RangePickerFieldSlotsComponent> | undefined;
+    fieldProps: FieldProps;
+}
+export declare const useEnrichedRangePickerFieldProps: <TDate, TView extends DateOrTimeView, TError>(params: UseEnrichedRangePickerFieldPropsParams<TDate, TView, TError, BaseFieldProps<DateRange<TDate>, RangeFieldSection, TError>>) => BaseMultiInputFieldProps<DateRange<TDate>, RangeFieldSection, TError> | BaseSingleInputFieldProps<DateRange<TDate>, RangeFieldSection, TError>;