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

package/node/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -16,18 +16,17 @@ var _styles = require("@mui/material/styles");
 var _utils = require("@mui/base/utils");
 var _useMultiInputTimeRangeField = require("../internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 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 MultiInputTimeRangeFieldRoot = (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: 'MuiMultiInputTimeRangeField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -52,6 +51,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       minTime,
       maxTime,
@@ -102,6 +102,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         minTime,
         maxTime,
@@ -120,11 +121,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 = (0, _objectWithoutPropertiesLoose2.default)(_useMultiInputTimeRan.startDate, _excluded3),
@@ -133,11 +138,15 @@ const MultiInputTimeRangeField = /*#__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 +163,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: _propTypes.default.bool,
+  className: _propTypes.default.string,
   /**
    * Overrideable components.
    * @default {}
@@ -168,6 +178,17 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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
@@ -183,6 +204,10 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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).
    */
@@ -236,7 +261,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.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
   })]),
@@ -247,6 +272,16 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.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.

package/node/NextDateRangePicker/NextDateRangePicker.js

@@ -46,6 +46,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.default.bool,
   /**
    * The number of calendars to render on **desktop**.
@@ -232,7 +238,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.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
   })]),
@@ -262,5 +268,13 @@ process.env.NODE_ENV !== "production" ? NextDateRangePicker.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
+  })
 } : void 0;

package/node/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -15,7 +15,7 @@ var _utils = require("@mui/base/utils");
 var _useSingleInputDateRangeField = require("./useSingleInputDateRangeField");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode"];
+  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
 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 SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateRangeField(inProps, ref) {
@@ -43,7 +43,8 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     {
       ref: inputRef,
       onPaste,
-      inputMode
+      inputMode,
+      readOnly
     } = _useSingleInputDateRa,
     fieldProps = (0, _objectWithoutPropertiesLoose2.default)(_useSingleInputDateRa, _excluded2);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({
@@ -52,7 +53,8 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     inputProps: (0, _extends2.default)({}, fieldProps.inputProps, {
       ref: inputRef,
       onPaste,
-      inputMode
+      inputMode,
+      readOnly
     })
   }));
 });
@@ -62,6 +64,19 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: _propTypes.default.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   /**
    * Overrideable components.
    * @default {}
@@ -76,6 +91,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * The default value. Use when the component is not controlled.
    */
   defaultValue: _propTypes.default.arrayOf(_propTypes.default.any),
+  /**
+   * 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
@@ -86,10 +106,70 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default false
    */
   disablePast: _propTypes.default.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: _propTypes.default.bool,
   /**
    * Format of the date when rendered in the input(s).
    */
   format: _propTypes.default.string,
+  /**
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   */
+  FormHelperTextProps: _propTypes.default.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: _propTypes.default.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: _propTypes.default.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: _propTypes.default.bool,
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  id: _propTypes.default.string,
+  /**
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   */
+  InputLabelProps: _propTypes.default.object,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: _propTypes.default.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: _propTypes.default.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.any.isRequired
+  })]),
+  /**
+   * The label content.
+   */
+  label: _propTypes.default.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: _propTypes.default.oneOf(['dense', 'none', 'normal']),
   /**
    * Maximal selectable date.
    */
@@ -98,6 +178,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Minimal selectable date.
    */
   minDate: _propTypes.default.any,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
   /**
    * Callback fired when the value changes.
    * @template TValue, TError
@@ -112,6 +197,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @param {TValue} value The value associated to the error.
    */
   onError: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -123,6 +209,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default false
    */
   readOnly: _propTypes.default.bool,
+  /**
+   * If `true`, the label is displayed as required and the `input` element is required.
+   * @default false
+   */
+  required: _propTypes.default.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:
@@ -132,7 +223,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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
   })]),
@@ -144,9 +235,23 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: _propTypes.default.func,
+  /**
+   * The size of the component.
+   */
+  size: _propTypes.default.oneOf(['medium', 'small']),
+  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]),
   /**
    * The selected value.
    * Used when the component is controlled.
    */
-  value: _propTypes.default.arrayOf(_propTypes.default.any)
+  value: _propTypes.default.arrayOf(_propTypes.default.any),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: _propTypes.default.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;

package/node/StaticDateRangePicker/StaticDateRangePicker.js

@@ -255,11 +255,6 @@ process.env.NODE_ENV !== "production" ? StaticDateRangePicker.propTypes = {
    * @returns {void|Promise} -
    */
   onMonthChange: _propTypes.default.func,
-  /**
-   * Callback fired on view change.
-   * @param {DateView} view The new view.
-   */
-  onViewChange: _propTypes.default.func,
   /**
    * Props to pass to keyboard adornment button.
    */

package/node/StaticNextDateRangePicker/StaticNextDateRangePicker.js

@@ -10,20 +10,21 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useStaticRangePicker = require("../internal/hooks/useStaticRangePicker");
 var _shared = require("../NextDateRangePicker/shared");
+var _dateRangeViewRenderers = require("../dateRangeViewRenderers");
 var _valueManagers = require("../internal/utils/valueManagers");
-var _viewRenderers = require("../internal/utils/viewRenderers");
 var _useDateRangeValidation = require("../internal/hooks/validation/useDateRangeValidation");
 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 StaticNextDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticNextDateRangePicker(inProps, ref) {
   const defaultizedProps = (0, _shared.useNextDateRangePickerDefaultizedProps)(inProps, 'MuiStaticNextDateRangePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
+  const viewRenderers = (0, _extends2.default)({
+    day: _dateRangeViewRenderers.renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
 
   // Props with the default values specific to the static variant
   const props = (0, _extends2.default)({}, defaultizedProps, {
+    viewRenderers,
     displayStaticWrapperAs,
     views: ['day'],
     openTo: 'day',
@@ -35,7 +36,6 @@ const StaticNextDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticN
   } = (0, _useStaticRangePicker.useStaticRangePicker)({
     props,
     valueManager: _valueManagers.rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: _useDateRangeValidation.validateDateRange,
     ref
   });
@@ -47,6 +47,12 @@ StaticNextDateRangePicker.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.
@@ -214,5 +220,13 @@ StaticNextDateRangePicker.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/{internal/utils/viewRenderers.js → dateRangeViewRenderers/dateRangeViewRenderers.js}

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderDateRangeView = void 0;
+exports.renderDateRangeViewCalendar = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _DateRangeCalendar = require("../../DateRangeCalendar");
+var _DateRangeCalendar = require("../DateRangeCalendar");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -13,7 +13,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-const renderDateRangeView = ({
+const renderDateRangeViewCalendar = ({
   value,
   defaultValue,
   onChange,
@@ -78,4 +78,4 @@ const renderDateRangeView = ({
   disableDragEditing: disableDragEditing,
   displayWeekNumber: displayWeekNumber
 });
-exports.renderDateRangeView = renderDateRangeView;
+exports.renderDateRangeViewCalendar = renderDateRangeViewCalendar;

package/node/dateRangeViewRenderers/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "renderDateRangeViewCalendar", {
+  enumerable: true,
+  get: function () {
+    return _dateRangeViewRenderers.renderDateRangeViewCalendar;
+  }
+});
+var _dateRangeViewRenderers = require("./dateRangeViewRenderers");

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.12
+/** @license MUI v6.0.0-alpha.13
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -197,4 +197,16 @@ Object.keys(_StaticNextDateRangePicker).forEach(function (key) {
       return _StaticNextDateRangePicker[key];
     }
   });
+});
+var _dateRangeViewRenderers = require("./dateRangeViewRenderers");
+Object.keys(_dateRangeViewRenderers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _dateRangeViewRenderers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dateRangeViewRenderers[key];
+    }
+  });
 });

package/node/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -20,7 +20,6 @@ const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const useDesktopRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
@@ -49,7 +48,6 @@ const useDesktopRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'desktop',
-    viewLookup,
     validator,
     autoFocusView: true,
     additionalViewProps: {
@@ -66,7 +64,7 @@ const useDesktopRangePicker = ({
     });
   };
   const fieldSlotsProps = (0, _useRangePickerInputProps.useRangePickerInputProps)({
-    wrapperVariant: 'mobile',
+    wrapperVariant: 'desktop',
     open,
     actions,
     readOnly,
@@ -102,7 +100,7 @@ const useDesktopRangePicker = ({
       const inputPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.componentsProps?.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return (0, _extends2.default)({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps, inputPropsPassedByPicker?.inputProps)
+        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {

package/node/internal/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -20,7 +20,6 @@ const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const useMobileRangePicker = ({
   props,
   valueManager,
-  viewLookup,
   validator
 }) => {
   (0, _xLicensePro.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
@@ -46,7 +45,6 @@ const useMobileRangePicker = ({
     props,
     valueManager,
     wrapperVariant: 'mobile',
-    viewLookup,
     validator,
     autoFocusView: true,
     additionalViewProps: {
@@ -70,7 +68,7 @@ const useMobileRangePicker = ({
     elementType: Field,
     externalSlotProps: componentsProps.field,
     additionalProps: (0, _extends2.default)({}, pickerFieldProps, {
-      readOnly,
+      readOnly: readOnly ?? true,
       disabled,
       className,
       format,
@@ -87,7 +85,7 @@ const useMobileRangePicker = ({
       const inputPropsPassedByField = (0, _utils.resolveComponentProps)(fieldProps.componentsProps?.input, ownerState);
       const inputPropsPassedByPicker = ownerState.position === 'start' ? fieldSlotsProps.startInput : fieldSlotsProps.endInput;
       return (0, _extends2.default)({}, externalInputProps, inputPropsPassedByField, inputPropsPassedByPicker, {
-        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps, inputPropsPassedByPicker?.inputProps)
+        inputProps: (0, _extends2.default)({}, externalInputProps?.inputProps, inputPropsPassedByField?.inputProps)
       });
     },
     root: ownerState => {

package/node/internal/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -28,7 +28,9 @@ const useMultiInputDateRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -55,6 +57,8 @@ const useMultiInputDateRangeField = ({
   const handleStartDateChange = (0, _useEventCallback.default)(buildChangeHandler(0));
   const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const startInputProps = (0, _extends2.default)({}, inStartInputProps, {
+    disabled,
+    readOnly,
     format,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
@@ -62,6 +66,8 @@ const useMultiInputDateRangeField = ({
   });
   const endInputProps = (0, _extends2.default)({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/node/internal/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -44,7 +44,9 @@ const useMultiInputDateTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -72,12 +74,16 @@ const useMultiInputDateTimeRangeField = ({
   const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const startInputProps = (0, _extends2.default)({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = (0, _extends2.default)({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange

package/node/internal/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -40,7 +40,9 @@ const useMultiInputTimeRangeField = ({
     value: valueProp,
     defaultValue,
     format,
-    onChange
+    onChange,
+    disabled,
+    readOnly
   } = sharedProps;
   const firstDefaultValue = React.useRef(defaultValue);
 
@@ -68,12 +70,16 @@ const useMultiInputTimeRangeField = ({
   const handleEndDateChange = (0, _useEventCallback.default)(buildChangeHandler(1));
   const startInputProps = (0, _extends2.default)({}, inStartInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[0],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[0],
     onChange: handleStartDateChange
   });
   const endInputProps = (0, _extends2.default)({}, inEndInputProps, {
     format,
+    disabled,
+    readOnly,
     value: valueProp === undefined ? undefined : valueProp[1],
     defaultValue: defaultValue === undefined ? undefined : defaultValue[1],
     onChange: handleEndDateChange