@mui/x-date-pickers-pro 7.0.0-beta.6 → 7.0.0

package/SingleInputTimeRangeField/useSingleInputTimeRangeField.js

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import { useField, splitFieldInternalAndForwardedProps, useDefaultizedTimeField } from '@mui/x-date-pickers/internals';
-import { rangeValueManager, rangeFieldValueManager } from '../internals/utils/valueManagers';
+import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateTimeRange } from '../internals/utils/validation/validateTimeRange';
 export const useSingleInputTimeRangeField = inProps => {
   const props = useDefaultizedTimeField(inProps);
@@ -7,11 +8,14 @@ export const useSingleInputTimeRangeField = inProps => {
     forwardedProps,
     internalProps
   } = splitFieldInternalAndForwardedProps(props, 'time');
+  const fieldValueManager = React.useMemo(() => getRangeFieldValueManager({
+    dateSeparator: internalProps.dateSeparator
+  }), [internalProps.dateSeparator]);
   return useField({
     forwardedProps,
     internalProps,
     valueManager: rangeValueManager,
-    fieldValueManager: rangeFieldValueManager,
+    fieldValueManager,
     validator: validateTimeRange,
     valueType: 'time'
   });

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -17,9 +17,8 @@ import { validateDateRange } from '../internals/utils/validation/validateDateRan
  * - [StaticDateRangePicker API](https://mui.com/x/api/date-pickers/static-date-range-picker/)
  */
 const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateRangePicker(inProps, ref) {
-  var _defaultizedProps$dis, _defaultizedProps$cal, _defaultizedProps$slo;
   const defaultizedProps = useDateRangePickerDefaultizedProps(inProps, 'MuiStaticDateRangePicker');
-  const displayStaticWrapperAs = (_defaultizedProps$dis = defaultizedProps.displayStaticWrapperAs) != null ? _defaultizedProps$dis : 'mobile';
+  const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
   const viewRenderers = _extends({
     day: renderDateRangeViewCalendar
   }, defaultizedProps.viewRenderers);
@@ -30,11 +29,11 @@ const StaticDateRangePicker = /*#__PURE__*/React.forwardRef(function StaticDateR
     displayStaticWrapperAs,
     views: ['day'],
     openTo: 'day',
-    calendars: (_defaultizedProps$cal = defaultizedProps.calendars) != null ? _defaultizedProps$cal : displayStaticWrapperAs === 'mobile' ? 1 : 2,
+    calendars: defaultizedProps.calendars ?? (displayStaticWrapperAs === 'mobile' ? 1 : 2),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       toolbar: _extends({
         hidden: displayStaticWrapperAs === 'desktop'
-      }, (_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -218,7 +217,7 @@ StaticDateRangePicker.propTypes = {
   /**
    * Disable specific date.
    *
-   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
    * @template TDate
    * @param {TDate} day The date to test.

package/index.d.ts

@@ -14,6 +14,7 @@ export * from './SingleInputDateRangeField';
 export * from './SingleInputTimeRangeField';
 export * from './SingleInputDateTimeRangeField';
 export * from './DateRangeCalendar';
+export * from './PickersRangeCalendarHeader';
 export * from './DateRangePicker';
 export * from './DesktopDateRangePicker';
 export * from './MobileDateRangePicker';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-beta.6
+ * @mui/x-date-pickers-pro v7.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -24,6 +24,7 @@ export * from './SingleInputDateTimeRangeField';
 
 // Calendars
 export * from './DateRangeCalendar';
+export * from './PickersRangeCalendarHeader';
 
 // New pickers
 export * from './DateRangePicker';

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useDesktopRangePicker = _ref => {
-  var _props$openTo, _fieldType, _initialView$current, _slots$layout;
   let {
       props
     } = _ref,
@@ -46,8 +45,8 @@ export const useDesktopRangePicker = _ref => {
   const popperRef = React.useRef(null);
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
-  const initialView = React.useRef((_props$openTo = props.openTo) != null ? _props$openTo : null);
-  const fieldType = (_fieldType = slots.field.fieldType) != null ? _fieldType : 'multi-input';
+  const initialView = React.useRef(props.openTo ?? null);
+  const fieldType = slots.field.fieldType ?? 'multi-input';
   const {
     rangePosition,
     onRangePositionChange
@@ -77,8 +76,7 @@ export const useDesktopRangePicker = _ref => {
   }, []);
   const handleBlur = () => {
     executeInTheNextEventLoopTick(() => {
-      var _fieldContainerRef$cu, _popperRef$current;
-      if ((_fieldContainerRef$cu = fieldContainerRef.current) != null && _fieldContainerRef$cu.contains(getActiveElement(document)) || (_popperRef$current = popperRef.current) != null && _popperRef$current.contains(getActiveElement(document))) {
+      if (fieldContainerRef.current?.contains(getActiveElement(document)) || popperRef.current?.contains(getActiveElement(document))) {
         return;
       }
       actions.onDismiss();
@@ -87,7 +85,7 @@ export const useDesktopRangePicker = _ref => {
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.field,
+    externalSlotProps: slotProps?.field,
     additionalProps: _extends({}, pickerFieldProps, {
       readOnly,
       disabled,
@@ -126,20 +124,20 @@ export const useDesktopRangePicker = _ref => {
     startFieldRef,
     endFieldRef,
     currentView: layoutProps.view !== props.openTo ? layoutProps.view : undefined,
-    initialView: (_initialView$current = initialView.current) != null ? _initialView$current : undefined,
+    initialView: initialView.current ?? undefined,
     onViewChange: layoutProps.onViewChange
   });
   const slotPropsForLayout = _extends({}, slotProps, {
-    tabs: _extends({}, slotProps == null ? void 0 : slotProps.tabs, {
+    tabs: _extends({}, slotProps?.tabs, {
       rangePosition,
       onRangePositionChange
     }),
-    toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
+    toolbar: _extends({}, slotProps?.toolbar, {
       rangePosition,
       onRangePositionChange
     })
   });
-  const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickersLayout;
+  const Layout = slots?.layout ?? PickersLayout;
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
     children: [/*#__PURE__*/_jsx(Field, _extends({}, enrichedFieldProps)), /*#__PURE__*/_jsx(PickersPopper, _extends({
@@ -154,7 +152,7 @@ export const useDesktopRangePicker = _ref => {
       slotProps: slotProps,
       shouldRestoreFocus: shouldRestoreFocus,
       reduceAnimations: reduceAnimations,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
         slots: slots,
         slotProps: slotPropsForLayout,
         children: renderCurrentView()

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -32,12 +32,11 @@ const useMultiInputFieldSlotProps = ({
   const handleEndFieldRef = useForkRef(fieldProps.unstableEndFieldRef, endFieldRef);
   const previousRangePosition = React.useRef(rangePosition);
   React.useEffect(() => {
-    var _currentFieldRef$curr;
     if (!open) {
       return;
     }
     const currentFieldRef = rangePosition === 'start' ? startFieldRef : endFieldRef;
-    (_currentFieldRef$curr = currentFieldRef.current) == null || _currentFieldRef$curr.focusField();
+    currentFieldRef.current?.focusField();
     if (!currentFieldRef.current || !currentView) {
       // could happen when the user is switching between the inputs
       previousRangePosition.current = rangePosition;
@@ -68,7 +67,7 @@ const useMultiInputFieldSlotProps = ({
     if (open) {
       onRangePositionChange('start');
       if (previousRangePosition.current !== 'start' && initialView) {
-        onViewChange == null || onViewChange(initialView);
+        onViewChange?.(initialView);
       }
     }
   };
@@ -76,24 +75,23 @@ const useMultiInputFieldSlotProps = ({
     if (open) {
       onRangePositionChange('end');
       if (previousRangePosition.current !== 'end' && initialView) {
-        onViewChange == null || onViewChange(initialView);
+        onViewChange?.(initialView);
       }
     }
   };
   const slots = _extends({
-    textField: pickerSlots == null ? void 0 : pickerSlots.textField,
-    root: pickerSlots == null ? void 0 : pickerSlots.fieldRoot,
-    separator: pickerSlots == null ? void 0 : pickerSlots.fieldSeparator
+    textField: pickerSlots?.textField,
+    root: pickerSlots?.fieldRoot,
+    separator: pickerSlots?.fieldSeparator
   }, fieldProps.slots);
   const slotProps = _extends({}, fieldProps.slotProps, {
     textField: ownerState => {
-      const resolvedComponentProps = resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState);
+      const resolvedComponentProps = resolveComponentProps(pickerSlotProps?.textField, ownerState);
       let textFieldProps;
       let InputProps;
       if (ownerState.position === 'start') {
-        var _inLocaleText$start;
         textFieldProps = _extends({
-          label: (_inLocaleText$start = inLocaleText == null ? void 0 : inLocaleText.start) != null ? _inLocaleText$start : localeText.start,
+          label: inLocaleText?.start ?? localeText.start,
           onKeyDown: onSpaceOrEnter(openRangeStartSelection),
           onFocus: handleFocusStart,
           focused: open ? rangePosition === 'start' : undefined
@@ -103,14 +101,13 @@ const useMultiInputFieldSlotProps = ({
           readOnly: true
         });
         if (anchorRef) {
-          InputProps = _extends({}, resolvedComponentProps == null ? void 0 : resolvedComponentProps.InputProps, {
+          InputProps = _extends({}, resolvedComponentProps?.InputProps, {
             ref: anchorRef
           });
         }
       } else {
-        var _inLocaleText$end;
         textFieldProps = _extends({
-          label: (_inLocaleText$end = inLocaleText == null ? void 0 : inLocaleText.end) != null ? _inLocaleText$end : localeText.end,
+          label: inLocaleText?.end ?? localeText.end,
           onKeyDown: onSpaceOrEnter(openRangeEndSelection),
           onFocus: handleFocusEnd,
           focused: open ? rangePosition === 'end' : undefined
@@ -119,11 +116,11 @@ const useMultiInputFieldSlotProps = ({
         }, wrapperVariant === 'mobile' && {
           readOnly: true
         });
-        InputProps = resolvedComponentProps == null ? void 0 : resolvedComponentProps.InputProps;
+        InputProps = resolvedComponentProps?.InputProps;
       }
       return _extends({}, labelId != null && {
         id: `${labelId}-${ownerState.position}`
-      }, textFieldProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.textField, ownerState), {
+      }, textFieldProps, resolveComponentProps(pickerSlotProps?.textField, ownerState), {
         InputProps
       });
     },
@@ -131,9 +128,9 @@ const useMultiInputFieldSlotProps = ({
       const rootProps = {
         onBlur
       };
-      return _extends({}, rootProps, resolveComponentProps(pickerSlotProps == null ? void 0 : pickerSlotProps.fieldRoot, ownerState));
+      return _extends({}, rootProps, resolveComponentProps(pickerSlotProps?.fieldRoot, ownerState));
     },
-    separator: pickerSlotProps == null ? void 0 : pickerSlotProps.fieldSeparator
+    separator: pickerSlotProps?.fieldSeparator
   });
 
   /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
@@ -177,28 +174,25 @@ const useSingleInputFieldSlotProps = ({
 
     // bring back focus to the field with the current view section selected
     if (currentView) {
-      var _startFieldRef$curren;
       const sections = startFieldRef.current.getSections().map(section => section.type);
       const newSelectedSection = rangePosition === 'start' ? sections.indexOf(currentView) : sections.lastIndexOf(currentView);
-      (_startFieldRef$curren = startFieldRef.current) == null || _startFieldRef$curren.focusField(newSelectedSection);
+      startFieldRef.current?.focusField(newSelectedSection);
     }
   }, [rangePosition, open, currentView, startFieldRef]);
   const updateRangePosition = () => {
-    var _startFieldRef$curren2, _startFieldRef$curren3;
-    if (!((_startFieldRef$curren2 = startFieldRef.current) != null && _startFieldRef$curren2.isFieldFocused())) {
+    if (!startFieldRef.current?.isFieldFocused()) {
       return;
     }
     const sections = startFieldRef.current.getSections();
-    const activeSectionIndex = (_startFieldRef$curren3 = startFieldRef.current) == null ? void 0 : _startFieldRef$curren3.getActiveSectionIndex();
+    const activeSectionIndex = startFieldRef.current?.getActiveSectionIndex();
     const domRangePosition = activeSectionIndex == null || activeSectionIndex < sections.length / 2 ? 'start' : 'end';
     if (domRangePosition != null && domRangePosition !== rangePosition) {
       onRangePositionChange(domRangePosition);
     }
   };
   const handleSelectedSectionsChange = useEventCallback(selectedSection => {
-    var _fieldProps$onSelecte;
     setTimeout(updateRangePosition);
-    (_fieldProps$onSelecte = fieldProps.onSelectedSectionsChange) == null || _fieldProps$onSelecte.call(fieldProps, selectedSection);
+    fieldProps.onSelectedSectionsChange?.(selectedSection);
   });
   const openPicker = event => {
     event.stopPropagation();
@@ -207,14 +201,14 @@ const useSingleInputFieldSlotProps = ({
     }
   };
   const slots = _extends({}, fieldProps.slots, {
-    textField: pickerSlots == null ? void 0 : pickerSlots.textField,
-    clearButton: pickerSlots == null ? void 0 : pickerSlots.clearButton,
-    clearIcon: pickerSlots == null ? void 0 : pickerSlots.clearIcon
+    textField: pickerSlots?.textField,
+    clearButton: pickerSlots?.clearButton,
+    clearIcon: pickerSlots?.clearIcon
   });
   const slotProps = _extends({}, fieldProps.slotProps, {
-    textField: pickerSlotProps == null ? void 0 : pickerSlotProps.textField,
-    clearButton: pickerSlots == null ? void 0 : pickerSlots.clearButton,
-    clearIcon: pickerSlots == null ? void 0 : pickerSlots.clearIcon
+    textField: pickerSlotProps?.textField,
+    clearButton: pickerSlots?.clearButton,
+    clearIcon: pickerSlots?.clearIcon
   });
   const enrichedFieldProps = _extends({}, fieldProps, {
     slots,
@@ -226,7 +220,7 @@ const useSingleInputFieldSlotProps = ({
     onBlur,
     InputProps: _extends({
       ref: anchorRef
-    }, fieldProps == null ? void 0 : fieldProps.InputProps),
+    }, fieldProps?.InputProps),
     focused: open
   }, labelId != null && {
     id: labelId

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -15,7 +15,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const releaseInfo = getReleaseInfo();
 export const useMobileRangePicker = _ref => {
-  var _fieldType, _innerSlotProps$toolb, _innerSlotProps$toolb2, _slots$layout;
   let {
       props
     } = _ref,
@@ -42,7 +41,7 @@ export const useMobileRangePicker = _ref => {
   } = props;
   const startFieldRef = React.useRef(null);
   const endFieldRef = React.useRef(null);
-  const fieldType = (_fieldType = slots.field.fieldType) != null ? _fieldType : 'multi-input';
+  const fieldType = slots.field.fieldType ?? 'multi-input';
   const {
     rangePosition,
     onRangePositionChange
@@ -68,9 +67,9 @@ export const useMobileRangePicker = _ref => {
   const Field = slots.field;
   const fieldProps = useSlotProps({
     elementType: Field,
-    externalSlotProps: innerSlotProps == null ? void 0 : innerSlotProps.field,
+    externalSlotProps: innerSlotProps?.field,
     additionalProps: _extends({}, pickerFieldProps, {
-      readOnly: readOnly != null ? readOnly : true,
+      readOnly: readOnly ?? true,
       disabled,
       className,
       sx,
@@ -86,7 +85,7 @@ export const useMobileRangePicker = _ref => {
     } : {}),
     ownerState: props
   });
-  const isToolbarHidden = (_innerSlotProps$toolb = innerSlotProps == null || (_innerSlotProps$toolb2 = innerSlotProps.toolbar) == null ? void 0 : _innerSlotProps$toolb2.hidden) != null ? _innerSlotProps$toolb : false;
+  const isToolbarHidden = innerSlotProps?.toolbar?.hidden ?? false;
   const enrichedFieldProps = useEnrichedRangePickerFieldProps({
     wrapperVariant: 'mobile',
     fieldType,
@@ -106,17 +105,17 @@ export const useMobileRangePicker = _ref => {
     endFieldRef
   });
   const slotPropsForLayout = _extends({}, innerSlotProps, {
-    tabs: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.tabs, {
+    tabs: _extends({}, innerSlotProps?.tabs, {
       rangePosition,
       onRangePositionChange
     }),
-    toolbar: _extends({}, innerSlotProps == null ? void 0 : innerSlotProps.toolbar, {
+    toolbar: _extends({}, innerSlotProps?.toolbar, {
       titleId: labelId,
       rangePosition,
       onRangePositionChange
     })
   });
-  const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickersLayout;
+  const Layout = slots?.layout ?? PickersLayout;
   const finalLocaleText = _extends({}, contextLocaleText, localeText);
   let labelledById = pickerParams.valueType === 'date-time' ? `${labelId}-start-toolbar ${labelId}-end-toolbar` : labelId;
   if (isToolbarHidden) {
@@ -136,7 +135,7 @@ export const useMobileRangePicker = _ref => {
   const slotProps = _extends({}, innerSlotProps, {
     mobilePaper: _extends({
       'aria-labelledby': labelledById
-    }, innerSlotProps == null ? void 0 : innerSlotProps.mobilePaper)
+    }, innerSlotProps?.mobilePaper)
   });
   const renderPicker = () => /*#__PURE__*/_jsxs(LocalizationProvider, {
     localeText: localeText,
@@ -144,7 +143,7 @@ export const useMobileRangePicker = _ref => {
       open: open,
       slots: slots,
       slotProps: slotProps,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
         slots: slots,
         slotProps: slotPropsForLayout,
         children: renderCurrentView()

package/internals/hooks/useMultiInputFieldSelectedSections.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 export const useMultiInputFieldSelectedSections = params => {
-  var _params$selectedSecti;
   const unstableEndFieldRef = React.useRef(null);
   const handleUnstableEndFieldRef = useForkRef(params.unstableEndFieldRef, unstableEndFieldRef);
-  const [startSelectedSection, setStartSelectedSection] = React.useState((_params$selectedSecti = params.selectedSections) != null ? _params$selectedSecti : null);
+  const [startSelectedSection, setStartSelectedSection] = React.useState(params.selectedSections ?? null);
   const [endSelectedSection, setEndSelectedSection] = React.useState(null);
   const getActiveField = () => {
     if (unstableEndFieldRef.current && unstableEndFieldRef.current.isFieldFocused()) {
@@ -16,15 +15,13 @@ export const useMultiInputFieldSelectedSections = params => {
   const handleStartSelectedSectionChange = useEventCallback(newSelectedSections => {
     setStartSelectedSection(newSelectedSections);
     if (getActiveField() === 'start') {
-      var _params$onSelectedSec;
-      (_params$onSelectedSec = params.onSelectedSectionsChange) == null || _params$onSelectedSec.call(params, newSelectedSections);
+      params.onSelectedSectionsChange?.(newSelectedSections);
     }
   });
   const handleEndSelectedSectionChange = useEventCallback(newSelectedSections => {
     setEndSelectedSection(newSelectedSections);
     if (getActiveField() === 'end') {
-      var _params$onSelectedSec2;
-      (_params$onSelectedSec2 = params.onSelectedSectionsChange) == null || _params$onSelectedSec2.call(params, newSelectedSections);
+      params.onSelectedSectionsChange?.(newSelectedSections);
     }
   });
   const activeField = getActiveField();

package/internals/hooks/useRangePosition.js

@@ -1,18 +1,17 @@
 import useControlled from '@mui/utils/useControlled';
 import useEventCallback from '@mui/utils/useEventCallback';
 export const useRangePosition = (props, singleInputFieldRef) => {
-  var _props$defaultRangePo;
   const [rangePosition, setRangePosition] = useControlled({
     name: 'useRangePosition',
     state: 'rangePosition',
     controlled: props.rangePosition,
-    default: (_props$defaultRangePo = props.defaultRangePosition) != null ? _props$defaultRangePo : 'start'
+    default: props.defaultRangePosition ?? 'start'
   });
 
   // When using a single input field,
   // we want to select the 1st section of the edited date when updating the range position.
   const syncRangePositionWithSingleInputField = newRangePosition => {
-    if ((singleInputFieldRef == null ? void 0 : singleInputFieldRef.current) == null) {
+    if (singleInputFieldRef?.current == null) {
       return;
     }
     const sections = singleInputFieldRef.current.getSections();
@@ -20,9 +19,8 @@ export const useRangePosition = (props, singleInputFieldRef) => {
     singleInputFieldRef.current.setSelectedSections(targetActiveSectionIndex);
   };
   const handleRangePositionChange = useEventCallback(newRangePosition => {
-    var _props$onRangePositio;
     setRangePosition(newRangePosition);
-    (_props$onRangePositio = props.onRangePositionChange) == null || _props$onRangePositio.call(props, newRangePosition);
+    props.onRangePositionChange?.(newRangePosition);
     syncRangePositionWithSingleInputField(newRangePosition);
   });
   return {

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -22,7 +22,6 @@ const PickerStaticLayout = styled(PickersLayout)(({
  * - StaticDateRangePicker
  */
 export const useStaticRangePicker = _ref => {
-  var _slots$layout;
   let {
       props,
       ref
@@ -46,7 +45,7 @@ export const useStaticRangePicker = _ref => {
     renderCurrentView
   } = usePicker(_extends({}, pickerParams, {
     props,
-    autoFocusView: autoFocus != null ? autoFocus : false,
+    autoFocusView: autoFocus ?? false,
     fieldRef: undefined,
     additionalViewProps: {
       rangePosition,
@@ -54,27 +53,24 @@ export const useStaticRangePicker = _ref => {
     },
     wrapperVariant: displayStaticWrapperAs
   }));
-  const Layout = (_slots$layout = slots == null ? void 0 : slots.layout) != null ? _slots$layout : PickerStaticLayout;
+  const Layout = slots?.layout ?? PickerStaticLayout;
   const slotPropsForLayout = _extends({}, slotProps, {
-    toolbar: _extends({}, slotProps == null ? void 0 : slotProps.toolbar, {
+    toolbar: _extends({}, slotProps?.toolbar, {
       rangePosition,
       onRangePositionChange
     })
   });
-  const renderPicker = () => {
-    var _slotProps$layout, _slotProps$layout2, _slotProps$layout3;
-    return /*#__PURE__*/_jsx(LocalizationProvider, {
-      localeText: localeText,
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps == null ? void 0 : slotProps.layout, {
-        slots: slots,
-        slotProps: slotPropsForLayout,
-        sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps == null || (_slotProps$layout = slotProps.layout) == null ? void 0 : _slotProps$layout.sx) ? slotProps.layout.sx : [slotProps == null || (_slotProps$layout2 = slotProps.layout) == null ? void 0 : _slotProps$layout2.sx])],
-        className: clsx(className, slotProps == null || (_slotProps$layout3 = slotProps.layout) == null ? void 0 : _slotProps$layout3.className),
-        ref: ref,
-        children: renderCurrentView()
-      }))
-    });
-  };
+  const renderPicker = () => /*#__PURE__*/_jsx(LocalizationProvider, {
+    localeText: localeText,
+    children: /*#__PURE__*/_jsx(Layout, _extends({}, layoutProps, slotProps?.layout, {
+      slots: slots,
+      slotProps: slotPropsForLayout,
+      sx: [...(Array.isArray(sx) ? sx : [sx]), ...(Array.isArray(slotProps?.layout?.sx) ? slotProps.layout.sx : [slotProps?.layout?.sx])],
+      className: clsx(className, slotProps?.layout?.className),
+      ref: ref,
+      children: renderCurrentView()
+    }))
+  });
   return {
     renderPicker
   };

package/internals/models/dateRange.d.ts

@@ -1,6 +1,6 @@
 import { BaseDateValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import type { DateRangeValidationError, RangeFieldSection, DateRange } from '../../models';
+import { DateRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
 /**
  * Props used to validate a day value in range pickers.
  */
@@ -8,7 +8,7 @@ export interface DayRangeValidationProps<TDate extends PickerValidDate> {
     /**
      * Disable specific date.
      *
-     * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+     * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
      *
      * @template TDate
      * @param {TDate} day The date to test.
@@ -17,5 +17,5 @@ export interface DayRangeValidationProps<TDate extends PickerValidDate> {
      */
     shouldDisableDate?: (day: TDate, position: 'start' | 'end') => boolean;
 }
-export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
+export interface UseDateRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, DayRangeValidationProps<TDate>, BaseDateValidationProps<TDate> {
 }

package/internals/models/dateTimeRange.d.ts

@@ -1,8 +1,8 @@
 import { BaseDateValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps, DateTimeValidationProps, DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
 import { DayRangeValidationProps } from './dateRange';
-import { DateTimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
-export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
+import { DateTimeRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
+export interface UseDateTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, DateTimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, DayRangeValidationProps<TDate>, TimeValidationProps<TDate>, BaseDateValidationProps<TDate>, DateTimeValidationProps<TDate> {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`

package/internals/models/timeRange.d.ts

@@ -1,7 +1,7 @@
 import { BaseTimeValidationProps, TimeValidationProps, MakeOptional, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { PickerValidDate } from '@mui/x-date-pickers/models';
-import { TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
-export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, TimeValidationProps<TDate>, BaseTimeValidationProps {
+import { TimeRangeValidationError, RangeFieldSection, DateRange, RangeFieldSeparatorProps } from '../../models';
+export interface UseTimeRangeFieldProps<TDate extends PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<Omit<UseFieldInternalProps<DateRange<TDate>, TDate, RangeFieldSection, TEnableAccessibleFieldDOMStructure, TimeRangeValidationError>, 'unstableFieldRef'>, 'format'>, RangeFieldSeparatorProps, TimeValidationProps<TDate>, BaseTimeValidationProps {
     /**
      * 12h/24h view for hour selection clock.
      * @default `utils.is12HourCycleInCurrentLocale()`

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcwOTg1MjQwMDAwMA==";
+  const releaseInfo = "MTcxMTA1ODQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/internals/utils/validation/validateDateRange.js

@@ -17,13 +17,13 @@ export const validateDateRange = ({
     adapter,
     value: start,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'start'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'start')
     })
   }), validateDate({
     adapter,
     value: end,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'end'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'end')
     })
   })];
   if (dateValidations[0] || dateValidations[1]) {

package/internals/utils/validation/validateDateTimeRange.js

@@ -17,13 +17,13 @@ export const validateDateTimeRange = ({
     adapter,
     value: start,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'start'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'start')
     })
   }), validateDateTime({
     adapter,
     value: end,
     props: _extends({}, otherProps, {
-      shouldDisableDate: day => !!(shouldDisableDate != null && shouldDisableDate(day, 'end'))
+      shouldDisableDate: day => !!shouldDisableDate?.(day, 'end')
     })
   })];
   if (dateTimeValidations[0] || dateTimeValidations[1]) {

package/internals/utils/valueManagers.d.ts

@@ -3,4 +3,6 @@ import { PickerValidDate } from '@mui/x-date-pickers/models';
 import type { DateRangeValidationError, DateTimeRangeValidationError, TimeRangeValidationError, RangeFieldSection, DateRange } from '../../models';
 export type RangePickerValueManager<TValue = [any, any], TDate extends PickerValidDate = any, TError extends DateRangeValidationError | TimeRangeValidationError | DateTimeRangeValidationError = any> = PickerValueManager<TValue, TDate, TError>;
 export declare const rangeValueManager: RangePickerValueManager;
-export declare const rangeFieldValueManager: FieldValueManager<DateRange<any>, any, RangeFieldSection>;
+export declare const getRangeFieldValueManager: <TDate extends PickerValidDate>({ dateSeparator, }: {
+    dateSeparator: string | undefined;
+}) => FieldValueManager<DateRange<TDate>, TDate, RangeFieldSection>;