@mui/x-date-pickers-pro 9.0.0-beta.0 → 9.0.0

package/DateRangePickerDay/DateRangePickerDay.mjs

@@ -2,210 +2,346 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "classes", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
+const _excluded = ["autoFocus", "className", "classes", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableHighlightToday", "showDaysOutsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "isVisuallySelected", "draggable", "isDayFillerCell"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useLicenseVerifier } from '@mui/x-license/internals';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
+import ButtonBase from '@mui/material/ButtonBase';
+import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { usePickerDayOwnerState } from '@mui/x-date-pickers/internals';
-import { PickersDay } from '@mui/x-date-pickers/PickersDay';
 import { usePickerAdapter } from '@mui/x-date-pickers/hooks';
-import { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.mjs";
+import { dateRangePickerDayClasses, getDateRangePickerDayUtilityClass } from "./dateRangePickerDayClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = (classes, ownerState) => {
+const useUtilityClasses = (ownerState, classes) => {
   const {
-    // Properties shared with PickersDay
     isDaySelected,
+    disableHighlightToday,
+    isDayCurrent,
+    isDayDisabled,
     isDayOutsideMonth,
-    // Range-specific properties (present in the Base UI implementation)
-    isDaySelectionStart,
-    isDaySelectionEnd,
-    isDayInsideSelection,
+    isDayFillerCell,
     isDayPreviewStart,
     isDayPreviewEnd,
+    isDayInsidePreview,
     isDayPreviewed,
-    // Range-specific properties (specific to the MUI implementation)
+    isDaySelectionStart,
+    isDaySelectionEnd,
+    isDayInsideSelection,
+    isDayStartOfWeek,
+    isDayEndOfWeek,
     isDayStartOfMonth,
     isDayEndOfMonth,
     isDayFirstVisibleCell,
     isDayLastVisibleCell,
-    isDayFillerCell
+    isDayDraggable
   } = ownerState;
   const slots = {
-    root: ['root', isDaySelected && 'rangeIntervalDayHighlight', isDaySelectionStart && 'rangeIntervalDayHighlightStart', isDaySelectionEnd && 'rangeIntervalDayHighlightEnd', isDayOutsideMonth && 'outsideCurrentMonth', isDayStartOfMonth && 'startOfMonth', isDayEndOfMonth && 'endOfMonth', isDayFirstVisibleCell && 'firstVisibleCell', isDayLastVisibleCell && 'lastVisibleCell', isDayFillerCell && 'hiddenDayFiller'],
-    rangeIntervalPreview: ['rangeIntervalPreview', isDayPreviewed && 'rangeIntervalDayPreview', (isDayPreviewStart || isDayStartOfMonth) && 'rangeIntervalDayPreviewStart', (isDayPreviewEnd || isDayEndOfMonth) && 'rangeIntervalDayPreviewEnd'],
-    day: ['day', !isDaySelected && 'notSelectedDate', !isDaySelected && 'dayOutsideRangeInterval', !isDayInsideSelection && 'dayInsideRangeInterval']
+    root: ['root', isDayDisabled && 'disabled', !disableHighlightToday && isDayCurrent && !isDaySelected && !isDayFillerCell && 'today', isDayOutsideMonth && 'dayOutsideMonth', isDayFillerCell && 'fillerCell', isDaySelected && 'selected', isDayPreviewStart && 'previewStart', isDayPreviewEnd && 'previewEnd', isDayInsidePreview && 'insidePreviewing', isDaySelectionStart && 'selectionStart', isDaySelectionEnd && 'selectionEnd', isDayInsideSelection && 'insideSelection', isDayEndOfWeek && 'endOfWeek', isDayStartOfWeek && 'startOfWeek', isDayPreviewed && 'previewed', isDayStartOfMonth && 'startOfMonth', isDayEndOfMonth && 'endOfMonth', isDayFirstVisibleCell && 'firstVisibleCell', isDayLastVisibleCell && 'lastVisibleCell', isDayDraggable && 'draggable']
   };
   return composeClasses(slots, getDateRangePickerDayUtilityClass, classes);
 };
-const endBorderStyle = {
-  borderTopRightRadius: '50%',
-  borderBottomRightRadius: '50%'
-};
-const startBorderStyle = {
-  borderTopLeftRadius: '50%',
-  borderBottomLeftRadius: '50%'
-};
-const elementOverrides = {
-  root: ['rangeIntervalDayHighlight', 'rangeIntervalDayHighlightStart', 'rangeIntervalDayHighlightEnd', 'firstVisibleCell', 'lastVisibleCell', 'startOfMonth', 'endOfMonth', 'outsideCurrentMonth', 'hiddenDayFiller'],
-  rangeIntervalPreview: ['rangeIntervalDayPreview', 'rangeIntervalDayPreviewStart', 'rangeIntervalDayPreviewEnd'],
-  day: ['notSelectedDate', 'dayOutsideRangeInterval', 'dayInsideRangeInterval']
-};
-const DateRangePickerDayRoot = styled('div', {
+const highlightStyles = theme => ({
+  content: '""' /* Creates an empty element */,
+  height: '100%',
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity),
+  boxSizing: 'border-box',
+  left: 'calc(var(--PickerDay-horizontalMargin) * (-1))',
+  right: 'calc(var(--PickerDay-horizontalMargin) * (-1))'
+});
+const previewStyles = theme => ({
+  content: '""' /* Creates an empty element */,
+  height: '100%',
+  border: `1.2px dashed ${(theme.vars || theme).palette.divider}`,
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent',
+  boxSizing: 'border-box',
+  left: 'calc(-1 * var(--PickerDay-horizontalMargin))',
+  right: 'calc(-1 * var(--PickerDay-horizontalMargin))'
+});
+const selectedDayStyles = theme => ({
+  color: (theme.vars || theme).palette.primary.contrastText,
+  backgroundColor: (theme.vars || theme).palette.primary.main,
+  fontWeight: theme.typography.fontWeightMedium,
+  '&:focus, &:hover': {
+    willChange: 'background-color',
+    backgroundColor: (theme.vars || theme).palette.primary.dark
+  },
+  [`&.${dateRangePickerDayClasses.disabled}`]: {
+    opacity: 0.6
+  }
+});
+const insideSelectionStyle = () => ({
+  [`&.${dateRangePickerDayClasses.disabled}`]: {
+    opacity: 0.6
+  }
+});
+const DateRangePickerDayRoot = styled(ButtonBase, {
   name: 'MuiDateRangePickerDay',
   slot: 'Root',
-  overridesResolver: (_, styles) => {
-    const overrides = [styles.root];
-    elementOverrides.root.forEach(key => {
-      overrides.push({
-        [`&.${dateRangePickerDayClasses[key]}`]: styles[key]
-      });
-    });
-    return overrides;
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles.today, ownerState.isDayOutsideMonth && styles.dayOutsideMonth, ownerState.isDayFillerCell && styles.fillerCell, ownerState.isDaySelected && !ownerState.isDayInsideSelection && styles.selected, ownerState.isDayPreviewStart && styles.previewStart, ownerState.isDayPreviewEnd && styles.previewEnd, ownerState.isDayInsidePreview && styles.insidePreviewing, ownerState.isDayPreviewed && styles.previewed, ownerState.isDaySelectionStart && styles.selectionStart, ownerState.isDaySelectionEnd && styles.selectionEnd, ownerState.isDayInsideSelection && styles.insideSelection, ownerState.isDayDraggable && styles.draggable, ownerState.isDayStartOfWeek && styles.startOfWeek, ownerState.isDayEndOfWeek && styles.endOfWeek, ownerState.isDayStartOfMonth && styles.startOfMonth, ownerState.isDayEndOfMonth && styles.endOfMonth, ownerState.isDayFirstVisibleCell && styles.firstVisibleCell, ownerState.isDayLastVisibleCell && styles.lastVisibleCell];
   }
 })(({
   theme
-}) => ({
+}) => _extends({
+  '--PickerDay-horizontalMargin': '2px',
+  '--PickerDay-size': '36px'
+}, theme.typography.caption, {
+  lineHeight: 1,
+  display: 'flex',
+  width: 'var(--PickerDay-size)',
+  height: 'var(--PickerDay-size)',
+  borderRadius: 'calc(var(--PickerDay-size) / 2)',
+  padding: 0,
+  position: 'relative',
+  marginLeft: 'var(--PickerDay-horizontalMargin)',
+  marginRight: 'var(--PickerDay-horizontalMargin)',
+  // explicitly setting to `transparent` to avoid potentially getting impacted by change from the overridden component
+  backgroundColor: 'transparent',
+  transition: theme.transitions.create('background-color', {
+    duration: theme.transitions.duration.short
+  }),
+  color: (theme.vars || theme).palette.text.primary,
+  '@media (pointer: fine)': {
+    '&:hover': {
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.hoverOpacity)
+    }
+  },
+  '&:focus': {
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity)
+  },
+  zIndex: 1,
+  isolation: 'isolate',
+  '&::before, &::after': {
+    zIndex: -1,
+    position: 'absolute',
+    pointerEvents: 'none',
+    mixBlendMode: 'multiply'
+  },
   variants: [{
     props: {
-      isDayFillerCell: false
+      isDayDisabled: true
     },
     style: {
-      [`&:first-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, startBorderStyle, {
-        borderLeftColor: (theme.vars || theme).palette.divider
-      }),
-      [`&:last-of-type .${dateRangePickerDayClasses.rangeIntervalDayPreview}`]: _extends({}, endBorderStyle, {
-        borderRightColor: (theme.vars || theme).palette.divider
+      color: (theme.vars || theme).palette.text.disabled
+    }
+  }, {
+    props: {
+      isDayFillerCell: true
+    },
+    style: {
+      // visibility: 'hidden' does not work here as it hides the element from screen readers
+      // and results in unexpected relationships between week day and day columns.
+      opacity: 0,
+      pointerEvents: 'none'
+    }
+  }, {
+    props: {
+      isDayOutsideMonth: true
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary
+    }
+  }, {
+    props: {
+      isDayCurrent: true,
+      isDaySelected: false
+    },
+    style: {
+      outline: `1px solid ${(theme.vars || theme).palette.text.secondary}`,
+      outlineOffset: -1
+    }
+  }, {
+    props: {
+      isDayDraggable: true
+    },
+    style: {
+      cursor: 'grab',
+      touchAction: 'none'
+    }
+  }, {
+    props: {
+      isDayPreviewStart: true
+    },
+    style: {
+      '::after': _extends({}, previewStyles(theme), {
+        borderTopLeftRadius: 'inherit',
+        borderBottomLeftRadius: 'inherit',
+        borderLeftColor: (theme.vars || theme).palette.divider,
+        left: 0
+      })
+    }
+  }, {
+    props: {
+      isDayPreviewEnd: true
+    },
+    style: {
+      '::after': _extends({}, previewStyles(theme), {
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+        borderRightColor: (theme.vars || theme).palette.divider,
+        right: 0
       })
     }
   }, {
     props: {
-      isDayFillerCell: false,
-      isDaySelected: true
+      isDayInsidePreview: true
     },
     style: {
-      borderRadius: 0,
-      color: (theme.vars || theme).palette.primary.contrastText,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity),
-      '&:first-of-type': startBorderStyle,
-      '&:last-of-type': endBorderStyle
+      '::after': _extends({}, previewStyles(theme))
     }
   }, {
-    props: ({
-      ownerState: {
-        isDayFillerCell,
-        isDaySelectionStart,
-        isDayFirstVisibleCell
+    props: {
+      isDaySelectionStart: true
+    },
+    style: {
+      '::before': _extends({}, highlightStyles(theme), {
+        borderTopLeftRadius: 'inherit',
+        borderBottomLeftRadius: 'inherit',
+        left: 0
+      })
+    }
+  }, {
+    props: {
+      isDaySelectionEnd: true
+    },
+    style: {
+      '::before': _extends({}, highlightStyles(theme), {
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+        right: 0
+      }),
+      '::after': {
+        borderLeftColor: 'transparent'
       }
-    }) => !isDayFillerCell && (isDaySelectionStart || isDayFirstVisibleCell),
-    style: _extends({}, startBorderStyle, {
-      paddingLeft: 0
-    })
+    }
   }, {
-    props: ({
-      ownerState: {
-        isDayFillerCell,
-        isDaySelectionEnd,
-        isDayLastVisibleCell
+    props: {
+      isDayInsideSelection: true
+    },
+    color: 'initial',
+    background: 'initial',
+    style: _extends({
+      '::before': _extends({}, highlightStyles(theme))
+    }, insideSelectionStyle())
+  }, {
+    props: {
+      isDaySelected: true,
+      isDayInsideSelection: false
+    },
+    style: _extends({}, selectedDayStyles(theme))
+  }, {
+    props: {
+      isDaySelectionStart: true,
+      isDaySelectionEnd: true
+    },
+    style: {
+      '::before': {
+        left: 0,
+        right: 0
       }
-    }) => !isDayFillerCell && (isDaySelectionEnd || isDayLastVisibleCell),
-    style: _extends({}, endBorderStyle, {
-      paddingRight: 0
-    })
-  }]
-}));
-const DateRangePickerDayRangeIntervalPreview = styled('div', {
-  name: 'MuiDateRangePickerDay',
-  slot: 'RangeIntervalPreview',
-  overridesResolver: (_, styles) => {
-    const overrides = [styles.rangeIntervalPreview];
-    elementOverrides.rangeIntervalPreview.forEach(key => {
-      overrides.push({
-        [`&.${dateRangePickerDayClasses[key]}`]: styles[key]
-      });
-    });
-    return overrides;
-  }
-})(({
-  theme
-}) => ({
-  // replace default day component margin with transparent border to avoid jumping on preview
-  border: '2px solid transparent',
-  variants: [{
+    }
+  }, {
     props: {
-      isDayPreviewed: true,
-      isDayFillerCell: false
+      isDaySelectionStart: true,
+      isDaySelectionEnd: true,
+      isDayPreviewEnd: false,
+      isDayPreviewStart: false
     },
     style: {
-      borderRadius: 0,
-      border: `2px dashed ${(theme.vars || theme).palette.divider}`,
-      borderLeftColor: 'transparent',
-      borderRightColor: 'transparent'
+      '::after': {
+        left: 0,
+        right: 0
+      }
     }
   }, {
-    props: ({
-      ownerState: {
-        isDayPreviewed,
-        isDayFillerCell,
-        isDayPreviewStart,
-        isDayFirstVisibleCell
+    props: {
+      isDayPreviewEnd: true,
+      isDayPreviewStart: true
+    },
+    style: {
+      '::after': {
+        left: 0,
+        right: 0
       }
-    }) => isDayPreviewed && !isDayFillerCell && (isDayPreviewStart || isDayFirstVisibleCell),
-    style: _extends({
-      borderLeftColor: (theme.vars || theme).palette.divider
-    }, startBorderStyle)
+    }
   }, {
-    props: ({
-      ownerState: {
-        isDayPreviewed,
-        isDayFillerCell,
-        isDayPreviewEnd,
-        isDayLastVisibleCell
+    props: {
+      isDayEndOfWeek: true
+    },
+    style: {
+      '::after': {
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+        borderRightColor: (theme.vars || theme).palette.divider,
+        right: 0
+      },
+      '::before': {
+        borderTopRightRadius: 'inherit',
+        borderBottomRightRadius: 'inherit',
+        right: 0
       }
-    }) => isDayPreviewed && !isDayFillerCell && (isDayPreviewEnd || isDayLastVisibleCell),
-    style: _extends({
-      borderRightColor: (theme.vars || theme).palette.divider
-    }, endBorderStyle)
-  }]
-}));
-const DateRangePickerDayDay = styled(PickersDay, {
-  name: 'MuiDateRangePickerDay',
-  slot: 'Day',
-  overridesResolver: (_, styles) => {
-    const overrides = [styles.day];
-    elementOverrides.day.forEach(key => {
-      overrides.push({
-        [`&.${dateRangePickerDayClasses[key]}`]: styles[key]
-      });
-    });
-    return overrides;
-  }
-})({
-  // Required to overlap preview border
-  transform: 'scale(1.1)',
-  '& > *': {
-    transform: 'scale(0.9)'
-  },
-  variants: [{
+    }
+  }, {
     props: {
-      draggable: true
+      isDayStartOfWeek: true
     },
     style: {
-      cursor: 'grab',
-      touchAction: 'none'
+      '::after': {
+        borderTopLeftRadius: 'inherit',
+        borderBottomLeftRadius: 'inherit',
+        borderLeftColor: (theme.vars || theme).palette.divider,
+        left: 0
+      },
+      '::before': {
+        borderTopLeftRadius: 'inherit',
+        borderBottomLeftRadius: 'inherit',
+        left: 0
+      }
     }
   }]
-});
-const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, ref) {
+}));
+const noop = () => {};
+const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePickerDay(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDateRangePickerDay'
   });
+  useLicenseVerifier({
+    releaseDate: "MTc3NTYwNjQwMDAwMA==",
+    version: "9.0.0",
+    name: 'x-date-pickers-pro'
+  });
+  const adapter = usePickerAdapter();
   const {
+      autoFocus = false,
       className,
       classes: classesProp,
+      isAnimating,
+      onClick,
+      onDaySelect,
+      onFocus = noop,
+      onBlur = noop,
+      onKeyDown = noop,
+      onMouseDown = noop,
+      onMouseEnter = noop,
+      children,
+      isFirstVisibleCell = false,
+      isLastVisibleCell = false,
+      day,
+      selected,
+      disabled,
+      today,
+      outsideCurrentMonth,
+      disableHighlightToday,
+      showDaysOutsideCurrentMonth,
       isEndOfHighlighting,
       isEndOfPreviewing,
       isHighlighting,
@@ -213,44 +349,25 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       isStartOfHighlighting,
       isStartOfPreviewing,
       isVisuallySelected,
-      sx,
       draggable,
-      isFirstVisibleCell,
-      isLastVisibleCell,
-      day,
-      selected,
-      disabled,
-      today,
-      outsideCurrentMonth,
-      disableMargin,
-      disableHighlightToday,
-      showDaysOutsideCurrentMonth
+      isDayFillerCell: isDayFillerCellProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  useLicenseVerifier({
-    releaseDate: "MTc3NDU2OTYwMDAwMA==",
-    version: "9.0.0-beta.0",
-    name: 'x-date-pickers-pro'
-  });
-  const adapter = usePickerAdapter();
-  const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
-  const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;
-  const pickersDayOwnerState = usePickerDayOwnerState({
+  const pickerDayOwnerState = usePickerDayOwnerState({
     day,
     selected,
     disabled,
     today,
     outsideCurrentMonth,
-    disableMargin,
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   });
-  const ownerState = _extends({}, pickersDayOwnerState, {
+  const ownerState = _extends({}, pickerDayOwnerState, {
     // Properties that the Base UI implementation will have
     isDaySelectionStart: isStartOfHighlighting,
     isDaySelectionEnd: isEndOfHighlighting,
     isDayInsideSelection: isHighlighting && !isStartOfHighlighting && !isEndOfHighlighting,
-    isDaySelected: isHighlighting,
+    isDaySelected: isVisuallySelected ?? (isHighlighting || Boolean(selected)),
     isDayPreviewed: isPreviewing,
     isDayPreviewStart: isStartOfPreviewing,
     isDayPreviewEnd: isEndOfPreviewing,
@@ -260,34 +377,70 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
     isDayEndOfMonth: adapter.isSameDay(day, adapter.endOfMonth(day)),
     isDayFirstVisibleCell: isFirstVisibleCell,
     isDayLastVisibleCell: isLastVisibleCell,
-    isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth
+    isDayFillerCell: isDayFillerCellProp ?? (outsideCurrentMonth && !showDaysOutsideCurrentMonth),
+    isDayDraggable: Boolean(draggable)
   });
-  const classes = useUtilityClasses(classesProp, ownerState);
-  return /*#__PURE__*/_jsx(DateRangePickerDayRoot, {
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    sx: sx,
-    children: /*#__PURE__*/_jsx(DateRangePickerDayRangeIntervalPreview, {
-      className: classes.rangeIntervalPreview,
+  const classes = useUtilityClasses(ownerState, classesProp);
+  const ref = React.useRef(null);
+  const handleRef = useForkRef(ref, forwardedRef);
+
+  // Since this is rendered when a Popper is opened we can't use passive effects.
+  // Focusing in passive effects in Popper causes scroll jump.
+  useEnhancedEffect(() => {
+    if (autoFocus && !disabled && !isAnimating && !outsideCurrentMonth) {
+      // ref.current being null would be a bug in MUI
+      ref.current.focus();
+    }
+  }, [autoFocus, disabled, isAnimating, outsideCurrentMonth]);
+
+  // For a day outside the current month, move the focus from mouseDown to mouseUp
+  // Goal: have the onClick ends before sliding to the new month
+  const handleMouseDown = event => {
+    onMouseDown(event);
+    if (outsideCurrentMonth) {
+      event.preventDefault();
+    }
+  };
+  const handleClick = event => {
+    event.defaultMuiPrevented = true;
+    if (!disabled) {
+      onDaySelect(day);
+    }
+    if (outsideCurrentMonth) {
+      event.currentTarget.focus();
+    }
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  if (ownerState.isDayFillerCell) {
+    return /*#__PURE__*/_jsx(DateRangePickerDayRoot, {
+      ref: handleRef,
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(DateRangePickerDayDay, _extends({}, other, {
-        ref: ref,
-        day: day,
-        selected: isVisuallySelected,
-        disabled: disabled,
-        today: today,
-        outsideCurrentMonth: outsideCurrentMonth,
-        disableMargin: true,
-        disableHighlightToday: disableHighlightToday,
-        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
-        className: classes.day,
-        ownerState: ownerState,
-        draggable: draggable,
-        isFirstVisibleCell: isFirstVisibleCell,
-        isLastVisibleCell: isLastVisibleCell
-      }))
-    })
-  });
+      className: clsx(classes.root, className),
+      as: "div"
+    });
+  }
+  return /*#__PURE__*/_jsx(DateRangePickerDayRoot, _extends({
+    ref: handleRef,
+    centerRipple: true
+    // compat with DateRangePickerDay for tests
+    ,
+
+    disabled: disabled,
+    tabIndex: selected ? 0 : -1,
+    onKeyDown: event => onKeyDown(event, day),
+    onFocus: event => onFocus(event, day),
+    onBlur: event => onBlur(event, day),
+    onMouseEnter: event => onMouseEnter(event, day),
+    onClick: handleClick,
+    onMouseDown: handleMouseDown,
+    draggable: draggable
+  }, other, {
+    ownerState: ownerState,
+    className: clsx(classes.root, className),
+    children: children ?? adapter.format(day, 'dayOfMonth')
+  }));
 });
 if (process.env.NODE_ENV !== "production") DateRangePickerDayRaw.displayName = "DateRangePickerDayRaw";
 process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
@@ -321,20 +474,15 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   day: PropTypes.object.isRequired,
   /**
-   * If `true`, renders as disabled.
+   * If `true`, the day is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
   /**
-   * If `true`, today's date is rendering without highlighting with circle.
+   * If `true`, today's day is not highlighted.
    * @default false
    */
   disableHighlightToday: PropTypes.bool,
-  /**
-   * If `true`, days are rendering without margin. Useful for displaying linked range of days.
-   * @default false
-   */
-  disableMargin: PropTypes.bool,
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -367,56 +515,114 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    * if needed.
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * If `true`, the day is being animated.
+   * @default false
+   */
   isAnimating: PropTypes.bool,
+  /**
+   * If `true`, the day is a filler day (its content is hidden).
+   * @default false
+   */
+  isDayFillerCell: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
    */
-  isEndOfHighlighting: PropTypes.bool.isRequired,
+  isEndOfHighlighting: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a previewing date range.
    */
-  isEndOfPreviewing: PropTypes.bool.isRequired,
+  isEndOfPreviewing: PropTypes.bool,
   /**
-   * If `true`, day is the first visible cell of the month.
-   * Either the first day of the month or the first day of the week depending on `showDaysOutsideCurrentMonth`.
+   * If `true`, the day is the first visible cell of the month.
+   * @default false
    */
-  isFirstVisibleCell: PropTypes.bool.isRequired,
+  isFirstVisibleCell: PropTypes.bool,
   /**
    * Set to `true` if the `day` is in a highlighted date range.
    */
-  isHighlighting: PropTypes.bool.isRequired,
+  isHighlighting: PropTypes.bool,
   /**
-   * If `true`, day is the last visible cell of the month.
-   * Either the last day of the month or the last day of the week depending on `showDaysOutsideCurrentMonth`.
+   * If `true`, the day is the last visible cell of the month.
+   * @default false
    */
-  isLastVisibleCell: PropTypes.bool.isRequired,
+  isLastVisibleCell: PropTypes.bool,
   /**
    * Set to `true` if the `day` is in a preview date range.
    */
-  isPreviewing: PropTypes.bool.isRequired,
+  isPreviewing: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the start of a highlighted date range.
    */
-  isStartOfHighlighting: PropTypes.bool.isRequired,
+  isStartOfHighlighting: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the start of a previewing date range.
    */
-  isStartOfPreviewing: PropTypes.bool.isRequired,
+  isStartOfPreviewing: PropTypes.bool,
   /**
    * Indicates if the day should be visually selected.
    */
   isVisuallySelected: PropTypes.bool,
+  /**
+   * Whether the custom component is expected to render a native `<button>` element
+   * when passing a React component to the `component` or `slots` prop.
+   */
+  nativeButton: PropTypes.bool,
+  /**
+   * Callback fired when the component is blurred.
+   * @param {React.FocusEvent<HTMLButtonElement>} event The event object.
+   * @param {PickerValidDate} day The day.
+   * @default () => {}
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Callback fired when the component is clicked.
+   * @param {MuiEvent<React.MouseEvent<HTMLButtonElement>>} event The event object.
+   * @default () => {}
+   */
+  onClick: PropTypes.func,
+  /**
+   * Callback fired when the day is selected.
+   * @param {PickerValidDate} day The day to select.
+   */
   onDaySelect: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the component is focused.
+   * @param {React.FocusEvent<HTMLButtonElement>} event The event object.
+   * @param {PickerValidDate} day The day.
+   * @default () => {}
+   */
+  onFocus: PropTypes.func,
   /**
    * Callback fired when the component is focused with a keyboard.
    * We trigger a `onFocus` callback too.
    */
   onFocusVisible: PropTypes.func,
+  /**
+   * Callback fired when a key is pressed.
+   * @param {React.KeyboardEvent<HTMLButtonElement>} event The event object.
+   * @param {PickerValidDate} day The day.
+   * @default () => {}
+   */
+  onKeyDown: PropTypes.func,
+  /**
+   * Callback fired when the mouse button is pressed.
+   * @param {React.MouseEvent<HTMLButtonElement>} event The event object.
+   * @default () => {}
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * Callback fired when the mouse enters the component.
+   * @param {React.MouseEvent<HTMLButtonElement>} event The event object.
+   * @param {PickerValidDate} day The day.
+   * @default () => {}
+   */
   onMouseEnter: PropTypes.func,
   /**
-   * If `true`, day is outside of month and will be hidden.
+   * If `true`, the day is outside the current month.
+   * @default false
    */
-  outsideCurrentMonth: PropTypes.bool.isRequired,
+  outsideCurrentMonth: PropTypes.bool,
   /**
    * If `true`, renders as selected.
    * @default false
@@ -443,7 +649,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
    */
   tabIndex: PropTypes.number,
   /**
-   * If `true`, renders as today date.
+   * If `true`, today's day is highlighted.
    * @default false
    */
   today: PropTypes.bool,
@@ -465,11 +671,9 @@ process.env.NODE_ENV !== "production" ? DateRangePickerDayRaw.propTypes = {
 
 /**
  * Demos:
- *
  * - [DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
  *
  * API:
- *
  * - [DateRangePickerDay API](https://mui.com/x/api/date-pickers/date-range-picker-day/)
  */
 export const DateRangePickerDay = /*#__PURE__*/React.memo(DateRangePickerDayRaw);