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

package/DesktopTimePicker/DesktopTimePicker.js

@@ -25,7 +25,6 @@ import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
  * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
  */
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   const localeText = useLocaleText();
   const utils = useUtils();
 
@@ -43,10 +42,10 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     seconds: renderTimeView,
     meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
-  const ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : true;
+  const ampmInClock = defaultizedProps.ampmInClock ?? true;
   const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
-  const shouldHoursRendererContainMeridiemView = ((_viewRenderers$hours = viewRenderers.hours) == null ? void 0 : _viewRenderers$hours.name) === renderMultiSectionDigitalClockTimeView.name;
+  const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
   const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
 
   // Props with the default values specific to the desktop variant
@@ -63,19 +62,16 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
       openPickerIcon: ClockIcon
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: true,
         ampmInClock
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar),
+      }, defaultizedProps.slotProps?.toolbar),
       actionBar: _extends({
         actions: actionBarActions
-      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.actionBar)
+      }, defaultizedProps.slotProps?.actionBar)
     })
   });
   const {
@@ -84,7 +80,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openTimePickerDialogue) != null ? _props$localeText$ope : localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/DigitalClock/DigitalClock.js

@@ -90,7 +90,6 @@ const DigitalClockItem = styled(MenuItem, {
  * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
  */
 export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
-  var _slots$digitalClockIt;
   const utils = useUtils();
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
@@ -146,10 +145,10 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     alreadyRendered: !!containerRef.current
   }), [props]);
   const classes = useUtilityClasses(ownerState);
-  const ClockItem = (_slots$digitalClockIt = slots == null ? void 0 : slots.digitalClockItem) != null ? _slots$digitalClockIt : DigitalClockItem;
+  const ClockItem = slots?.digitalClockItem ?? DigitalClockItem;
   const clockItemProps = useSlotProps({
     elementType: ClockItem,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.digitalClockItem,
+    externalSlotProps: slotProps?.digitalClockItem,
     ownerState: {},
     className: classes.item
   });

package/LocalizationProvider/LocalizationProvider.js

@@ -22,7 +22,6 @@ if (process.env.NODE_ENV !== 'production') {
  * - [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/)
  */
 export const LocalizationProvider = function LocalizationProvider(inProps) {
-  var _React$useContext;
   const {
       localeText: inLocaleText
     } = inProps,
@@ -30,7 +29,7 @@ export const LocalizationProvider = function LocalizationProvider(inProps) {
   const {
     utils: parentUtils,
     localeText: parentLocaleText
-  } = (_React$useContext = React.useContext(MuiPickersAdapterContext)) != null ? _React$useContext : {
+  } = React.useContext(MuiPickersAdapterContext) ?? {
     utils: undefined,
     localeText: undefined
   };

package/MobileDatePicker/MobileDatePicker.js

@@ -23,7 +23,6 @@ import { resolveDateFormat } from '../internals/utils/date-utils';
  * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
  */
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  var _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   const localeText = useLocaleText();
   const utils = useUtils();
 
@@ -43,15 +42,12 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
       field: DateField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: false
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -60,7 +56,7 @@ const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDate
   });
   return renderPicker();
@@ -282,7 +278,7 @@ MobileDatePicker.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/MobileDateTimePicker/MobileDateTimePicker.js

@@ -24,7 +24,6 @@ import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   const localeText = useLocaleText();
   const utils = useUtils();
 
@@ -38,7 +37,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     minutes: renderTimeViewClock,
     seconds: renderTimeViewClock
   }, defaultizedProps.viewRenderers);
-  const ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : false;
+  const ampmInClock = defaultizedProps.ampmInClock ?? false;
 
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
@@ -49,19 +48,16 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
       field: DateTimeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: false,
         ampmInClock
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar),
+      }, defaultizedProps.slotProps?.toolbar),
       tabs: _extends({
         hidden: false
-      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.tabs)
+      }, defaultizedProps.slotProps?.tabs)
     })
   });
   const {
@@ -70,7 +66,7 @@ const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTi
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openDatePickerDialogue) != null ? _props$localeText$ope : localeText.openDatePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openDatePickerDialogue ?? localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
   return renderPicker();
@@ -330,7 +326,7 @@ MobileDateTimePicker.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/MobileTimePicker/MobileTimePicker.js

@@ -23,7 +23,6 @@ import { resolveTimeFormat } from '../internals/utils/time-utils';
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   const localeText = useLocaleText();
   const utils = useUtils();
 
@@ -34,7 +33,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     minutes: renderTimeViewClock,
     seconds: renderTimeViewClock
   }, defaultizedProps.viewRenderers);
-  const ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : false;
+  const ampmInClock = defaultizedProps.ampmInClock ?? false;
 
   // Props with the default values specific to the mobile variant
   const props = _extends({}, defaultizedProps, {
@@ -45,16 +44,13 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
       field: TimeField
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
-      field: ownerState => {
-        var _defaultizedProps$slo;
-        return _extends({}, resolveComponentProps((_defaultizedProps$slo = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo.field, ownerState), extractValidationProps(defaultizedProps), {
-          ref
-        });
-      },
+      field: ownerState => _extends({}, resolveComponentProps(defaultizedProps.slotProps?.field, ownerState), extractValidationProps(defaultizedProps), {
+        ref
+      }),
       toolbar: _extends({
         hidden: false,
         ampmInClock
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, defaultizedProps.slotProps?.toolbar)
     })
   });
   const {
@@ -63,7 +59,7 @@ const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    getOpenDialogAriaText: (_props$localeText$ope = (_props$localeText = props.localeText) == null ? void 0 : _props$localeText.openTimePickerDialogue) != null ? _props$localeText$ope : localeText.openTimePickerDialogue,
+    getOpenDialogAriaText: props.localeText?.openTimePickerDialogue ?? localeText.openTimePickerDialogue,
     validator: validateTime
   });
   return renderPicker();

package/MonthCalendar/MonthCalendar.js

@@ -124,7 +124,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     name: 'MonthCalendar',
     state: 'hasFocus',
     controlled: hasFocus,
-    default: autoFocus != null ? autoFocus : false
+    default: autoFocus ?? false
   });
   const changeHasFocus = useEventCallback(newHasFocus => {
     setInternalHasFocus(newHasFocus);
@@ -151,11 +151,11 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     if (readOnly) {
       return;
     }
-    const newDate = utils.setMonth(value != null ? value : referenceDate, month);
+    const newDate = utils.setMonth(value ?? referenceDate, month);
     handleValueChange(newDate);
   });
   const focusMonth = useEventCallback(month => {
-    if (!isMonthDisabled(utils.setMonth(value != null ? value : referenceDate, month))) {
+    if (!isMonthDisabled(utils.setMonth(value ?? referenceDate, month))) {
       setFocusedMonth(month);
       changeHasFocus(true);
       if (onMonthFocus) {
@@ -205,7 +205,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     role: "radiogroup",
     "aria-labelledby": gridLabelId
   }, other, {
-    children: getMonthsInYear(utils, value != null ? value : referenceDate).map(month => {
+    children: getMonthsInYear(utils, value ?? referenceDate).map(month => {
       const monthNumber = utils.getMonth(month);
       const monthText = utils.format(month, 'monthShort');
       const monthLabel = utils.format(month, 'month');

package/MonthCalendar/PickersMonth.js

@@ -101,8 +101,7 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
   const classes = useUtilityClasses(props);
   useEnhancedEffect(() => {
     if (autoFocus) {
-      var _ref$current;
-      (_ref$current = ref.current) == null || _ref$current.focus();
+      ref.current?.focus();
     }
   }, [autoFocus]);
   return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({

package/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -314,7 +314,7 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
       items: viewOptions.items,
       onChange: viewOptions.onChange,
       active: view === timeView,
-      autoFocus: autoFocus != null ? autoFocus : focusedView === timeView,
+      autoFocus: autoFocus ?? focusedView === timeView,
       disabled: disabled,
       readOnly: readOnly,
       slots: slots,

package/MultiSectionDigitalClock/MultiSectionDigitalClock.utils.js

@@ -11,7 +11,7 @@ export const getHourSectionOptions = ({
   const currentHours = value ? utils.getHours(value) : null;
   const result = [];
   const isSelected = (hour, overriddenCurrentHours) => {
-    const resolvedCurrentHours = overriddenCurrentHours != null ? overriddenCurrentHours : currentHours;
+    const resolvedCurrentHours = overriddenCurrentHours ?? currentHours;
     if (resolvedCurrentHours === null) {
       return false;
     }

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -86,7 +86,6 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
  * @ignore - internal component.
  */
 export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
-  var _slots$digitalClockSe;
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
   const previousActive = React.useRef(null);
@@ -111,7 +110,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     alreadyRendered: !!containerRef.current
   }), [props]);
   const classes = useUtilityClasses(ownerState);
-  const DigitalClockSectionItem = (_slots$digitalClockSe = slots == null ? void 0 : slots.digitalClockSectionItem) != null ? _slots$digitalClockSe : MultiSectionDigitalClockSectionItem;
+  const DigitalClockSectionItem = slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
   React.useEffect(() => {
     if (containerRef.current === null) {
       return;
@@ -138,8 +137,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     role: "listbox"
   }, other, {
     children: items.map((option, index) => {
-      var _option$isDisabled;
-      const isItemDisabled = (_option$isDisabled = option.isDisabled) == null ? void 0 : _option$isDisabled.call(option, option.value);
+      const isItemDisabled = option.isDisabled?.(option.value);
       const isDisabled = disabled || isItemDisabled;
       if (skipDisabled && isDisabled) {
         return null;
@@ -159,7 +157,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
         "aria-selected": isSelected,
         tabIndex: tabIndex,
         className: classes.item
-      }, slotProps == null ? void 0 : slotProps.digitalClockSectionItem, {
+      }, slotProps?.digitalClockSectionItem, {
         children: option.label
       }), option.label);
     })

package/PickersActionBar/PickersActionBar.js

@@ -30,7 +30,7 @@ function PickersActionBar(props) {
   if (actions == null || actions.length === 0) {
     return null;
   }
-  const buttons = actions == null ? void 0 : actions.map(actionType => {
+  const buttons = actions?.map(actionType => {
     switch (actionType) {
       case 'clear':
         return /*#__PURE__*/_jsx(Button, {

package/PickersCalendarHeader/PickersCalendarHeader.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PickersCalendarHeaderProps } from './PickersCalendarHeader.types';
 import { PickerValidDate } from '../models';
-type PickersCalendarHeaderComponent = (<TDate extends PickerValidDate>(props: PickersCalendarHeaderProps<TDate> & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element) & {
+type PickersCalendarHeaderComponent = (<TDate extends PickerValidDate>(props: PickersCalendarHeaderProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
 /**

package/PickersCalendarHeader/PickersCalendarHeader.js

@@ -104,7 +104,6 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
  * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
  */
 const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
-  var _slots$switchViewButt, _slots$switchViewIcon;
   const localeText = useLocaleText();
   const utils = useUtils();
   const props = useThemeProps({
@@ -133,10 +132,10 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = props;
   const classes = useUtilityClasses(props);
-  const SwitchViewButton = (_slots$switchViewButt = slots == null ? void 0 : slots.switchViewButton) != null ? _slots$switchViewButt : PickersCalendarHeaderSwitchViewButton;
+  const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
   const switchViewButtonProps = useSlotProps({
     elementType: SwitchViewButton,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.switchViewButton,
+    externalSlotProps: slotProps?.switchViewButton,
     additionalProps: {
       size: 'small',
       'aria-label': localeText.calendarViewSwitchingButtonAriaLabel(view)
@@ -144,11 +143,11 @@ const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCale
     ownerState,
     className: classes.switchViewButton
   });
-  const SwitchViewIcon = (_slots$switchViewIcon = slots == null ? void 0 : slots.switchViewIcon) != null ? _slots$switchViewIcon : PickersCalendarHeaderSwitchViewIcon;
+  const SwitchViewIcon = slots?.switchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   const _useSlotProps = useSlotProps({
       elementType: SwitchViewIcon,
-      externalSlotProps: slotProps == null ? void 0 : slotProps.switchViewIcon,
+      externalSlotProps: slotProps?.switchViewIcon,
       ownerState: undefined,
       className: classes.switchViewIcon
     }),

package/PickersLayout/usePickerLayout.js

@@ -26,7 +26,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = props => {
-  var _slots$actionBar, _slots$shortcuts;
   const {
     wrapperVariant,
     onAccept,
@@ -55,10 +54,10 @@ const usePickerLayout = props => {
 
   // Action bar
 
-  const ActionBar = (_slots$actionBar = slots == null ? void 0 : slots.actionBar) != null ? _slots$actionBar : PickersActionBar;
+  const ActionBar = slots?.actionBar ?? PickersActionBar;
   const actionBarProps = useSlotProps({
     elementType: ActionBar,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.actionBar,
+    externalSlotProps: slotProps?.actionBar,
     additionalProps: {
       onAccept,
       onClear,
@@ -75,10 +74,10 @@ const usePickerLayout = props => {
 
   // Toolbar
 
-  const Toolbar = slots == null ? void 0 : slots.toolbar;
+  const Toolbar = slots?.toolbar;
   const toolbarProps = useSlotProps({
     elementType: Toolbar,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.toolbar,
+    externalSlotProps: slotProps?.toolbar,
     additionalProps: {
       isLandscape,
       onChange,
@@ -102,19 +101,19 @@ const usePickerLayout = props => {
 
   // Tabs
 
-  const Tabs = slots == null ? void 0 : slots.tabs;
+  const Tabs = slots?.tabs;
   const tabs = view && Tabs ? /*#__PURE__*/_jsx(Tabs, _extends({
     view: view,
     onViewChange: onViewChange,
     className: classes.tabs
-  }, slotProps == null ? void 0 : slotProps.tabs)) : null;
+  }, slotProps?.tabs)) : null;
 
   // Shortcuts
 
-  const Shortcuts = (_slots$shortcuts = slots == null ? void 0 : slots.shortcuts) != null ? _slots$shortcuts : PickersShortcuts;
+  const Shortcuts = slots?.shortcuts ?? PickersShortcuts;
   const shortcutsProps = useSlotProps({
     elementType: Shortcuts,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.shortcuts,
+    externalSlotProps: slotProps?.shortcuts,
     additionalProps: {
       isValid,
       isLandscape,

package/PickersSectionList/PickersSectionList.js

@@ -58,25 +58,24 @@ const useUtilityClasses = ownerState => {
  * - [PickersSectionList API](https://mui.com/x/api/date-pickers/pickers-section-list/)
  */
 function PickersSection(props) {
-  var _slots$section, _slots$sectionContent, _slots$sectionSeparat;
   const {
     slots,
     slotProps,
     element,
     classes
   } = props;
-  const Section = (_slots$section = slots == null ? void 0 : slots.section) != null ? _slots$section : PickersSectionListSection;
+  const Section = slots?.section ?? PickersSectionListSection;
   const sectionProps = useSlotProps({
     elementType: Section,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.section,
+    externalSlotProps: slotProps?.section,
     externalForwardedProps: element.container,
     className: classes.section,
     ownerState: {}
   });
-  const SectionContent = (_slots$sectionContent = slots == null ? void 0 : slots.sectionContent) != null ? _slots$sectionContent : PickersSectionListSectionContent;
+  const SectionContent = slots?.sectionContent ?? PickersSectionListSectionContent;
   const sectionContentProps = useSlotProps({
     elementType: SectionContent,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionContent,
+    externalSlotProps: slotProps?.sectionContent,
     externalForwardedProps: element.content,
     additionalProps: {
       suppressContentEditableWarning: true
@@ -84,10 +83,10 @@ function PickersSection(props) {
     className: classes.sectionContent,
     ownerState: {}
   });
-  const SectionSeparator = (_slots$sectionSeparat = slots == null ? void 0 : slots.sectionSeparator) != null ? _slots$sectionSeparat : PickersSectionListSectionSeparator;
+  const SectionSeparator = slots?.sectionSeparator ?? PickersSectionListSectionSeparator;
   const sectionSeparatorBeforeProps = useSlotProps({
     elementType: SectionSeparator,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
+    externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.before,
     ownerState: {
       position: 'before'
@@ -95,7 +94,7 @@ function PickersSection(props) {
   });
   const sectionSeparatorAfterProps = useSlotProps({
     elementType: SectionSeparator,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.sectionSeparator,
+    externalSlotProps: slotProps?.sectionSeparator,
     externalForwardedProps: element.after,
     ownerState: {
       position: 'after'
@@ -106,7 +105,6 @@ function PickersSection(props) {
   }));
 }
 const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSectionList(inProps, ref) {
-  var _slots$root;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPickersSectionList'
@@ -156,10 +154,10 @@ const PickersSectionList = /*#__PURE__*/React.forwardRef(function PickersSection
       return Number(sectionContainer.dataset.sectionindex);
     }
   }));
-  const Root = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PickersSectionListRoot;
+  const Root = slots?.root ?? PickersSectionListRoot;
   const rootProps = useSlotProps({
     elementType: Root,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.root,
+    externalSlotProps: slotProps?.root,
     externalForwardedProps: other,
     additionalProps: {
       ref: handleRootRef,

package/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -19,7 +19,6 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
   theme,
   ownerState
 }) => {
-  var _palette;
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
@@ -48,7 +47,7 @@ const PickersFilledInputRoot = styled(PickersInputBaseRoot, {
     }
   }, !ownerState.disableUnderline && {
     '&::after': {
-      borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -149,7 +148,7 @@ const PickersFilledInput = /*#__PURE__*/React.forwardRef(function PickersFilledI
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
   const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    color: (muiFormControl == null ? void 0 : muiFormControl.color) || 'primary'
+    color: muiFormControl?.color || 'primary'
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({

package/PickersTextField/PickersInput/PickersInput.js

@@ -108,7 +108,7 @@ const PickersInput = /*#__PURE__*/React.forwardRef(function PickersInput(inProps
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
   const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    color: (muiFormControl == null ? void 0 : muiFormControl.color) || 'primary'
+    color: muiFormControl?.color || 'primary'
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -167,20 +167,19 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
   const handleRootRef = useForkRef(ref, rootRef);
-  const handleInputRef = useForkRef(inputProps == null ? void 0 : inputProps.ref, inputRef);
+  const handleInputRef = useForkRef(inputProps?.ref, inputRef);
   const muiFormControl = useFormControl();
   if (!muiFormControl) {
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    var _muiFormControl$onFoc;
     // Fix a bug with IE11 where the focus/blur events are triggered
     // while the component is disabled.
     if (muiFormControl.disabled) {
       event.stopPropagation();
       return;
     }
-    (_muiFormControl$onFoc = muiFormControl.onFocus) == null || _muiFormControl$onFoc.call(muiFormControl, event);
+    muiFormControl.onFocus?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -199,8 +198,8 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
   }, [muiFormControl, areAllSectionsEmpty]);
   const ownerState = _extends({}, props, muiFormControl);
   const classes = useUtilityClasses(ownerState);
-  const InputRoot = (slots == null ? void 0 : slots.root) || PickersInputBaseRoot;
-  const InputSectionsContainer = (slots == null ? void 0 : slots.input) || PickersInputBaseSectionsContainer;
+  const InputRoot = slots?.root || PickersInputBaseRoot;
+  const InputSectionsContainer = slots?.input || PickersInputBaseSectionsContainer;
   return /*#__PURE__*/_jsxs(InputRoot, _extends({}, other, {
     className: classes.root,
     ownerState: ownerState,

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -92,7 +92,7 @@ const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutli
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
   const ownerState = _extends({}, props, ownerStateProp, muiFormControl, {
-    color: (muiFormControl == null ? void 0 : muiFormControl.color) || 'primary'
+    color: muiFormControl?.color || 'primary'
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(PickersInputBase, _extends({
@@ -104,7 +104,7 @@ const PickersOutlinedInput = /*#__PURE__*/React.forwardRef(function PickersOutli
       shrink: Boolean(notched || state.adornedStart || state.focused || state.filled),
       notched: Boolean(notched || state.adornedStart || state.focused || state.filled),
       className: classes.notchedOutline,
-      label: label != null && label !== '' && muiFormControl != null && muiFormControl.required ? /*#__PURE__*/_jsxs(React.Fragment, {
+      label: label != null && label !== '' && muiFormControl?.required ? /*#__PURE__*/_jsxs(React.Fragment, {
         children: [label, "\u2009", '*']
       }) : label,
       ownerState: ownerState

package/README.md

@@ -34,7 +34,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.15.0",
+  "@mui/material": "^5.15.14",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },