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

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [SingleInputDateRangeField API](https://mui.com/x/api/single-input-date-range-field/)
  */
 const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateRangeField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputDateRangeField'
@@ -36,10 +35,10 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
@@ -83,6 +82,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -243,7 +247,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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/SingleInputDateRangeField/useSingleInputDateRangeField.js

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

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [SingleInputDateTimeRangeField API](https://mui.com/x/api/single-input-date-time-range-field/)
  */
 const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputDateTimeRangeField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputDateTimeRangeField'
@@ -36,10 +35,10 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
@@ -88,6 +87,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.propTypes
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -276,7 +280,7 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.js

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

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -23,7 +23,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [SingleInputTimeRangeField API](https://mui.com/x/api/single-input-time-range-field/)
  */
 const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInputTimeRangeField(inProps, inRef) {
-  var _slots$textField;
   const themeProps = useThemeProps({
     props: inProps,
     name: 'MuiSingleInputTimeRangeField'
@@ -36,10 +35,10 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const ownerState = themeProps;
-  const TextField = (_slots$textField = slots == null ? void 0 : slots.textField) != null ? _slots$textField : inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField;
+  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure ? PickersTextField : MuiTextField);
   const textFieldProps = useSlotProps({
     elementType: TextField,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.textField,
+    externalSlotProps: slotProps?.textField,
     externalForwardedProps: other,
     ownerState,
     additionalProps: {
@@ -88,6 +87,11 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.propTypes = {
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
   component: PropTypes.elementType,
+  /**
+   * String displayed between the start and the end dates.
+   * @default "–"
+   */
+  dateSeparator: PropTypes.string,
   /**
    * The default value. Use when the component is not controlled.
    */

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.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v7.0.0-beta.7
+ * @mui/x-date-pickers-pro v7.0.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

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 {