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

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

@@ -258,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,7 +28,11 @@ 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',
@@ -52,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();
@@ -63,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**.
@@ -243,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
   })]),
@@ -273,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

@@ -265,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,7 +28,11 @@ 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',
@@ -52,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();
@@ -63,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**.
@@ -243,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
   })]),
@@ -273,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,24 +16,21 @@ 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", "autoFocus"],
-  _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
-})({
-  alignItems: 'baseline'
-});
+})({});
 const MultiInputDateRangeFieldSeparator = (0, _styles.styled)(props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({}, props, {
   children: props.children ?? ' — '
 })), {
@@ -54,6 +51,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -107,6 +105,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -124,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),
@@ -137,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
       })
     }))]
@@ -154,6 +161,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   autoFocus: _propTypes.default.bool,
+  className: _propTypes.default.string,
   /**
    * Overrideable components.
    * @default {}
@@ -168,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
@@ -178,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).
    */
@@ -224,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
   })]),
@@ -236,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.

package/node/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -16,18 +16,17 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _useMultiInputDateTimeRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
-  _excluded2 = ["onKeyDown", "ref"],
-  _excluded3 = ["onKeyDown", "ref"];
+const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "shouldDisableDate", "minDate", "maxDate", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+  _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 MultiInputDateTimeRangeFieldRoot = (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: 'MuiMultiInputDateTimeRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -52,6 +51,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -107,6 +107,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -130,11 +131,15 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     {
       startDate: {
         onKeyDown: onStartInputKeyDown,
-        ref: startInputRef
+        ref: startInputRef,
+        readOnly: startReadOnly,
+        inputMode: startInputMode
       },
       endDate: {
         onKeyDown: onEndInputKeyDown,
-        ref: endInputRef
+        ref: endInputRef,
+        readOnly: endReadOnly,
+        inputMode: endInputMode
       }
     } = _useMultiInputDateTim,
     startDateProps = (0, _objectWithoutPropertiesLoose2.default)(_useMultiInputDateTim.startDate, _excluded3),
@@ -143,11 +148,15 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     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
       })
     }))]
@@ -164,6 +173,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: _propTypes.default.bool,
+  className: _propTypes.default.string,
   /**
    * Overrideable components.
    * @default {}
@@ -178,6 +188,17 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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
@@ -193,6 +214,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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).
    */
@@ -262,7 +287,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.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
   })]),
@@ -281,6 +306,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: _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.