@mui/x-date-pickers 9.0.0-alpha.3 → 9.0.0-rc.0

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -17,6 +17,7 @@ var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
 var _dimensions = require("../internals/constants/dimensions");
 var _utils = require("../internals/utils/utils");
@@ -80,7 +81,7 @@ const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.defaul
     marginTop: 4
   },
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.hoverOpacity)
   },
   '&.Mui-selected': {
     backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -90,7 +91,7 @@ const MultiSectionDigitalClockSectionItem = (0, _styles.styled)(_MenuItem.defaul
     }
   },
   '&.Mui-focusVisible': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity)
   }
 }));
 /**
@@ -100,6 +101,7 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
   const previousActive = React.useRef(null);
+  const shouldRefocusOnNextRender = React.useRef(false);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -131,13 +133,21 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
-    if (active && autoFocus && activeItem) {
+    if (!activeItem) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    const isSameItemAsPrevious = previousActive.current === activeItem;
+    const isFocusInsideSection = !!activeElement && containerRef.current.contains(activeElement);
+    const shouldRefocusSameItem = isSameItemAsPrevious && shouldRefocusOnNextRender.current;
+    if (active && autoFocus && (!isSameItemAsPrevious || shouldRefocusSameItem) && (previousActive.current == null || shouldRefocusOnNextRender.current || isFocusInsideSection)) {
+      previousActive.current = activeItem;
+      shouldRefocusOnNextRender.current = false;
       activeItem.focus();
     }
-    if (!activeItem || previousActive.current === activeItem) {
+    if (isSameItemAsPrevious) {
       return;
     }
-    previousActive.current = activeItem;
     const offsetTop = activeItem.offsetTop;
     const itemHeight = activeItem.offsetHeight;
     const containerHeight = containerRef.current.clientHeight;
@@ -155,9 +165,35 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     // Ensure we don't scroll past the top
     containerRef.current.scrollTop = Math.max(0, scrollPosition);
   });
+  const handleBlur = (0, _useEventCallback.default)(event => {
+    // Keep focus restoration only for in-picker keyboard navigation.
+    // Do not restore focus after leaving the picker, which would steal focus from external inputs.
+    const relatedTarget = event.relatedTarget;
+    const blurParent = relatedTarget?.parentElement;
+    const relatedTargetRole = relatedTarget?.getAttribute('role');
+    const shouldRefocus = blurParent?.nodeName === 'UL' && blurParent !== containerRef.current || relatedTargetRole === 'gridcell';
+    shouldRefocusOnNextRender.current = shouldRefocus;
+    if (previousActive.current && blurParent?.nodeName === 'UL' && blurParent !== containerRef.current) {
+      previousActive.current = null;
+    }
+  });
+
+  // Reset tracking when section becomes inactive
+  // so focus can be reapplied when user returns via keyboard
+  React.useEffect(() => {
+    if (!active) {
+      previousActive.current = null;
+    }
+  }, [active]);
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
-  const handleKeyDown = event => {
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
     switch (event.key) {
+      case 'Tab':
+        {
+          // Preserve focus restoration when leaving the section with keyboard navigation.
+          shouldRefocusOnNextRender.current = true;
+          break;
+        }
       case 'PageUp':
         {
           const newIndex = (0, _utils.getFocusedListItemIndex)(containerRef.current) - 5;
@@ -183,15 +219,16 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
           break;
         }
       default:
+        break;
     }
-  };
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiSectionDigitalClockSectionRoot, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    autoFocusItem: autoFocus && active,
     role: "listbox",
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.mjs

@@ -5,12 +5,13 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["autoFocus", "onChange", "className", "classes", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.mjs";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.mjs";
 import { getFocusedListItemIndex } from "../internals/utils/utils.mjs";
@@ -73,7 +74,7 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
     marginTop: 4
   },
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.hoverOpacity)
   },
   '&.Mui-selected': {
     backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -83,7 +84,7 @@ const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
     }
   },
   '&.Mui-focusVisible': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity)
   }
 }));
 /**
@@ -93,6 +94,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
   const previousActive = React.useRef(null);
+  const shouldRefocusOnNextRender = React.useRef(false);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -124,13 +126,21 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
-    if (active && autoFocus && activeItem) {
+    if (!activeItem) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    const isSameItemAsPrevious = previousActive.current === activeItem;
+    const isFocusInsideSection = !!activeElement && containerRef.current.contains(activeElement);
+    const shouldRefocusSameItem = isSameItemAsPrevious && shouldRefocusOnNextRender.current;
+    if (active && autoFocus && (!isSameItemAsPrevious || shouldRefocusSameItem) && (previousActive.current == null || shouldRefocusOnNextRender.current || isFocusInsideSection)) {
+      previousActive.current = activeItem;
+      shouldRefocusOnNextRender.current = false;
       activeItem.focus();
     }
-    if (!activeItem || previousActive.current === activeItem) {
+    if (isSameItemAsPrevious) {
       return;
     }
-    previousActive.current = activeItem;
     const offsetTop = activeItem.offsetTop;
     const itemHeight = activeItem.offsetHeight;
     const containerHeight = containerRef.current.clientHeight;
@@ -148,9 +158,35 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     // Ensure we don't scroll past the top
     containerRef.current.scrollTop = Math.max(0, scrollPosition);
   });
+  const handleBlur = useEventCallback(event => {
+    // Keep focus restoration only for in-picker keyboard navigation.
+    // Do not restore focus after leaving the picker, which would steal focus from external inputs.
+    const relatedTarget = event.relatedTarget;
+    const blurParent = relatedTarget?.parentElement;
+    const relatedTargetRole = relatedTarget?.getAttribute('role');
+    const shouldRefocus = blurParent?.nodeName === 'UL' && blurParent !== containerRef.current || relatedTargetRole === 'gridcell';
+    shouldRefocusOnNextRender.current = shouldRefocus;
+    if (previousActive.current && blurParent?.nodeName === 'UL' && blurParent !== containerRef.current) {
+      previousActive.current = null;
+    }
+  });
+
+  // Reset tracking when section becomes inactive
+  // so focus can be reapplied when user returns via keyboard
+  React.useEffect(() => {
+    if (!active) {
+      previousActive.current = null;
+    }
+  }, [active]);
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
-  const handleKeyDown = event => {
+  const handleKeyDown = useEventCallback(event => {
     switch (event.key) {
+      case 'Tab':
+        {
+          // Preserve focus restoration when leaving the section with keyboard navigation.
+          shouldRefocusOnNextRender.current = true;
+          break;
+        }
       case 'PageUp':
         {
           const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
@@ -176,15 +212,16 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
           break;
         }
       default:
+        break;
     }
-  };
+  });
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    autoFocusItem: autoFocus && active,
     role: "listbox",
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

package/PickerDay/PickerDay.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { PickerDayProps } from "./PickerDay.types.mjs";
+type PickerDayComponent = ((props: PickerDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ * - [PickerDay API](https://mui.com/x/api/date-pickers/picker-day/)
+ */
+export declare const PickerDay: PickerDayComponent;
+export {};

package/PickerDay/PickerDay.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { PickerDayProps } from "./PickerDay.types.js";
+type PickerDayComponent = ((props: PickerDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ * - [PickerDay API](https://mui.com/x/api/date-pickers/picker-day/)
+ */
+export declare const PickerDay: PickerDayComponent;
+export {};

package/{PickerDay2/PickerDay2.js → PickerDay/PickerDay.js}

@@ -6,7 +6,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PickerDay2 = void 0;
+exports.PickerDay = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
@@ -18,11 +18,11 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _dimensions = require("../internals/constants/dimensions");
-var _pickerDay2Classes = require("./pickerDay2Classes");
+var _pickerDayClasses = require("./pickerDayClasses");
 var _usePickerAdapter = require("../hooks/usePickerAdapter");
-var _usePickerDayOwnerState = require("../PickersDay/usePickerDayOwnerState");
+var _usePickerDayOwnerState = require("../internals/hooks/usePickerDayOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth", "isVisuallySelected"];
+const _excluded = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableHighlightToday", "showDaysOutsideCurrentMonth", "isVisuallySelected", "isDayFillerCell"];
 const useUtilityClasses = (ownerState, classes) => {
   const {
     isDaySelected,
@@ -35,16 +35,16 @@ const useUtilityClasses = (ownerState, classes) => {
   const slots = {
     root: ['root', isDaySelected && !isDayFillerCell && 'selected', isDayDisabled && 'disabled', !disableHighlightToday && isDayCurrent && !isDaySelected && !isDayFillerCell && 'today', isDayOutsideMonth && 'dayOutsideMonth', isDayFillerCell && 'fillerCell']
   };
-  return (0, _composeClasses.default)(slots, _pickerDay2Classes.getPickerDay2UtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _pickerDayClasses.getPickerDayUtilityClass, classes);
 };
-const PickerDay2Root = (0, _styles.styled)(_ButtonBase.default, {
-  name: 'MuiPickerDay2',
+const PickerDayRoot = (0, _styles.styled)(_ButtonBase.default, {
+  name: 'MuiPickerDay',
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.root, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles.today, !ownerState.isDayOutsideMonth && styles.dayOutsideMonth, ownerState.isDayFillerCell && styles.fillerCell];
+    return [styles.root, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles.today, ownerState.isDayOutsideMonth && styles.dayOutsideMonth, ownerState.isDayFillerCell && styles.fillerCell];
   }
 })(({
   theme
@@ -52,6 +52,8 @@ const PickerDay2Root = (0, _styles.styled)(_ButtonBase.default, {
   '--PickerDay-horizontalMargin': `${_dimensions.DAY_MARGIN}px`,
   '--PickerDay-size': `${_dimensions.DAY_SIZE}px`
 }, theme.typography.caption, {
+  lineHeight: 1,
+  display: 'flex',
   width: 'var(--PickerDay-size)',
   height: 'var(--PickerDay-size)',
   borderRadius: 'calc(var(--PickerDay-size) / 2)',
@@ -64,11 +66,11 @@ const PickerDay2Root = (0, _styles.styled)(_ButtonBase.default, {
   color: (theme.vars || theme).palette.text.primary,
   '@media (pointer: fine)': {
     '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.hoverOpacity)
     }
   },
   '&:focus': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.focusOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.focusOpacity)
   },
   marginLeft: 'var(--PickerDay-horizontalMargin)',
   marginRight: 'var(--PickerDay-horizontalMargin)',
@@ -84,7 +86,7 @@ const PickerDay2Root = (0, _styles.styled)(_ButtonBase.default, {
         willChange: 'background-color',
         backgroundColor: (theme.vars || theme).palette.primary.dark
       },
-      [`&.${_pickerDay2Classes.pickerDay2Classes.disabled}`]: {
+      [`&.${_pickerDayClasses.pickerDayClasses.disabled}`]: {
         opacity: 0.6
       }
     }
@@ -124,10 +126,10 @@ const PickerDay2Root = (0, _styles.styled)(_ButtonBase.default, {
   }]
 }));
 const noop = () => {};
-const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps, forwardedRef) {
+const PickerDayRaw = /*#__PURE__*/React.forwardRef(function PickerDay(inProps, forwardedRef) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
-    name: 'MuiPickerDay2'
+    name: 'MuiPickerDay'
   });
   const adapter = (0, _usePickerAdapter.usePickerAdapter)();
   const {
@@ -148,24 +150,23 @@ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps,
       disabled,
       today,
       outsideCurrentMonth,
-      disableMargin,
       disableHighlightToday,
-      showDaysOutsideCurrentMonth
+      showDaysOutsideCurrentMonth,
+      isDayFillerCell: isDayFillerCellProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const pickersDayOwnerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
+  const pickerDayOwnerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
     day,
     selected,
     disabled,
     today,
     outsideCurrentMonth,
-    disableMargin,
     disableHighlightToday,
     showDaysOutsideCurrentMonth
   });
-  const ownerState = (0, _extends2.default)({}, pickersDayOwnerState, {
+  const ownerState = (0, _extends2.default)({}, pickerDayOwnerState, {
     // Properties specific to the MUI implementation (some might be removed in the next major)
-    isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth
+    isDayFillerCell: isDayFillerCellProp ?? (outsideCurrentMonth && !showDaysOutsideCurrentMonth)
   });
   const classes = useUtilityClasses(ownerState, classesProp);
   const ref = React.useRef(null);
@@ -200,12 +201,18 @@ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps,
       onClick(event);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerDay2Root, (0, _extends2.default)({
+  if (ownerState.isDayFillerCell) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerDayRoot, {
+      ref: handleRef,
+      role: other.role,
+      ownerState: ownerState,
+      className: (0, _clsx.default)(classes.root, className),
+      as: "div"
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickerDayRoot, (0, _extends2.default)({
     ref: handleRef,
-    centerRipple: true
-    // compat with PickersDay for tests
-    ,
-
+    centerRipple: true,
     disabled: disabled,
     tabIndex: selected ? 0 : -1,
     onKeyDown: event => onKeyDown(event, day),
@@ -217,11 +224,11 @@ const PickerDay2Raw = /*#__PURE__*/React.forwardRef(function PickerDay2(inProps,
   }, other, {
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    children: children ?? (ownerState.isDayFillerCell ? null : adapter.format(day, 'dayOfMonth'))
+    children: children ?? adapter.format(day, 'dayOfMonth')
   }));
 });
-if (process.env.NODE_ENV !== "production") PickerDay2Raw.displayName = "PickerDay2Raw";
-process.env.NODE_ENV !== "production" ? PickerDay2Raw.propTypes = {
+if (process.env.NODE_ENV !== "production") PickerDayRaw.displayName = "PickerDayRaw";
+process.env.NODE_ENV !== "production" ? PickerDayRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -252,20 +259,15 @@ process.env.NODE_ENV !== "production" ? PickerDay2Raw.propTypes = {
    */
   day: _propTypes.default.object.isRequired,
   /**
-   * If `true`, renders as disabled.
+   * If `true`, the day is disabled.
    * @default false
    */
   disabled: _propTypes.default.bool,
   /**
-   * If `true`, today's date is rendering without highlighting with circle.
+   * If `true`, today's day is not highlighted.
    * @default false
    */
   disableHighlightToday: _propTypes.default.bool,
-  /**
-   * If `true`, days are rendering without margin. Useful for displaying linked range of days.
-   * @default false
-   */
-  disableMargin: _propTypes.default.bool,
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -293,35 +295,90 @@ process.env.NODE_ENV !== "production" ? PickerDay2Raw.propTypes = {
    * if needed.
    */
   focusVisibleClassName: _propTypes.default.string,
+  /**
+   * If `true`, the day is being animated.
+   * @default false
+   */
   isAnimating: _propTypes.default.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 a filler day (its content is hidden).
+   * @default false
+   */
+  isDayFillerCell: _propTypes.default.bool,
+  /**
+   * If `true`, the day is the first visible cell of the month.
+   * @default false
    */
-  isFirstVisibleCell: _propTypes.default.bool.isRequired,
+  isFirstVisibleCell: _propTypes.default.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.default.bool.isRequired,
+  isLastVisibleCell: _propTypes.default.bool,
   /**
    * Indicates if the day should be visually selected.
    */
   isVisuallySelected: _propTypes.default.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.default.bool,
+  /**
+   * Callback fired when the component is blurred.
+   * @param {React.FocusEvent<HTMLButtonElement>} event The event object.
+   * @param {PickerValidDate} day The day.
+   * @default () => {}
+   */
   onBlur: _propTypes.default.func,
+  /**
+   * Callback fired when the component is clicked.
+   * @param {MuiEvent<React.MouseEvent<HTMLButtonElement>>} event The event object.
+   * @default () => {}
+   */
+  onClick: _propTypes.default.func,
+  /**
+   * Callback fired when the day is selected.
+   * @param {PickerValidDate} day The day to select.
+   */
   onDaySelect: _propTypes.default.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.default.func,
   /**
    * Callback fired when the component is focused with a keyboard.
    * We trigger a `onFocus` callback too.
    */
   onFocusVisible: _propTypes.default.func,
+  /**
+   * Callback fired when a key is pressed.
+   * @param {React.KeyboardEvent<HTMLButtonElement>} event The event object.
+   * @param {PickerValidDate} day The day.
+   * @default () => {}
+   */
   onKeyDown: _propTypes.default.func,
+  /**
+   * Callback fired when the mouse button is pressed.
+   * @param {React.MouseEvent<HTMLButtonElement>} event The event object.
+   * @default () => {}
+   */
+  onMouseDown: _propTypes.default.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.default.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.default.bool.isRequired,
+  outsideCurrentMonth: _propTypes.default.bool,
   /**
    * If `true`, renders as selected.
    * @default false
@@ -348,7 +405,7 @@ process.env.NODE_ENV !== "production" ? PickerDay2Raw.propTypes = {
    */
   tabIndex: _propTypes.default.number,
   /**
-   * If `true`, renders as today date.
+   * If `true`, today's day is highlighted.
    * @default false
    */
   today: _propTypes.default.bool,
@@ -367,5 +424,13 @@ process.env.NODE_ENV !== "production" ? PickerDay2Raw.propTypes = {
     })
   })])
 } : void 0;
-const PickerDay2 = exports.PickerDay2 = /*#__PURE__*/React.memo(PickerDay2Raw);
-if (process.env.NODE_ENV !== "production") PickerDay2.displayName = "PickerDay2";
+
+/**
+ * Demos:
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ *
+ * API:
+ * - [PickerDay API](https://mui.com/x/api/date-pickers/picker-day/)
+ */
+const PickerDay = exports.PickerDay = /*#__PURE__*/React.memo(PickerDayRaw);
+if (process.env.NODE_ENV !== "production") PickerDay.displayName = "PickerDay";