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

package/modern/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';
-const VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function DesktopNextDateRangePicker(inProps, ref) {
   // Props with the default values common to all date time pickers
   const _useNextDateRangePick = useNextDateRangePickerDefaultizedProps(inProps, 'MuiDesktopNextDateRangePicker'),
@@ -22,7 +19,11 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
       sx
     } = _useNextDateRangePick,
     defaultizedProps = _objectWithoutPropertiesLoose(_useNextDateRangePick, _excluded);
+  const viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
+    viewRenderers,
     calendars: defaultizedProps.calendars ?? 2,
     views: ['day'],
     openTo: 'day',
@@ -43,7 +44,6 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   } = useDesktopRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange
   });
   return renderPicker();
@@ -53,6 +53,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**.
@@ -233,7 +239,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
   })]),
@@ -263,6 +269,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/modern/MobileDateRangePicker/MobileDateRangePicker.js

@@ -255,11 +255,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/modern/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';
-const VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileNextDateRangePicker(inProps, ref) {
   // Props with the default values common to all date time pickers
   const _useNextDateRangePick = useNextDateRangePickerDefaultizedProps(inProps, 'MuiMobileNextDateRangePicker'),
@@ -22,7 +19,11 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
       sx
     } = _useNextDateRangePick,
     defaultizedProps = _objectWithoutPropertiesLoose(_useNextDateRangePick, _excluded);
+  const viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
   const props = _extends({}, defaultizedProps, {
+    viewRenderers,
     calendars: defaultizedProps.calendars ?? 1,
     views: ['day'],
     openTo: 'day',
@@ -43,7 +44,6 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
   } = useMobileRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange
   });
   return renderPicker();
@@ -53,6 +53,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**.
@@ -233,7 +239,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
   })]),
@@ -263,6 +269,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/modern/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -1,8 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Stack from '@mui/material/Stack';
@@ -14,18 +14,15 @@ import { useMultiInputDateRangeField } from '../internal/hooks/useMultiInputRang
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MultiInputDateRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
-  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 = styled(props => /*#__PURE__*/_jsx(Typography, _extends({}, props, {
   children: props.children ?? ' — '
 })), {
@@ -46,6 +43,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -99,6 +97,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -116,11 +115,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 = _objectWithoutPropertiesLoose(_useMultiInputDateRan.startDate, _excluded3),
@@ -129,11 +132,15 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     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
       })
     }))]
@@ -145,6 +152,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   autoFocus: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -159,6 +167,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
@@ -169,6 +188,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).
    */
@@ -215,7 +238,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
   })]),
@@ -227,6 +250,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.

package/modern/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -1,8 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Stack from '@mui/material/Stack';
@@ -14,12 +14,11 @@ import { useMultiInputDateTimeRangeField } from '../internal/hooks/useMultiInput
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MultiInputDateTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
-  ref: ref
-}, props, {
+  ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "center"
-}))), {
+  alignItems: "baseline"
+}, props))), {
   name: 'MuiMultiInputDateTimeRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -44,6 +43,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -99,6 +99,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -122,11 +123,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 = _objectWithoutPropertiesLoose(_useMultiInputDateTim.startDate, _excluded3),
@@ -135,11 +140,15 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
     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
       })
     }))]
@@ -155,6 +164,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -169,6 +179,17 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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
@@ -184,6 +205,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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).
    */
@@ -253,7 +278,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['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
   })]),
@@ -272,6 +297,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: 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.

package/modern/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -1,8 +1,8 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
-  _excluded2 = ["onKeyDown", "ref"],
-  _excluded3 = ["onKeyDown", "ref"];
+const _excluded = ["components", "componentsProps", "value", "defaultValue", "format", "onChange", "readOnly", "disabled", "onError", "minTime", "maxTime", "minutesStep", "shouldDisableTime", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange"],
+  _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';
@@ -14,12 +14,11 @@ import { useMultiInputTimeRangeField } from '../internal/hooks/useMultiInputRang
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MultiInputTimeRangeFieldRoot = styled( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/_jsx(Stack, _extends({
-  ref: ref
-}, props, {
+  ref: ref,
   spacing: 2,
   direction: "row",
-  alignItems: "center"
-}))), {
+  alignItems: "baseline"
+}, props))), {
   name: 'MuiMultiInputTimeRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -44,6 +43,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       minTime,
       maxTime,
@@ -94,6 +94,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         minTime,
         maxTime,
@@ -112,11 +113,15 @@ const MultiInputTimeRangeField = /*#__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
       }
     } = _useMultiInputTimeRan,
     startDateProps = _objectWithoutPropertiesLoose(_useMultiInputTimeRan.startDate, _excluded3),
@@ -125,11 +130,15 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
     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
       })
     }))]
@@ -145,6 +154,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -159,6 +169,17 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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
@@ -174,6 +195,10 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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).
    */
@@ -227,7 +252,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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
   })]),
@@ -238,6 +263,16 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: 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.

package/modern/NextDateRangePicker/NextDateRangePicker.js

@@ -36,6 +36,12 @@ process.env.NODE_ENV !== "production" ? NextDateRangePicker.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**.
@@ -222,7 +228,7 @@ process.env.NODE_ENV !== "production" ? NextDateRangePicker.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
   })]),
@@ -252,6 +258,14 @@ process.env.NODE_ENV !== "production" ? NextDateRangePicker.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
+  })
 } : void 0;
 export { NextDateRangePicker };