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

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

@@ -26,15 +26,14 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
   width: 56,
   padding: 0,
   overflow: 'hidden',
   '@media (prefers-reduced-motion: no-preference)': {
-    scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto'
+    scrollBehavior: 'auto'
   },
   '@media (pointer: fine)': {
     '&:hover': {
@@ -52,7 +51,17 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
     content: '""',
     // subtracting the height of one item, extra margin and borders to make sure the max height is correct
     height: 'calc(100% - 40px - 6px)'
-  }
+  },
+  variants: [{
+    props: {
+      alreadyRendered: true
+    },
+    style: {
+      '@media (prefers-reduced-motion: no-preference)': {
+        scrollBehavior: 'smooth'
+      }
+    }
+  }]
 }));
 const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
   name: 'MuiMultiSectionDigitalClockSection',
@@ -86,7 +95,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 +119,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 +146,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 +166,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.js

@@ -72,15 +72,19 @@ const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
   name: 'MuiPickersCalendarHeader',
   slot: 'SwitchViewButton',
   overridesResolver: (_, styles) => styles.switchViewButton
-})(({
-  ownerState
-}) => _extends({
-  marginRight: 'auto'
-}, ownerState.view === 'year' && {
-  [`.${pickersCalendarHeaderClasses.switchViewIcon}`]: {
-    transform: 'rotate(180deg)'
-  }
-}));
+})({
+  marginRight: 'auto',
+  variants: [{
+    props: {
+      view: 'year'
+    },
+    style: {
+      [`.${pickersCalendarHeaderClasses.switchViewIcon}`]: {
+        transform: 'rotate(180deg)'
+      }
+    }
+  }]
+});
 const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
   name: 'MuiPickersCalendarHeader',
   slot: 'SwitchViewIcon',
@@ -104,7 +108,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 +136,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 +147,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/PickersDay/PickersDay.js

@@ -30,8 +30,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersDayUtilityClass, classes);
 };
 const styleArg = ({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.caption, {
   width: DAY_SIZE,
   height: DAY_SIZE,
@@ -69,15 +68,33 @@ const styleArg = ({
   },
   [`&.${pickersDayClasses.disabled}&.${pickersDayClasses.selected}`]: {
     opacity: 0.6
-  }
-}, !ownerState.disableMargin && {
-  margin: `0 ${DAY_MARGIN}px`
-}, ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && {
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableHighlightToday && ownerState.today && {
-  [`&:not(.${pickersDayClasses.selected})`]: {
-    border: `1px solid ${(theme.vars || theme).palette.text.secondary}`
-  }
+  },
+  variants: [{
+    props: {
+      disableMargin: false
+    },
+    style: {
+      margin: `0 ${DAY_MARGIN}px`
+    }
+  }, {
+    props: {
+      outsideCurrentMonth: true,
+      showDaysOutsideCurrentMonth: true
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary
+    }
+  }, {
+    props: {
+      disableHighlightToday: false,
+      today: true
+    },
+    style: {
+      [`&:not(.${pickersDayClasses.selected})`]: {
+        border: `1px solid ${(theme.vars || theme).palette.text.secondary}`
+      }
+    }
+  }]
 });
 const overridesResolver = (props, styles) => {
   const {
@@ -95,11 +112,9 @@ const PickersDayFiller = styled('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, styleArg({
-  theme,
-  ownerState
+  theme
 }), {
   // visibility: 'hidden' does not work here as it hides the element from screen readers as well
   opacity: 0,

package/PickersLayout/PickersLayout.js

@@ -23,30 +23,44 @@ const PickersLayoutRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   display: 'grid',
   gridAutoColumns: 'max-content auto max-content',
   gridAutoRows: 'max-content auto max-content',
-  [`& .${pickersLayoutClasses.toolbar}`]: ownerState.isLandscape ? {
-    gridColumn: theme.direction === 'rtl' ? 3 : 1,
-    gridRow: '2 / 3'
-  } : {
-    gridColumn: '2 / 4',
-    gridRow: 1
-  },
-  [`.${pickersLayoutClasses.shortcuts}`]: ownerState.isLandscape ? {
-    gridColumn: '2 / 4',
-    gridRow: 1
-  } : {
-    gridColumn: theme.direction === 'rtl' ? 3 : 1,
-    gridRow: '2 / 3'
-  },
   [`& .${pickersLayoutClasses.actionBar}`]: {
     gridColumn: '1 / 4',
     gridRow: 3
-  }
+  },
+  variants: [{
+    props: {
+      isLandscape: true
+    },
+    style: {
+      [`& .${pickersLayoutClasses.toolbar}`]: {
+        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridRow: '2 / 3'
+      },
+      [`.${pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: '2 / 4',
+        gridRow: 1
+      }
+    }
+  }, {
+    props: {
+      isLandscape: false
+    },
+    style: {
+      [`& .${pickersLayoutClasses.toolbar}`]: {
+        gridColumn: '2 / 4',
+        gridRow: 1
+      },
+      [`& .${pickersLayoutClasses.shortcuts}`]: {
+        gridColumn: theme.direction === 'rtl' ? 3 : 1,
+        gridRow: '2 / 3'
+      }
+    }
+  }]
 }));
 PickersLayoutRoot.propTypes = {
   // ----------------------------- Warning --------------------------------

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,