@mui/x-date-pickers 9.0.0-alpha.4 → 9.0.0

package/MobileTimePicker/MobileTimePicker.types.d.mts

@@ -4,8 +4,8 @@ import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } fro
 import { TimeView } from "../models/index.mjs";
 import { TimeViewWithMeridiem } from "../internals/models/index.mjs";
 export interface MobileTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
-export interface MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = TimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TView>, MobileOnlyPickerProps {
+export interface MobileTimePickerSlotProps extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps {}
+export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerProps<TView>, MobileOnlyPickerProps {
   /**
    * Overridable component slots.
    * @default {}
@@ -15,5 +15,5 @@ export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = Time
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MobileTimePickerSlotProps;
 }

package/MobileTimePicker/MobileTimePicker.types.d.ts

@@ -4,8 +4,8 @@ import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } fro
 import { TimeView } from "../models/index.js";
 import { TimeViewWithMeridiem } from "../internals/models/index.js";
 export interface MobileTimePickerSlots extends BaseTimePickerSlots, MakeOptional<UseMobilePickerSlots, 'field'> {}
-export interface MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
-export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = TimeView, TEnableAccessibleFieldDOMStructure extends boolean = true> extends BaseTimePickerProps<TView>, MobileOnlyPickerProps {
+export interface MobileTimePickerSlotProps extends BaseTimePickerSlotProps, ExportedUseMobilePickerSlotProps {}
+export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = TimeView> extends BaseTimePickerProps<TView>, MobileOnlyPickerProps {
   /**
    * Overridable component slots.
    * @default {}
@@ -15,5 +15,5 @@ export interface MobileTimePickerProps<TView extends TimeViewWithMeridiem = Time
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+  slotProps?: MobileTimePickerSlotProps;
 }

package/MonthCalendar/MonthCalendarButton.js

@@ -45,10 +45,10 @@ const DefaultMonthButton = (0, _styles.styled)('button', {
   borderRadius: 18,
   cursor: 'pointer',
   '&:focus': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
   },
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _styles.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
   },
   '&:disabled': {
     cursor: 'auto',

package/MonthCalendar/MonthCalendarButton.mjs

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["autoFocus", "classes", "disabled", "selected", "value", "onClick", "onKeyDown", "onFocus", "onBlur", "slots", "slotProps"];
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
@@ -38,10 +38,10 @@ const DefaultMonthButton = styled('button', {
   borderRadius: 18,
   cursor: 'pointer',
   '&:focus': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
   },
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+    backgroundColor: theme.alpha((theme.vars || theme).palette.action.active, (theme.vars || theme).palette.action.hoverOpacity)
   },
   '&:disabled': {
     cursor: 'auto',

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -81,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,
@@ -91,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)
   }
 }));
 /**

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.mjs

@@ -5,7 +5,7 @@ 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';
@@ -74,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,
@@ -84,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)
   }
 }));
 /**

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";