@mui/x-date-pickers-pro 7.0.0-alpha.4 → 7.0.0-alpha.5

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.5
+
+_Dec 14, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 New recipe added for the Data Grid
+- 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### Breaking changes
+
+- The `instanceId` prop is now required for state selectors.
+  This prop is used to distinguish between multiple Data Grid instances on the same page.
+  See [migration docs](https://next.mui.com/x/migration/migration-data-grid-v6/#instanceid-prop-is-required-for-state-selectors) for more details.
+
+#### `@mui/x-data-grid@7.0.0-alpha.5`
+
+- [DataGrid] Make `instanceId` required for state selectors (#11395) @cherniavskii
+- [DataGrid] Recipe for grouped rows autosizing (#11401) @michelengelen
+- [l10n] Improve Swedish (sv-SE) locale (#11373) @fredrikcarlbom
+- [l10n] Improve Urdu (ur-PK) locale (#11400) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-alpha.5`.
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.5`.
+
+### Date Pickers
+
+#### Breaking changes
+
+- The slot interfaces got renamed to match with `@mui/base` naming.
+The `SlotsComponent` suffix has been replaced with `Slots` and `SlotsComponentsProps` with `SlotProps`.
+
+```diff
+- DateCalendarSlotsComponent
++ DateCalendarSlots
+- DateCalendarSlotsComponentsProps
++ DateCalendarSlotProps
+```
+
+#### `@mui/x-date-pickers@7.0.0-alpha.5`
+
+- [fields] Support empty sections (#10307) @flaviendelangle
+- [pickers] Fix field types to avoid error on latest `@types/react` version (#11397) @LukasTy
+- [pickers] Remove all relative imports to the internals index file (#11375) @flaviendelangle
+- [pickers] Rename slots interfaces (#11339) @alexfauquette
+- [pickers] Simplify the API of the field hooks (#11371) @flaviendelangle
+- [pickers] Support name prop (#11025) @gitstart
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-alpha.5`, plus:
+
+- [DateRangePicker] Fix `autoFocus` behavior (#11273) @kealjones-wk
+
+### Charts / `@mui/x-charts@7.0.0-alpha.5`
+
+- [charts] Fix size overflow (#11385) @alexfauquette
+
+### `@mui/x-codemod@7.0.0-alpha.5`
+
+- [codemod] Add `cellSelection` codemod and update migration guide (#11353) @MBilalShafi
+
+### Docs
+
+- [docs] Respect GoT books (@janoma) (#11387) @alexfauquette
+
+### Core
+
+- [core] Automate cherry-pick of PRs from `next` -> `master` (#11382) @MBilalShafi
+- [github] Update `no-response` workflow (#11369) @MBilalShafi
+- [test] Fix flaky screenshots (#11388) @cherniavskii
+
 ## 7.0.0-alpha.4
 
 _Dec 8, 2023_
@@ -949,6 +1029,48 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.18.5
+
+_Dec 14, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Improve Swedish (sv-SE) and Urdu (ur-PK) locales on the Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.5`
+
+- [l10n] Improve Swedish (sv-SE) locale (#11379) @fredrikcarlbom
+- [l10n] Improve Urdu (ur-PK) locale for data grid (#11409) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.18.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.5`.
+
+#### `@mui/x-data-grid-premium@6.18.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.5`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.5`
+
+- [pickers] Fix field types to avoid error on latest `@types/react` version (#11398) @LukasTy
+- [pickers] Support name prop (#11380) @gitstart
+
+#### `@mui/x-date-pickers-pro@6.18.5` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.5`, plus:
+
+- [DateRangePicker] Fix `autoFocus` behavior (#11376) @kealjones-wk
+
+### Docs
+
+- [docs] Respect GoT books (#11294) @janoma
+- [test] Fix flaky screenshots (#11391) @cherniavskii
+
 ## 6.18.4
 
 _Dec 8, 2023_

package/DateRangeCalendar/DateRangeCalendar.js

@@ -477,7 +477,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
           renderLoading: renderLoading,
           slots: slotsForDayCalendar,
           slotProps: slotPropsForDayCalendar,
-          autoFocus: month === focusedMonth,
+          autoFocus: visibleMonths[month] === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber,
           timezone: timezone

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -3,14 +3,14 @@ import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/base/utils';
 import { Theme } from '@mui/material/styles';
 import { TimezoneProps } from '@mui/x-date-pickers/models';
-import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlotsComponent, DayCalendarSlotsComponentsProps, PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps, PickerSelectionState, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
+import { PickersCalendarHeader, PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
+import { BaseDateValidationProps, DefaultizedProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, PickerSelectionState, DayCalendarProps, ExportedUseViewsOptions } from '@mui/x-date-pickers/internals';
 import { DateRange, DayRangeValidationProps } from '../internals/models';
 import { DateRangeCalendarClasses } from './dateRangeCalendarClasses';
 import { DateRangePickerDay, DateRangePickerDayProps } from '../DateRangePickerDay';
 import { UseRangePositionProps } from '../internals/hooks/useRangePosition';
 export type DateRangePosition = 'start' | 'end';
-export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwitcherSlotsComponent, Omit<DayCalendarSlotsComponent<TDate>, 'day'>, PickersCalendarHeaderSlotsComponent {
+export interface DateRangeCalendarSlots<TDate> extends PickersArrowSwitcherSlots, Omit<DayCalendarSlots<TDate>, 'day'>, PickersCalendarHeaderSlots {
     /**
      * Custom component for calendar header.
      * Check the [PickersCalendarHeader](https://mui.com/x/api/date-pickers/pickers-calendar-header/) component.
@@ -24,7 +24,7 @@ export interface DateRangeCalendarSlotsComponent<TDate> extends PickersArrowSwit
      */
     day?: React.ElementType<DateRangePickerDayProps<TDate>>;
 }
-export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArrowSwitcherSlotsComponentsProps, Omit<DayCalendarSlotsComponentsProps<TDate>, 'day'>, PickersCalendarHeaderSlotsComponentsProps<TDate> {
+export interface DateRangeCalendarSlotProps<TDate> extends PickersArrowSwitcherSlotProps, Omit<DayCalendarSlotProps<TDate>, 'day'>, PickersCalendarHeaderSlotProps<TDate> {
     calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateRangeCalendarProps<TDate>>;
     day?: SlotComponentProps<typeof DateRangePickerDay, {}, DayCalendarProps<TDate> & {
         day: TDate;
@@ -107,12 +107,12 @@ export interface DateRangeCalendarProps<TDate> extends ExportedDateRangeCalendar
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateRangeCalendarSlotsComponent<TDate>;
+    slots?: DateRangeCalendarSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateRangeCalendarSlotsComponentsProps<TDate>;
+    slotProps?: DateRangeCalendarSlotProps<TDate>;
 }
 export interface DateRangeCalendarOwnerState<TDate> extends DateRangeCalendarProps<TDate> {
     isDragging: boolean;

package/DateRangeCalendar/index.d.ts

@@ -1,4 +1,4 @@
 export { DateRangeCalendar } from './DateRangeCalendar';
-export type { DateRangeCalendarProps, DateRangeCalendarSlotsComponent, DateRangeCalendarSlotsComponentsProps, ExportedDateRangeCalendarProps, } from './DateRangeCalendar.types';
+export type { DateRangeCalendarProps, DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps, } from './DateRangeCalendar.types';
 export { getDateRangeCalendarUtilityClass, dateRangeCalendarClasses, } from './dateRangeCalendarClasses';
 export type { DateRangeCalendarClassKey, DateRangeCalendarClasses, } from './dateRangeCalendarClasses';

package/DateRangePicker/DateRangePicker.js

@@ -182,6 +182,11 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Minimal selectable date.
    */
   minDate: PropTypes.any,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   * Ignored if the field has several inputs.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -268,7 +273,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,8 +1,8 @@
-import { DesktopDateRangePickerProps, DesktopDateRangePickerSlotsComponent, DesktopDateRangePickerSlotsComponentsProps } from '../DesktopDateRangePicker';
-import { MobileDateRangePickerProps, MobileDateRangePickerSlotsComponent, MobileDateRangePickerSlotsComponentsProps } from '../MobileDateRangePicker';
-export interface DateRangePickerSlotsComponents<TDate> extends DesktopDateRangePickerSlotsComponent<TDate>, MobileDateRangePickerSlotsComponent<TDate> {
+import { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps } from '../DesktopDateRangePicker';
+import { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps } from '../MobileDateRangePicker';
+export interface DateRangePickerSlots<TDate> extends DesktopDateRangePickerSlots<TDate>, MobileDateRangePickerSlots<TDate> {
 }
-export interface DateRangePickerSlotsComponentsProps<TDate> extends DesktopDateRangePickerSlotsComponentsProps<TDate>, MobileDateRangePickerSlotsComponentsProps<TDate> {
+export interface DateRangePickerSlotProps<TDate> extends DesktopDateRangePickerSlotProps<TDate>, MobileDateRangePickerSlotProps<TDate> {
 }
 export interface DateRangePickerProps<TDate> extends DesktopDateRangePickerProps<TDate>, MobileDateRangePickerProps<TDate> {
     /**
@@ -15,10 +15,10 @@ export interface DateRangePickerProps<TDate> extends DesktopDateRangePickerProps
      * Overridable component slots.
      * @default {}
      */
-    slots?: DateRangePickerSlotsComponents<TDate>;
+    slots?: DateRangePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DateRangePickerSlotsComponentsProps<TDate>;
+    slotProps?: DateRangePickerSlotProps<TDate>;
 }

package/DateRangePicker/index.d.ts

@@ -1,5 +1,5 @@
 export { DateRangePicker } from './DateRangePicker';
-export type { DateRangePickerProps, DateRangePickerSlotsComponents, DateRangePickerSlotsComponentsProps, } from './DateRangePicker.types';
+export type { DateRangePickerProps, DateRangePickerSlots, DateRangePickerSlotProps, } from './DateRangePicker.types';
 export { DateRangePickerToolbar } from './DateRangePickerToolbar';
 export type { DateRangePickerToolbarProps } from './DateRangePickerToolbar';
 export { getDateRangePickerToolbarUtilityClass, dateRangePickerToolbarClasses, } from './dateRangePickerToolbarClasses';

package/DateRangePicker/shared.d.ts

@@ -3,17 +3,17 @@ import { LocalizedComponent } from '@mui/x-date-pickers/locales';
 import { DefaultizedProps, BaseDateValidationProps, BasePickerInputProps, PickerViewRendererLookup } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../models';
 import { DateRange } from '../internals/models';
-import { DateRangeCalendarSlotsComponent, DateRangeCalendarSlotsComponentsProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
+import { DateRangeCalendarSlots, DateRangeCalendarSlotProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateRangePickerToolbarProps, ExportedDateRangePickerToolbarProps } from './DateRangePickerToolbar';
 import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
-export interface BaseDateRangePickerSlotsComponent<TDate> extends DateRangeCalendarSlotsComponent<TDate> {
+export interface BaseDateRangePickerSlots<TDate> extends DateRangeCalendarSlots<TDate> {
     /**
      * Custom component for the toolbar rendered above the views.
      * @default DateTimePickerToolbar
      */
     toolbar?: React.JSXElementConstructor<DateRangePickerToolbarProps<TDate>>;
 }
-export interface BaseDateRangePickerSlotsComponentsProps<TDate> extends DateRangeCalendarSlotsComponentsProps<TDate> {
+export interface BaseDateRangePickerSlotProps<TDate> extends DateRangeCalendarSlotProps<TDate> {
     toolbar?: ExportedDateRangePickerToolbarProps;
 }
 export interface BaseDateRangePickerProps<TDate> extends Omit<BasePickerInputProps<DateRange<TDate>, TDate, 'day', DateRangeValidationError>, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate> {
@@ -21,12 +21,12 @@ export interface BaseDateRangePickerProps<TDate> extends Omit<BasePickerInputPro
      * Overridable component slots.
      * @default {}
      */
-    slots?: BaseDateRangePickerSlotsComponent<TDate>;
+    slots?: BaseDateRangePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: BaseDateRangePickerSlotsComponentsProps<TDate>;
+    slotProps?: BaseDateRangePickerSlotProps<TDate>;
     /**
      * Define custom view renderers for each section.
      * If `null`, the section will only have field editing.

package/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -191,6 +191,11 @@ DesktopDateRangePicker.propTypes = {
    * Minimal selectable date.
    */
   minDate: PropTypes.any,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   * Ignored if the field has several inputs.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -277,7 +282,7 @@ DesktopDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/DesktopDateRangePicker/DesktopDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-date-pickers/internals';
-import { UseDesktopRangePickerSlotsComponent, UseDesktopRangePickerSlotsComponentsProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
-import { BaseDateRangePickerProps, BaseDateRangePickerSlotsComponent, BaseDateRangePickerSlotsComponentsProps } from '../DateRangePicker/shared';
-export interface DesktopDateRangePickerSlotsComponent<TDate> extends BaseDateRangePickerSlotsComponent<TDate>, MakeOptional<UseDesktopRangePickerSlotsComponent<TDate, 'day'>, 'field'> {
+import { UseDesktopRangePickerSlots, UseDesktopRangePickerSlotProps, DesktopRangeOnlyPickerProps } from '../internals/hooks/useDesktopRangePicker';
+import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
+export interface DesktopDateRangePickerSlots<TDate> extends BaseDateRangePickerSlots<TDate>, MakeOptional<UseDesktopRangePickerSlots<TDate, 'day'>, 'field'> {
 }
-export interface DesktopDateRangePickerSlotsComponentsProps<TDate> extends BaseDateRangePickerSlotsComponentsProps<TDate>, UseDesktopRangePickerSlotsComponentsProps<TDate, 'day'> {
+export interface DesktopDateRangePickerSlotProps<TDate> extends BaseDateRangePickerSlotProps<TDate>, UseDesktopRangePickerSlotProps<TDate, 'day'> {
 }
 export interface DesktopDateRangePickerProps<TDate> extends BaseDateRangePickerProps<TDate>, DesktopRangeOnlyPickerProps<TDate> {
     /**
@@ -15,10 +15,10 @@ export interface DesktopDateRangePickerProps<TDate> extends BaseDateRangePickerP
      * Overridable component slots.
      * @default {}
      */
-    slots?: DesktopDateRangePickerSlotsComponent<TDate>;
+    slots?: DesktopDateRangePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: DesktopDateRangePickerSlotsComponentsProps<TDate>;
+    slotProps?: DesktopDateRangePickerSlotProps<TDate>;
 }

package/DesktopDateRangePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { DesktopDateRangePicker } from './DesktopDateRangePicker';
-export type { DesktopDateRangePickerProps, DesktopDateRangePickerSlotsComponent, DesktopDateRangePickerSlotsComponentsProps, } from './DesktopDateRangePicker.types';
+export type { DesktopDateRangePickerProps, DesktopDateRangePickerSlots, DesktopDateRangePickerSlotProps, } from './DesktopDateRangePicker.types';

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -191,6 +191,11 @@ MobileDateRangePicker.propTypes = {
    * Minimal selectable date.
    */
   minDate: PropTypes.any,
+  /**
+   * Name attribute used by the `input` element in the Field.
+   * Ignored if the field has several inputs.
+   */
+  name: PropTypes.string,
   /**
    * Callback fired when the value is accepted.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -277,7 +282,7 @@ MobileDateRangePicker.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/MobileDateRangePicker/MobileDateRangePicker.types.d.ts

@@ -1,9 +1,9 @@
 import { MakeOptional } from '@mui/x-date-pickers/internals';
-import { UseMobileRangePickerSlotsComponent, UseMobileRangePickerSlotsComponentsProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
-import { BaseDateRangePickerProps, BaseDateRangePickerSlotsComponent, BaseDateRangePickerSlotsComponentsProps } from '../DateRangePicker/shared';
-export interface MobileDateRangePickerSlotsComponent<TDate> extends BaseDateRangePickerSlotsComponent<TDate>, MakeOptional<UseMobileRangePickerSlotsComponent<TDate, 'day'>, 'field'> {
+import { UseMobileRangePickerSlots, UseMobileRangePickerSlotProps, MobileRangeOnlyPickerProps } from '../internals/hooks/useMobileRangePicker';
+import { BaseDateRangePickerProps, BaseDateRangePickerSlots, BaseDateRangePickerSlotProps } from '../DateRangePicker/shared';
+export interface MobileDateRangePickerSlots<TDate> extends BaseDateRangePickerSlots<TDate>, MakeOptional<UseMobileRangePickerSlots<TDate, 'day'>, 'field'> {
 }
-export interface MobileDateRangePickerSlotsComponentsProps<TDate> extends BaseDateRangePickerSlotsComponentsProps<TDate>, UseMobileRangePickerSlotsComponentsProps<TDate, 'day'> {
+export interface MobileDateRangePickerSlotProps<TDate> extends BaseDateRangePickerSlotProps<TDate>, UseMobileRangePickerSlotProps<TDate, 'day'> {
 }
 export interface MobileDateRangePickerProps<TDate> extends BaseDateRangePickerProps<TDate>, MobileRangeOnlyPickerProps<TDate> {
     /**
@@ -15,10 +15,10 @@ export interface MobileDateRangePickerProps<TDate> extends BaseDateRangePickerPr
      * Overridable component slots.
      * @default {}
      */
-    slots?: MobileDateRangePickerSlotsComponent<TDate>;
+    slots?: MobileDateRangePickerSlots<TDate>;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MobileDateRangePickerSlotsComponentsProps<TDate>;
+    slotProps?: MobileDateRangePickerSlotProps<TDate>;
 }

package/MobileDateRangePicker/index.d.ts

@@ -1,2 +1,2 @@
 export { MobileDateRangePicker } from './MobileDateRangePicker';
-export type { MobileDateRangePickerProps, MobileDateRangePickerSlotsComponent, MobileDateRangePickerSlotsComponentsProps, } from './MobileDateRangePicker.types';
+export type { MobileDateRangePickerProps, MobileDateRangePickerSlots, MobileDateRangePickerSlotProps, } from './MobileDateRangePicker.types';

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,8 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"],
-  _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
-  _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
+const _excluded = ["slots", "slotProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { splitFieldInternalAndForwardedProps } from '@mui/x-date-pickers/internals';
+import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { useMultiInputDateRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -116,58 +114,23 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     ownerState,
     className: classes.separator
   });
-  const _useMultiInputDateRan = useMultiInputDateRangeField({
-      sharedProps: _extends({}, dateFieldInternalProps, {
-        disabled
-      }),
-      startTextFieldProps,
-      endTextFieldProps,
-      unstableStartFieldRef,
-      unstableEndFieldRef,
-      startInputRef: startTextFieldProps.inputRef,
-      endInputRef: endTextFieldProps.inputRef
+  const fieldResponse = useMultiInputDateRangeField({
+    sharedProps: _extends({}, dateFieldInternalProps, {
+      disabled
     }),
-    {
-      startDate: {
-        onKeyDown: onStartInputKeyDown,
-        ref: startInputRef,
-        readOnly: startReadOnly,
-        inputMode: startInputMode
-      },
-      endDate: {
-        onKeyDown: onEndInputKeyDown,
-        ref: endInputRef,
-        readOnly: endReadOnly,
-        inputMode: endInputMode
-      }
-    } = _useMultiInputDateRan,
-    startDateProps = _objectWithoutPropertiesLoose(_useMultiInputDateRan.startDate, _excluded3),
-    endDateProps = _objectWithoutPropertiesLoose(_useMultiInputDateRan.endDate, _excluded2);
+    startTextFieldProps,
+    endTextFieldProps,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
+  const startDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.startDate);
+  const endDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.endDate);
   return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
     children: [/*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
-    }, startDateProps, {
-      InputProps: _extends({}, startDateProps.InputProps, {
-        readOnly: startReadOnly
-      }),
-      inputProps: _extends({}, startDateProps.inputProps, {
-        ref: startInputRef,
-        inputMode: startInputMode,
-        onKeyDown: onStartInputKeyDown
-      })
-    })), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
+    }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
-    }, endDateProps, {
-      InputProps: _extends({}, endDateProps.InputProps, {
-        readOnly: endReadOnly
-      }),
-      inputProps: _extends({}, endDateProps.inputProps, {
-        ref: endInputRef,
-        readOnly: endReadOnly,
-        inputMode: endInputMode,
-        onKeyDown: onEndInputKeyDown
-      })
-    }))]
+    }, endDateProps))]
   }));
 });
 process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
@@ -271,7 +234,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -25,15 +25,15 @@ export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateR
      * Overridable component slots.
      * @default {}
      */
-    slots?: MultiInputDateRangeFieldSlotsComponent;
+    slots?: MultiInputDateRangeFieldSlots;
     /**
      * The props used for each component slot.
      * @default {}
      */
-    slotProps?: MultiInputDateRangeFieldSlotsComponentsProps<TDate>;
+    slotProps?: MultiInputDateRangeFieldSlotProps<TDate>;
 }
 export type MultiInputDateRangeFieldOwnerState<TDate> = MultiInputDateRangeFieldProps<TDate>;
-export interface MultiInputDateRangeFieldSlotsComponent {
+export interface MultiInputDateRangeFieldSlots {
     /**
      * Element rendered at the root.
      * @default MultiInputDateRangeFieldRoot
@@ -52,7 +52,7 @@ export interface MultiInputDateRangeFieldSlotsComponent {
      */
     separator?: React.ElementType;
 }
-export interface MultiInputDateRangeFieldSlotsComponentsProps<TDate> {
+export interface MultiInputDateRangeFieldSlotProps<TDate> {
     root?: SlotComponentProps<typeof Stack, {}, MultiInputDateRangeFieldOwnerState<TDate>>;
     textField?: SlotComponentProps<typeof TextField, {}, MultiInputDateRangeFieldOwnerState<TDate> & {
         position: RangePosition;

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,8 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["slots", "slotProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"],
-  _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
-  _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
+const _excluded = ["slots", "slotProps", "disabled", "autoFocus", "unstableStartFieldRef", "unstableEndFieldRef", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,7 +10,7 @@ import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
-import { splitFieldInternalAndForwardedProps } from '@mui/x-date-pickers/internals';
+import { splitFieldInternalAndForwardedProps, convertFieldResponseIntoMuiTextFieldProps } from '@mui/x-date-pickers/internals';
 import { useMultiInputDateTimeRangeField } from '../internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -116,58 +114,23 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     ownerState,
     className: classes.separator
   });
-  const _useMultiInputDateTim = useMultiInputDateTimeRangeField({
-      sharedProps: _extends({}, dateTimeFieldInternalProps, {
-        disabled
-      }),
-      startTextFieldProps,
-      endTextFieldProps,
-      startInputRef: startTextFieldProps.inputRef,
-      unstableStartFieldRef,
-      endInputRef: endTextFieldProps.inputRef,
-      unstableEndFieldRef
+  const fieldResponse = useMultiInputDateTimeRangeField({
+    sharedProps: _extends({}, dateTimeFieldInternalProps, {
+      disabled
     }),
-    {
-      startDate: {
-        onKeyDown: onStartInputKeyDown,
-        ref: startInputRef,
-        readOnly: startReadOnly,
-        inputMode: startInputMode
-      },
-      endDate: {
-        onKeyDown: onEndInputKeyDown,
-        ref: endInputRef,
-        readOnly: endReadOnly,
-        inputMode: endInputMode
-      }
-    } = _useMultiInputDateTim,
-    startDateProps = _objectWithoutPropertiesLoose(_useMultiInputDateTim.startDate, _excluded3),
-    endDateProps = _objectWithoutPropertiesLoose(_useMultiInputDateTim.endDate, _excluded2);
+    startTextFieldProps,
+    endTextFieldProps,
+    unstableStartFieldRef,
+    unstableEndFieldRef
+  });
+  const startDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.startDate);
+  const endDateProps = convertFieldResponseIntoMuiTextFieldProps(fieldResponse.endDate);
   return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
     children: [/*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
-    }, startDateProps, {
-      InputProps: _extends({}, startDateProps.InputProps, {
-        readOnly: startReadOnly
-      }),
-      inputProps: _extends({}, startDateProps.inputProps, {
-        ref: startInputRef,
-        inputMode: startInputMode,
-        onKeyDown: onStartInputKeyDown
-      })
-    })), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
+    }, startDateProps)), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(TextField, _extends({
       fullWidth: true
-    }, endDateProps, {
-      InputProps: _extends({}, endDateProps.InputProps, {
-        readOnly: endReadOnly
-      }),
-      inputProps: _extends({}, endDateProps.inputProps, {
-        ref: endInputRef,
-        readOnly: endReadOnly,
-        inputMode: endInputMode,
-        onKeyDown: onEndInputKeyDown
-      })
-    }))]
+    }, endDateProps))]
   }));
 });
 process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes = {
@@ -304,7 +267,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),