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

package/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) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -23,12 +20,15 @@ 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$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 2,
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : false,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),
@@ -48,7 +48,6 @@ const DesktopNextDateRangePicker = /*#__PURE__*/React.forwardRef(function Deskto
   } = useDesktopRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange
   });
   return renderPicker();
@@ -58,6 +57,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**.
@@ -238,7 +243,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
   })]),
@@ -268,6 +273,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/MobileDateRangePicker/MobileDateRangePicker.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
 import { MobileWrapperProps, MobileWrapperSlotsComponent, MobileWrapperSlotsComponentsProps, DateInputSlotsComponent } from '@mui/x-date-pickers/internals';
 import { BaseDateRangePickerProps, BaseDateRangePickerSlotsComponent, BaseDateRangePickerSlotsComponentsProps } from '../DateRangePicker/shared';
 export interface MobileDateRangePickerSlotsComponent<TDate> extends BaseDateRangePickerSlotsComponent<TDate>, MobileWrapperSlotsComponent, DateInputSlotsComponent {
@@ -16,6 +17,10 @@ export interface MobileDateRangePickerProps<TDate> extends BaseDateRangePickerPr
      * @default {}
      */
     componentsProps?: MobileDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps;
 }
 type MobileDateRangePickerComponent = (<TDate>(props: MobileDateRangePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
     propTypes?: any;

package/MobileDateRangePicker/MobileDateRangePicker.js

@@ -82,7 +82,6 @@ process.env.NODE_ENV !== "production" ? MobileDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2
@@ -256,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/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) {
   var _defaultizedProps$cal, _defaultizedProps$sho;
   // Props with the default values common to all date time pickers
@@ -23,12 +20,15 @@ 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$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : 1,
     views: ['day'],
     openTo: 'day',
     showToolbar: (_defaultizedProps$sho = defaultizedProps.showToolbar) != null ? _defaultizedProps$sho : true,
-    autoFocus: true,
     components: _extends({
       Field: MultiInputDateRangeField
     }, defaultizedProps.components),
@@ -48,7 +48,6 @@ const MobileNextDateRangePicker = /*#__PURE__*/React.forwardRef(function MobileN
   } = useMobileRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange
   });
   return renderPicker();
@@ -58,6 +57,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**.
@@ -238,7 +243,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
   })]),
@@ -268,6 +273,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/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"],
-  _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,12 +14,11 @@ 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
@@ -48,6 +47,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -55,7 +55,8 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       disableFuture,
       disablePast,
       selectedSections,
-      onSelectedSectionsChange
+      onSelectedSectionsChange,
+      autoFocus
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
@@ -73,6 +74,9 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
   const startInputProps = useSlotProps({
     elementType: Input,
     externalSlotProps: componentsProps == null ? void 0 : componentsProps.input,
+    additionalProps: {
+      autoFocus
+    },
     ownerState: _extends({}, ownerState, {
       position: 'start'
     })
@@ -97,6 +101,7 @@ const MultiInputDateRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -114,11 +119,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),
@@ -127,11 +136,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
       })
     }))]
@@ -142,6 +155,8 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -156,6 +171,17 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'column'
+   */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
   /**
    * If `true` disable values before the current date for date components, time for time components and both for date time components.
    * @default false
@@ -166,6 +192,10 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * Add an element between each child.
+   */
+  divider: PropTypes.node,
   /**
    * Format of the date when rendered in the input(s).
    */
@@ -212,7 +242,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * 4. If `null` is provided, no section will be selected
    * If not provided, the selected sections will be handled internally.
    */
-  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
+  selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']), PropTypes.number, PropTypes.shape({
     endIndex: PropTypes.number.isRequired,
     startIndex: PropTypes.number.isRequired
   })]),
@@ -224,6 +254,16 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * Defines the space between immediate children.
+   * @default 0
+   */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  style: PropTypes.object,
+  /**
+   * The system prop, which allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
+import Stack, { StackProps } from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import { UseDateRangeFieldProps } from '../internal/models/dateRange';
 import { RangePosition } from '../internal/models/range';
@@ -15,7 +15,9 @@ export interface UseMultiInputDateRangeFieldParams<TDate, TChildProps extends {}
 export interface UseMultiInputDateRangeFieldProps<TDate> extends UseDateRangeFieldProps<TDate> {
 }
 export type UseMultiInputDateRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputDateRangeFieldProps<TDate>> & UseMultiInputDateRangeFieldProps<TDate>;
-export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, {}> {
+export interface MultiInputDateRangeFieldProps<TDate> extends UseMultiInputDateRangeFieldComponentProps<TDate, Omit<StackProps, 'position'> & {
+    autoFocus?: boolean;
+}> {
     /**
      * Overrideable components.
      * @default {}

package/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
@@ -48,6 +47,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       shouldDisableDate,
       minDate,
@@ -103,6 +103,7 @@ const MultiInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Mult
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         shouldDisableDate,
         minDate,
@@ -126,11 +127,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),
@@ -139,11 +144,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
       })
     }))]
@@ -159,6 +168,7 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.propTypes =
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -173,6 +183,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
@@ -188,6 +209,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).
    */
@@ -257,7 +282,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
   })]),
@@ -276,6 +301,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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import Stack, { StackProps } from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
 import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps } from '../internal/models/dateTimeRange';
 import { RangePosition } from '../internal/models/range';
 export interface UseMultiInputDateTimeRangeFieldParams<TDate, TChildProps extends {}> {
@@ -15,7 +15,7 @@ export interface UseMultiInputDateTimeRangeFieldParams<TDate, TChildProps extend
 export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends UseDateTimeRangeFieldProps<TDate> {
 }
 export type UseMultiInputDateTimeRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputDateTimeRangeFieldProps<TDate>> & UseMultiInputDateTimeRangeFieldProps<TDate>;
-export interface MultiInputDateTimeRangeFieldProps<TDate> extends UseMultiInputDateTimeRangeFieldComponentProps<TDate, TextFieldProps> {
+export interface MultiInputDateTimeRangeFieldProps<TDate> extends UseMultiInputDateTimeRangeFieldComponentProps<TDate, Omit<StackProps, 'position'>> {
     /**
      * Overrideable components.
      * @default {}