@mui/x-date-pickers-pro 6.0.0-alpha.11 → 6.0.0-alpha.13

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -13,7 +13,7 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { Watermark } from '@mui/x-license-pro';
-import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext } from '@mui/x-date-pickers/internals';
+import { applyDefaultDate, DAY_MARGIN, DayCalendar, defaultReduceAnimations, PickersArrowSwitcher, PickersCalendarHeader, useCalendarState, useDefaultDates, useLocaleText, useNextMonthDisabled, usePreviousMonthDisabled, useUtils, WrapperVariantContext, useNow } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import { dateRangeCalendarClasses, getDateRangeCalendarUtilityClass } from './dateRangeCalendarClasses';
 import { isEndOfRange, isRangeValid, isStartOfRange, isWithinRange } from '../internal/utils/date-utils';
@@ -112,6 +112,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   var utils = useUtils();
   var localeText = useLocaleText();
+  var now = useNow();
   var props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   var isMobile = React.useContext(WrapperVariantContext) === 'mobile';
   var valueProp = props.value,
@@ -368,6 +369,32 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
       return utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index);
     });
   }, [utils, calendarState.currentMonth, calendars]);
+  var focusedMonth = React.useMemo(function () {
+    var _visibleMonths$find;
+    if (!autoFocus) {
+      return null;
+    }
+
+    // The focus priority of the "day" view is as follows:
+    // 1. Month of the `start` date
+    // 2. Month of the `end` date
+    // 3. Month of the current date
+    // 4. First visible month
+
+    if (value[0] != null) {
+      return visibleMonths.find(function (month) {
+        return utils.isSameMonth(month, value[0]);
+      });
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(function (month) {
+        return utils.isSameMonth(month, value[1]);
+      });
+    }
+    return (_visibleMonths$find = visibleMonths.find(function (month) {
+      return utils.isSameMonth(month, now);
+    })) != null ? _visibleMonths$find : visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/_jsxs(DateRangeCalendarRoot, _extends({
     ref: ref,
     className: clsx(className, classes.root),
@@ -381,7 +408,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
         className: classes.monthContainer,
         children: [calendars === 1 ? /*#__PURE__*/_jsx(PickersCalendarHeader, {
           views: ['day'],
-          openView: 'day',
+          view: 'day',
           currentMonth: calendarState.currentMonth,
           onMonthChange: function onMonthChange(newMonth, direction) {
             return handleChangeMonth({
@@ -426,7 +453,7 @@ var DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar
           renderLoading: renderLoading,
           components: componentsForDayCalendar,
           componentsProps: componentsPropsForDayCalendar,
-          autoFocus: autoFocus,
+          autoFocus: month === focusedMonth,
           fixedWeekNumber: fixedWeekNumber,
           displayWeekNumber: displayWeekNumber
         }), index)]
@@ -439,6 +466,12 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render.

package/legacy/DateRangePicker/DateRangePicker.js

@@ -54,7 +54,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -234,11 +233,6 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */

package/legacy/DateRangePicker/DateRangePickerView.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+var _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps", "onFocusedViewChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license-pro';
@@ -44,6 +44,7 @@ function DateRangePickerViewRaw(props) {
     toggleMobileKeyboardView = props.toggleMobileKeyboardView,
     components = props.components,
     componentsProps = props.componentsProps,
+    onFocusedViewChange = props.onFocusedViewChange,
     other = _objectWithoutProperties(props, _excluded);
   var utils = useUtils();
   var wrapperVariant = React.useContext(WrapperVariantContext);
@@ -127,7 +128,11 @@ function DateRangePickerViewRaw(props) {
       components: components,
       componentsProps: componentsProps,
       shouldDisableDate: wrappedShouldDisableDate
-    }, calendarState, other);
+    }, calendarState, {
+      onFocusedViewChange: onFocusedViewChange ? function (newHasFocus) {
+        return onFocusedViewChange('day', newHasFocus);
+      } : undefined
+    }, other);
     switch (wrapperVariant) {
       case 'desktop':
         {

package/legacy/DateRangePicker/DateRangePickerViewMobile.js

@@ -68,7 +68,7 @@ export function DateRangePickerViewMobile(props) {
       maxDate: maxDateWithDisabled,
       minDate: minDateWithDisabled,
       onMonthChange: changeMonth,
-      openView: "day",
+      view: "day",
       views: onlyDayView,
       disabled: disabled
     }, other)), /*#__PURE__*/_jsx(DayCalendar, _extends({}, other, {

package/legacy/DateRangePickerDay/DateRangePickerDay.js

@@ -187,10 +187,26 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focusVisible: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The date to show.
    */
@@ -210,6 +226,33 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableMargin: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
   isAnimating: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
@@ -240,6 +283,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   isVisuallySelected: PropTypes.bool,
   onDaySelect: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
   onMouseEnter: PropTypes.func,
   /**
    * If `true`, day is outside of month and will be hidden.
@@ -255,11 +303,34 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  style: PropTypes.object,
+  /**
+   * 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]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
   /**
    * If `true`, renders as today date.
    * @default false
    */
-  today: PropTypes.bool
+  today: PropTypes.bool,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })])
 } : void 0;
 
 /**

package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -78,7 +78,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -252,11 +251,6 @@ process.env.NODE_ENV !== "production" ? DesktopDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */

package/legacy/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -7,13 +7,10 @@ import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
-import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { Unstable_MultiInputDateRangeField as MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
+import { useDesktopRangePicker } from '../internal/hooks/useDesktopRangePicker';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-var VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 var DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -21,12 +18,15 @@ var DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopN
     className = _useNextDateRangePick.className,
     sx = _useNextDateRangePick.sx,
     defaultizedProps = _objectWithoutProperties(_useNextDateRangePick, _excluded);
+  var viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   var props = _extends({}, defaultizedProps, {
+    viewRenderers: viewRenderers,
     calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 2,
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : false,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),
@@ -44,7 +44,6 @@ var DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopN
   var _useDesktopRangePicke = useDesktopRangePicker({
       props: props,
       valueManager: rangeValueManager,
-      viewLookup: VIEW_LOOKUP,
       validator: validateDateRange
     }),
     renderPicker = _useDesktopRangePicke.renderPicker;
@@ -55,6 +54,12 @@ DesktopNextDateRangePicker.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -235,7 +240,7 @@ DesktopNextDateRangePicker.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(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -265,6 +270,14 @@ DesktopNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { DesktopNextDateRangePicker };

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -83,7 +83,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -257,11 +256,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * Use in controlled mode (see open).
    */
   onOpen: PropTypes.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: PropTypes.func,
   /**
    * Control the popup or dialog open state.
    */

package/legacy/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -7,13 +7,10 @@ import { extractValidationProps } from '@mui/x-date-pickers/internals';
 import { resolveComponentProps } from '@mui/base/utils';
 import { rangeValueManager } from '../internal/utils/valueManagers';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
-import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { Unstable_MultiInputDateRangeField as MultiInputDateRangeField } from '../MultiInputDateRangeField';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
+import { useMobileRangePicker } from '../internal/hooks/useMobileRangePicker';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-var VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -21,12 +18,15 @@ var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNex
     className = _useNextDateRangePick.className,
     sx = _useNextDateRangePick.sx,
     defaultizedProps = _objectWithoutProperties(_useNextDateRangePick, _excluded);
+  var viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   var props = _extends({}, defaultizedProps, {
+    viewRenderers: viewRenderers,
     calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 1,
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : true,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),
@@ -44,7 +44,6 @@ var MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNex
   var _useMobileRangePicker = useMobileRangePicker({
       props: props,
       valueManager: rangeValueManager,
-      viewLookup: VIEW_LOOKUP,
       validator: validateDateRange
     }),
     renderPicker = _useMobileRangePicker.renderPicker;
@@ -55,6 +54,12 @@ MobileNextDateRangePicker.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
+   */
   autoFocus: PropTypes.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -235,7 +240,7 @@ MobileNextDateRangePicker.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(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -265,6 +270,14 @@ MobileNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be the used.
+   */
+  viewRenderers: PropTypes.shape({
+    day: PropTypes.func
+  })
 };
 export { MobileNextDateRangePicker };

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,8 +1,8 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
-  _excluded2 = ["onKeyDown", "ref"],
-  _excluded3 = ["onKeyDown", "ref"];
+var _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "autoFocus"],
+  _excluded2 = ["onKeyDown", "ref", "readOnly", "inputMode"],
+  _excluded3 = ["onKeyDown", "ref", "readOnly", "inputMode"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Stack from '@mui/material/Stack';
@@ -15,12 +15,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/_jsx(Stack, _extends({
-    ref: ref
-  }, props, {
+    ref: ref,
     spacing: 2,
     direction: "row",
-    alignItems: "center"
-  }));
+    alignItems: "baseline"
+  }, props));
 }), {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Root',
@@ -53,6 +52,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     format = themeProps.format,
     onChange = themeProps.onChange,
     readOnly = themeProps.readOnly,
+    disabled = themeProps.disabled,
     onError = themeProps.onError,
     shouldDisableDate = themeProps.shouldDisableDate,
     minDate = themeProps.minDate,
@@ -61,6 +61,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     disablePast = themeProps.disablePast,
     selectedSections = themeProps.selectedSections,
     onSelectedSectionsChange = themeProps.onSelectedSectionsChange,
+    autoFocus = themeProps.autoFocus,
     other = _objectWithoutProperties(themeProps, _excluded);
   var ownerState = themeProps;
   var Root = (_components$Root = components == null ? void 0 : components.Root) != null ? _components$Root : MultiInputDateRangeFieldRoot;
@@ -77,6 +78,9 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
   var startInputProps = useSlotProps({
     elementType: Input,
     externalSlotProps: componentsProps == null ? void 0 : componentsProps.input,
+    additionalProps: {
+      autoFocus: autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -101,6 +105,7 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
         format: format,
         onChange: onChange,
         readOnly: readOnly,
+        disabled: disabled,
         onError: onError,
         shouldDisableDate: shouldDisableDate,
         minDate: minDate,
@@ -118,20 +123,28 @@ var MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInput
     _useMultiInputDateRan2 = _useMultiInputDateRan.startDate,
     onStartInputKeyDown = _useMultiInputDateRan2.onKeyDown,
     startInputRef = _useMultiInputDateRan2.ref,
+    startReadOnly = _useMultiInputDateRan2.readOnly,
+    startInputMode = _useMultiInputDateRan2.inputMode,
     startDateProps = _objectWithoutProperties(_useMultiInputDateRan2, _excluded2),
     _useMultiInputDateRan3 = _useMultiInputDateRan.endDate,
     onEndInputKeyDown = _useMultiInputDateRan3.onKeyDown,
     endInputRef = _useMultiInputDateRan3.ref,
+    endReadOnly = _useMultiInputDateRan3.readOnly,
+    endInputMode = _useMultiInputDateRan3.inputMode,
     endDateProps = _objectWithoutProperties(_useMultiInputDateRan3, _excluded3);
   return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
     children: [/*#__PURE__*/_jsx(Input, _extends({}, startDateProps, {
       inputProps: _extends({}, startDateProps.inputProps, {
         ref: startInputRef,
+        readOnly: startReadOnly,
+        inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/_jsx(Separator, _extends({}, separatorProps)), /*#__PURE__*/_jsx(Input, _extends({}, endDateProps, {
       inputProps: _extends({}, endDateProps.inputProps, {
         ref: endInputRef,
+        readOnly: endReadOnly,
+        inputMode: endInputMode,
         onKeyDown: onEndInputKeyDown
       })
     }))]
@@ -142,6 +155,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -156,6 +171,17 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * If `true` disable values before the current date for date components, time for time components and both for date time components.
    * @default false
@@ -166,6 +192,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
   /**
    * Format of the date when rendered in the input(s).
    */
@@ -212,7 +242,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(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -224,6 +254,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  style: PropTypes.object,
+  /**
+   * 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]),
   /**
    * The selected value.
    * Used when the component is controlled.