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

package/node/DateRangeCalendar/DateRangeCalendar.js

@@ -115,6 +115,7 @@ const useUtilityClasses = ownerState => {
 const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalendar(inProps, ref) {
   const utils = (0, _internals.useUtils)();
   const localeText = (0, _internals.useLocaleText)();
+  const now = (0, _internals.useNow)();
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const isMobile = React.useContext(_internals.WrapperVariantContext) === 'mobile';
   const {
@@ -355,6 +356,25 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
   const visibleMonths = React.useMemo(() => Array.from({
     length: calendars
   }).map((_, index) => utils.setMonth(calendarState.currentMonth, utils.getMonth(calendarState.currentMonth) + index)), [utils, calendarState.currentMonth, calendars]);
+  const focusedMonth = React.useMemo(() => {
+    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(month => utils.isSameMonth(month, value[0]));
+    }
+    if (value[1] != null) {
+      return visibleMonths.find(month => utils.isSameMonth(month, value[1]));
+    }
+    return visibleMonths.find(month => utils.isSameMonth(month, now)) ?? visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateRangeCalendarRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(className, classes.root),
@@ -367,7 +387,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
       className: classes.monthContainer,
       children: [calendars === 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickersCalendarHeader, {
         views: ['day'],
-        openView: 'day',
+        view: 'day',
         currentMonth: calendarState.currentMonth,
         onMonthChange: (newMonth, direction) => handleChangeMonth({
           newMonth,
@@ -410,7 +430,7 @@ const DateRangeCalendar = /*#__PURE__*/React.forwardRef(function DateRangeCalend
         renderLoading: renderLoading,
         components: componentsForDayCalendar,
         componentsProps: componentsPropsForDayCalendar,
-        autoFocus: autoFocus,
+        autoFocus: month === focusedMonth,
         fixedWeekNumber: fixedWeekNumber,
         displayWeekNumber: displayWeekNumber
       }), index)]
@@ -423,6 +443,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.default.bool,
   /**
    * The number of calendars to render.

package/node/DateRangePicker/DateRangePicker.js

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

package/node/DateRangePicker/DateRangePickerView.js

@@ -18,7 +18,7 @@ var _DateRangePickerInput = require("./DateRangePickerInput");
 var _DateRangePickerViewDesktop = require("./DateRangePickerViewDesktop");
 var _releaseInfo = require("../internal/utils/releaseInfo");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["calendars", "className", "value", "DateInputProps", "defaultCalendarMonth", "disableAutoMonthSwitching", "disableFuture", "disableHighlightToday", "disablePast", "isMobileKeyboardViewOpen", "maxDate", "minDate", "onDateChange", "onMonthChange", "open", "reduceAnimations", "rangePosition", "onRangePositionChange", "shouldDisableDate", "showToolbar", "toggleMobileKeyboardView", "components", "componentsProps"];
+const _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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
@@ -48,7 +48,8 @@ function DateRangePickerViewRaw(props) {
       showToolbar,
       toggleMobileKeyboardView,
       components,
-      componentsProps
+      componentsProps,
+      onFocusedViewChange
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const utils = (0, _internals.useUtils)();
@@ -130,7 +131,9 @@ function DateRangePickerViewRaw(props) {
       components,
       componentsProps,
       shouldDisableDate: wrappedShouldDisableDate
-    }, calendarState, other);
+    }, calendarState, {
+      onFocusedViewChange: onFocusedViewChange ? newHasFocus => onFocusedViewChange('day', newHasFocus) : undefined
+    }, other);
     switch (wrapperVariant) {
       case 'desktop':
         {

package/node/DateRangePicker/DateRangePickerViewMobile.js

@@ -73,7 +73,7 @@ function DateRangePickerViewMobile(props) {
       maxDate: maxDateWithDisabled,
       minDate: minDateWithDisabled,
       onMonthChange: changeMonth,
-      openView: "day",
+      view: "day",
       views: onlyDayView,
       disabled: disabled
     }, other)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.DayCalendar, (0, _extends2.default)({}, other, {

package/node/DateRangePickerDay/DateRangePickerDay.js

@@ -205,10 +205,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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focusVisible: _propTypes.default.func.isRequired
+    })
+  })]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: _propTypes.default.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The date to show.
    */
@@ -228,6 +244,33 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableMargin: _propTypes.default.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.default.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: _propTypes.default.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: _propTypes.default.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.default.string,
   isAnimating: _propTypes.default.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
@@ -258,6 +301,11 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   isVisuallySelected: _propTypes.default.bool,
   onDaySelect: _propTypes.default.func.isRequired,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: _propTypes.default.func,
   onMouseEnter: _propTypes.default.func,
   /**
    * If `true`, day is outside of month and will be hidden.
@@ -273,11 +321,34 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: _propTypes.default.bool,
+  style: _propTypes.default.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: _propTypes.default.number,
   /**
    * If `true`, renders as today date.
    * @default false
    */
-  today: _propTypes.default.bool
+  today: _propTypes.default.bool,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: _propTypes.default.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      pulsate: _propTypes.default.func.isRequired,
+      start: _propTypes.default.func.isRequired,
+      stop: _propTypes.default.func.isRequired
+    })
+  })])
 } : void 0;
 
 /**

package/node/DesktopDateRangePicker/DesktopDateRangePicker.js

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

package/node/DesktopNextDateRangePicker/DesktopNextDateRangePicker.js

@@ -13,16 +13,13 @@ var _internals = require("@mui/x-date-pickers/internals");
 var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internal/utils/valueManagers");
 var _shared = require("../NextDateRangePicker/shared");
-var _useDesktopRangePicker = require("../internal/hooks/useDesktopRangePicker");
+var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _MultiInputDateRangeField = require("../MultiInputDateRangeField");
-var _viewRenderers = require("../internal/utils/viewRenderers");
+var _useDesktopRangePicker = require("../internal/hooks/useDesktopRangePicker");
 var _useDateRangeValidation = require("../internal/hooks/validation/useDateRangeValidation");
 const _excluded = ["className", "sx"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const VIEW_LOOKUP = {
-  day: _viewRenderers.renderDateRangeView
-};
 const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopNextDateRangePicker(inProps, ref) {
   // Props with the default values common to all date time pickers
   const _useNextDateRangePick = (0, _shared.useNextDateRangePickerDefaultizedProps)(inProps, 'MuiDesktopNextDateRangePicker'),
@@ -31,12 +28,15 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
       sx
     } = _useNextDateRangePick,
     defaultizedProps = (0, _objectWithoutPropertiesLoose2.default)(_useNextDateRangePick, _excluded);
+  const viewRenderers = (0, _extends2.default)({
+    day: _dateRangeViewRenderers.renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
+    viewRenderers,
     calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',
     showToolbar: defaultizedProps.showToolbar ?? false,
-    autoFocus: true,
     components: (0, _extends2.default)({
       Field: _MultiInputDateRangeField.Unstable_MultiInputDateRangeField
     }, defaultizedProps.components),
@@ -53,7 +53,6 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   } = (0, _useDesktopRangePicker.useDesktopRangePicker)({
     props,
     valueManager: _valueManagers.rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: _useDateRangeValidation.validateDateRange
   });
   return renderPicker();
@@ -64,6 +63,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.default.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -244,7 +249,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.default.oneOfType([_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), _propTypes.default.number, _propTypes.default.shape({
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), _propTypes.default.number, _propTypes.default.shape({
     endIndex: _propTypes.default.number.isRequired,
     startIndex: _propTypes.default.number.isRequired
   })]),
@@ -274,5 +279,13 @@ DesktopNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any)
+  value: _propTypes.default.arrayOf(_propTypes.default.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.default.shape({
+    day: _propTypes.default.func
+  })
 };

package/node/MobileDateRangePicker/MobileDateRangePicker.js

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

package/node/MobileNextDateRangePicker/MobileNextDateRangePicker.js

@@ -13,16 +13,13 @@ var _internals = require("@mui/x-date-pickers/internals");
 var _utils = require("@mui/base/utils");
 var _valueManagers = require("../internal/utils/valueManagers");
 var _shared = require("../NextDateRangePicker/shared");
-var _useMobileRangePicker = require("../internal/hooks/useMobileRangePicker");
+var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _MultiInputDateRangeField = require("../MultiInputDateRangeField");
-var _viewRenderers = require("../internal/utils/viewRenderers");
+var _useMobileRangePicker = require("../internal/hooks/useMobileRangePicker");
 var _useDateRangeValidation = require("../internal/hooks/validation/useDateRangeValidation");
 const _excluded = ["className", "sx"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const VIEW_LOOKUP = {
-  day: _viewRenderers.renderDateRangeView
-};
 const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNextDateRangePicker(inProps, ref) {
   // Props with the default values common to all date time pickers
   const _useNextDateRangePick = (0, _shared.useNextDateRangePickerDefaultizedProps)(inProps, 'MuiMobileNextDateRangePicker'),
@@ -31,12 +28,15 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
       sx
     } = _useNextDateRangePick,
     defaultizedProps = (0, _objectWithoutPropertiesLoose2.default)(_useNextDateRangePick, _excluded);
+  const viewRenderers = (0, _extends2.default)({
+    day: _dateRangeViewRenderers.renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   const props = (0, _extends2.default)({}, defaultizedProps, {
+    viewRenderers,
     calendars: defaultizedProps.calendars ?? 1,
     views: ['day'],
     openTo: 'day',
     showToolbar: defaultizedProps.showToolbar ?? true,
-    autoFocus: true,
     components: (0, _extends2.default)({
       Field: _MultiInputDateRangeField.Unstable_MultiInputDateRangeField
     }, defaultizedProps.components),
@@ -53,7 +53,6 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
   } = (0, _useMobileRangePicker.useMobileRangePicker)({
     props,
     valueManager: _valueManagers.rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: _useDateRangeValidation.validateDateRange
   });
   return renderPicker();
@@ -64,6 +63,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.default.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -244,7 +249,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.default.oneOfType([_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), _propTypes.default.number, _propTypes.default.shape({
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), _propTypes.default.number, _propTypes.default.shape({
     endIndex: _propTypes.default.number.isRequired,
     startIndex: _propTypes.default.number.isRequired
   })]),
@@ -274,5 +279,13 @@ MobileNextDateRangePicker.propTypes = {
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any)
+  value: _propTypes.default.arrayOf(_propTypes.default.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.default.shape({
+    day: _propTypes.default.func
+  })
 };

package/node/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -16,18 +16,17 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _useMultiInputDateRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
-  _excluded2 = ["onKeyDown", "ref"],
-  _excluded3 = ["onKeyDown", "ref"];
+const _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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const MultiInputDateRangeFieldRoot = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, (0, _extends2.default)({
-  ref: ref
-}, props, {
+  ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "center"
-}))), {
+  alignItems: "baseline"
+}, props))), {
   name: 'MuiMultiInputDateRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -52,6 +51,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -59,7 +59,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      autoFocus
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const ownerState = themeProps;
@@ -77,6 +78,9 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startInputProps = (0, _utils.useSlotProps)({
     elementType: Input,
     externalSlotProps: componentsProps?.input,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: (0, _extends2.default)({}, ownerState, {
       position: 'start'
     })
@@ -101,6 +105,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -118,11 +123,15 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     {
       startDate: {
         onKeyDown: onStartInputKeyDown,
-        ref: startInputRef
+        ref: startInputRef,
+        readOnly: startReadOnly,
+        inputMode: startInputMode
       },
       endDate: {
         onKeyDown: onEndInputKeyDown,
-        ref: endInputRef
+        ref: endInputRef,
+        readOnly: endReadOnly,
+        inputMode: endInputMode
       }
     } = _useMultiInputDateRan,
     startDateProps = (0, _objectWithoutPropertiesLoose2.default)(_useMultiInputDateRan.startDate, _excluded3),
@@ -131,11 +140,15 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({}, startDateProps, {
       inputProps: (0, _extends2.default)({}, startDateProps.inputProps, {
         ref: startInputRef,
+        readOnly: startReadOnly,
+        inputMode: startInputMode,
         onKeyDown: onStartInputKeyDown
       })
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Separator, (0, _extends2.default)({}, separatorProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({}, endDateProps, {
       inputProps: (0, _extends2.default)({}, endDateProps.inputProps, {
         ref: endInputRef,
+        readOnly: endReadOnly,
+        inputMode: endInputMode,
         onKeyDown: onEndInputKeyDown
       })
     }))]
@@ -147,6 +160,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.default.bool,
+  className: _propTypes.default.string,
   /**
    * Overrideable components.
    * @default {}
@@ -161,6 +176,17 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The default value. Use when the component is not controlled.
    */
   defaultValue: _propTypes.default.arrayOf(_propTypes.default.any),
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: _propTypes.default.bool,
   /**
    * If `true` disable values before the current date for date components, time for time components and both for date time components.
    * @default false
@@ -171,6 +197,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @default false
    */
   disablePast: _propTypes.default.bool,
+  /**
+   * Add an element between each child.
+   */
+  divider: _propTypes.default.node,
   /**
    * Format of the date when rendered in the input(s).
    */
@@ -217,7 +247,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.default.oneOfType([_propTypes.default.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), _propTypes.default.number, _propTypes.default.shape({
+  selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), _propTypes.default.number, _propTypes.default.shape({
     endIndex: _propTypes.default.number.isRequired,
     startIndex: _propTypes.default.number.isRequired
   })]),
@@ -229,6 +259,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _propTypes.default.func,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+  style: _propTypes.default.object,
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.