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

package/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
@@ -48,6 +47,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
       format,
       onChange,
       readOnly,
+      disabled,
       onError,
       minTime,
       maxTime,
@@ -98,6 +98,7 @@ const MultiInputTimeRangeField = /*#__PURE__*/React.forwardRef(function MultiInp
         format,
         onChange,
         readOnly,
+        disabled,
         onError,
         minTime,
         maxTime,
@@ -116,11 +117,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),
@@ -129,11 +134,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
       })
     }))]
@@ -149,6 +158,7 @@ process.env.NODE_ENV !== "production" ? MultiInputTimeRangeField.propTypes = {
    * @default `utils.is12HourCycleInCurrentLocale()`
    */
   ampm: PropTypes.bool,
+  className: PropTypes.string,
   /**
    * Overrideable components.
    * @default {}
@@ -163,6 +173,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
@@ -178,6 +199,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).
    */
@@ -231,7 +256,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
   })]),
@@ -242,6 +267,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/MultiInputTimeRangeField/MultiInputTimeRangeField.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 { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internal/models/timeRange';
 import { RangePosition } from '../internal/models/range';
@@ -15,7 +15,7 @@ export interface UseMultiInputTimeRangeFieldParams<TDate, TChildProps extends {}
 export interface UseMultiInputTimeRangeFieldProps<TDate> extends UseTimeRangeFieldProps<TDate> {
 }
 export type UseMultiInputTimeRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseMultiInputTimeRangeFieldProps<TDate>> & UseMultiInputTimeRangeFieldProps<TDate>;
-export interface MultiInputTimeRangeFieldProps<TDate> extends UseMultiInputTimeRangeFieldComponentProps<TDate, {}> {
+export interface MultiInputTimeRangeFieldProps<TDate> extends UseMultiInputTimeRangeFieldComponentProps<TDate, Omit<StackProps, 'position'>> {
     /**
      * Overrideable components.
      * @default {}

package/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 };

package/NextDateRangePicker/shared.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { LocalizedComponent } from '@mui/x-date-pickers';
-import { BaseNextPickerProps, DefaultizedProps, BaseDateValidationProps } from '@mui/x-date-pickers/internals';
+import { DefaultizedProps, BaseDateValidationProps, BaseNextPickerInputProps, PickerViewRendererLookup } from '@mui/x-date-pickers/internals';
 import { DateRangeValidationError } from '../internal/hooks/validation/useDateRangeValidation';
 import { DateRange } from '../internal/models';
 import { DateRangeCalendarSlotsComponent, DateRangeCalendarSlotsComponentsProps, ExportedDateRangeCalendarProps } from '../DateRangeCalendar';
 import { DateRangePickerToolbarProps, ExportedDateRangePickerToolbarProps } from '../DateRangePicker/DateRangePickerToolbar';
+import { DateRangeViewRendererProps } from '../dateRangeViewRenderers';
 export interface BaseNextDateRangePickerSlotsComponent<TDate> extends DateRangeCalendarSlotsComponent<TDate> {
     /**
      * Custom component for the toolbar rendered above the views.
@@ -15,7 +16,7 @@ export interface BaseNextDateRangePickerSlotsComponent<TDate> extends DateRangeC
 export interface BaseNextDateRangePickerSlotsComponentsProps<TDate> extends DateRangeCalendarSlotsComponentsProps<TDate> {
     toolbar?: ExportedDateRangePickerToolbarProps;
 }
-export interface BaseNextDateRangePickerProps<TDate> extends Omit<BaseNextPickerProps<DateRange<TDate>, TDate, 'day', DateRangeValidationError>, 'views' | 'openTo' | 'onViewChange' | 'orientation'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate> {
+export interface BaseNextDateRangePickerProps<TDate> extends Omit<BaseNextPickerInputProps<DateRange<TDate>, TDate, 'day', DateRangeValidationError>, 'view' | 'views' | 'openTo' | 'onViewChange' | 'orientation'>, ExportedDateRangeCalendarProps<TDate>, BaseDateValidationProps<TDate> {
     /**
      * Overrideable components.
      * @default {}
@@ -26,6 +27,12 @@ export interface BaseNextDateRangePickerProps<TDate> extends Omit<BaseNextPicker
      * @default {}
      */
     componentsProps?: BaseNextDateRangePickerSlotsComponentsProps<TDate>;
+    /**
+     * 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?: Partial<PickerViewRendererLookup<DateRange<TDate>, 'day', DateRangeViewRendererProps<TDate, 'day'>, {}>>;
 }
 type UseNextDateRangePickerDefaultizedProps<TDate, Props extends BaseNextDateRangePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, keyof BaseDateValidationProps<TDate>>>;
 export declare function useNextDateRangePickerDefaultizedProps<TDate, Props extends BaseNextDateRangePickerProps<TDate>>(props: Props, name: string): UseNextDateRangePickerDefaultizedProps<TDate, Props>;

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps"],
-  _excluded2 = ["ref", "onPaste", "inputMode"];
+  _excluded2 = ["ref", "onPaste", "inputMode", "readOnly"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
@@ -35,7 +35,8 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     {
       ref: inputRef,
       onPaste,
-      inputMode
+      inputMode,
+      readOnly
     } = _useSingleInputDateRa,
     fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateRa, _excluded2);
   return /*#__PURE__*/_jsx(Input, _extends({
@@ -44,7 +45,8 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     inputProps: _extends({}, fieldProps.inputProps, {
       ref: inputRef,
       onPaste,
-      inputMode
+      inputMode,
+      readOnly
     })
   }));
 });
@@ -53,6 +55,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.bool,
+  className: PropTypes.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.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   /**
    * Overrideable components.
    * @default {}
@@ -67,6 +82,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * The default value. Use when the component is not controlled.
    */
   defaultValue: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * 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
@@ -77,10 +97,70 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
   /**
    * Format of the date when rendered in the input(s).
    */
   format: PropTypes.string,
+  /**
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   */
+  FormHelperTextProps: PropTypes.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.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.bool,
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  id: PropTypes.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.object,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: PropTypes.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.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any.isRequired
+  })]),
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
   /**
    * Maximal selectable date.
    */
@@ -89,6 +169,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * Minimal selectable date.
    */
   minDate: PropTypes.any,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
   /**
    * Callback fired when the value changes.
    * @template TValue, TError
@@ -103,6 +188,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @param {TValue} value The value associated to the error.
    */
   onError: PropTypes.func,
+  onFocus: PropTypes.func,
   /**
    * Callback fired when the selected sections change.
    * @param {FieldSelectedSections} newValue The new selected sections.
@@ -114,6 +200,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @default false
    */
   readOnly: PropTypes.bool,
+  /**
+   * If `true`, the label is displayed as required and the `input` element is required.
+   * @default false
+   */
+  required: PropTypes.bool,
   /**
    * The currently selected sections.
    * This prop accept four formats:
@@ -123,7 +214,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.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
   })]),
@@ -135,10 +226,24 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    * @returns {boolean} Returns `true` if the date should be disabled.
    */
   shouldDisableDate: PropTypes.func,
+  /**
+   * The size of the component.
+   */
+  size: PropTypes.oneOf(['medium', 'small']),
+  style: PropTypes.object,
+  /**
+   * The system prop that 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.
    */
-  value: PropTypes.arrayOf(PropTypes.any)
+  value: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
 export { SingleInputDateRangeField };

package/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
+import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals';
 import { UseDateRangeFieldDefaultizedProps, UseDateRangeFieldProps } from '../internal/models';
 export interface UseSingleInputDateRangeFieldParams<TDate, TChildProps extends {}> {
     props: UseSingleInputDateRangeFieldComponentProps<TDate, TChildProps>;
@@ -10,7 +11,7 @@ export interface UseSingleInputDateRangeFieldProps<TDate> extends UseDateRangeFi
 }
 export type UseSingleInputDateRangeFieldDefaultizedProps<TDate, AdditionalProps extends {}> = UseDateRangeFieldDefaultizedProps<TDate> & AdditionalProps;
 export type UseSingleInputDateRangeFieldComponentProps<TDate, TChildProps extends {}> = Omit<TChildProps, keyof UseSingleInputDateRangeFieldProps<TDate>> & UseSingleInputDateRangeFieldProps<TDate>;
-export interface SingleInputDateRangeFieldProps<TDate> extends UseSingleInputDateRangeFieldComponentProps<TDate, TextFieldProps> {
+export interface SingleInputDateRangeFieldProps<TDate> extends UseSingleInputDateRangeFieldComponentProps<TDate, FieldsTextFieldProps> {
     /**
      * Overrideable components.
      * @default {}

package/StaticDateRangePicker/StaticDateRangePicker.js

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

package/StaticNextDateRangePicker/StaticNextDateRangePicker.js

@@ -3,19 +3,20 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useStaticRangePicker } from '../internal/hooks/useStaticRangePicker';
 import { useNextDateRangePickerDefaultizedProps } from '../NextDateRangePicker/shared';
+import { renderDateRangeViewCalendar } from '../dateRangeViewRenderers';
 import { rangeValueManager } from '../internal/utils/valueManagers';
-import { renderDateRangeView } from '../internal/utils/viewRenderers';
 import { validateDateRange } from '../internal/hooks/validation/useDateRangeValidation';
-const VIEW_LOOKUP = {
-  day: renderDateRangeView
-};
 const StaticNextDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticNextDateRangePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$cal, _defaultizedProps$sho;
   const defaultizedProps = useNextDateRangePickerDefaultizedProps(inProps, 'MuiStaticNextDateRangePicker');
   const displayStaticWrapperAs = (_defaultizedProps$dis = defaultizedProps.displayStaticWrapperAs) != null ? _defaultizedProps$dis : 'mobile';
+  const viewRenderers = _extends({
+    day: renderDateRangeViewCalendar
+  }, defaultizedProps.viewRenderers);
 
   // Props with the default values specific to the static variant
   const props = _extends({}, defaultizedProps, {
+    viewRenderers,
     displayStaticWrapperAs,
     views: ['day'],
     openTo: 'day',
@@ -27,7 +28,6 @@ const StaticNextDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticN
   } = useStaticRangePicker({
     props,
     valueManager: rangeValueManager,
-    viewLookup: VIEW_LOOKUP,
     validator: validateDateRange,
     ref
   });
@@ -38,6 +38,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.bool,
   /**
    * The number of calendars to render.
@@ -205,6 +211,14 @@ StaticNextDateRangePicker.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 { StaticNextDateRangePicker };

package/dateRangeViewRenderers/dateRangeViewRenderers.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { DateOrTimeView } from '@mui/x-date-pickers/internals';
+import { DateRangeCalendarProps } from '../DateRangeCalendar';
+export interface DateRangeViewRendererProps<TDate, TView extends DateOrTimeView> extends DateRangeCalendarProps<TDate> {
+    view: TView;
+    onViewChange?: (view: TView) => void;
+    views: readonly TView[];
+}
+/**
+ * We don't pass all the props down to `DateRangeCalendar`,
+ * because otherwise some unwanted props would be passed to the HTML element.
+ */
+export declare const renderDateRangeViewCalendar: <TDate extends unknown>({ value, defaultValue, onChange, className, classes, disableFuture, disablePast, minDate, maxDate, shouldDisableDate, reduceAnimations, onMonthChange, defaultCalendarMonth, rangePosition, onRangePositionChange, calendars, components, componentsProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, disableAutoMonthSwitching, sx, autoFocus, fixedWeekNumber, disableDragEditing, displayWeekNumber, }: DateRangeViewRendererProps<TDate, any>) => JSX.Element;

package/{internal/utils/viewRenderers.js → dateRangeViewRenderers/dateRangeViewRenderers.js}

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { DateRangeCalendar } from '../../DateRangeCalendar';
-
+import { DateRangeCalendar } from '../DateRangeCalendar';
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * We don't pass all the props down to `DateRangeCalendar`,
  * because otherwise some unwanted props would be passed to the HTML element.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-export const renderDateRangeView = ({
+export const renderDateRangeViewCalendar = ({
   value,
   defaultValue,
   onChange,

package/dateRangeViewRenderers/index.d.ts

@@ -0,0 +1,2 @@
+export { renderDateRangeViewCalendar } from './dateRangeViewRenderers';
+export type { DateRangeViewRendererProps } from './dateRangeViewRenderers';

package/dateRangeViewRenderers/index.js

@@ -0,0 +1 @@
+export { renderDateRangeViewCalendar } from './dateRangeViewRenderers';

package/dateRangeViewRenderers/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/dateRangeViewRenderers/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -9,10 +9,11 @@ export * from './MultiInputDateRangeField';
 export * from './MultiInputTimeRangeField';
 export * from './MultiInputDateTimeRangeField';
 export * from './SingleInputDateRangeField';
-export type { DateRangeFieldSection } from './internal/models/range';
+export type { RangeFieldSection } from './internal/models/fields';
 export * from './DateRangeCalendar';
 export * from './NextDateRangePicker';
 export * from './DesktopNextDateRangePicker';
 export * from './MobileNextDateRangePicker';
 export * from './StaticNextDateRangePicker';
+export * from './dateRangeViewRenderers';
 export type { DateRangeValidationError } from './internal/hooks/validation/useDateRangeValidation';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.11
+/** @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.
@@ -23,4 +23,7 @@ export * from './DateRangeCalendar';
 export * from './NextDateRangePicker';
 export * from './DesktopNextDateRangePicker';
 export * from './MobileNextDateRangePicker';
-export * from './StaticNextDateRangePicker';
+export * from './StaticNextDateRangePicker';
+
+// View renderers
+export * from './dateRangeViewRenderers';

package/internal/hooks/useDesktopRangePicker/useDesktopRangePicker.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DateOrTimeView } from '@mui/x-date-pickers/internals';
 import { UseDesktopRangePickerParams, UseDesktopRangePickerProps } from './useDesktopRangePicker.types';
-export declare const useDesktopRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any>>({ props, valueManager, viewLookup, validator, }: UseDesktopRangePickerParams<TDate, TView, TExternalProps>) => {
+export declare const useDesktopRangePicker: <TDate, TView extends DateOrTimeView, TExternalProps extends UseDesktopRangePickerProps<TDate, TView, any, TExternalProps>>({ props, valueManager, validator, }: UseDesktopRangePickerParams<TDate, TView, TExternalProps>) => {
     renderPicker: () => JSX.Element;
 };