@mui/x-date-pickers 8.0.0-beta.0 → 8.0.0-beta.1

package/CHANGELOG.md

@@ -5,6 +5,83 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/DateCalendar/DayCalendar.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { DefaultizedProps, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { PickersDayProps, ExportedPickersDayProps } from "../PickersDay/PickersDay.js";
+import { PickerDayOwnerState, PickersDayProps } from "../PickersDay/index.js";
+import { ExportedPickersDayProps } from "../PickersDay/PickersDay.types.js";
 import { PickerOnChangeFn } from "../internals/hooks/useViews.js";
 import { SlideDirection, SlideTransitionProps } from "./PickersSlideTransition.js";
 import { BaseDateValidationProps, DayValidationProps, MonthValidationProps, YearValidationProps } from "../internals/models/validation.js";
 import { DayCalendarClasses } from "./dayCalendarClasses.js";
-import { PickerOwnerState, PickerValidDate, TimezoneProps } from "../models/index.js";
+import { PickerValidDate, TimezoneProps } from "../models/index.js";
 import { FormProps } from "../internals/models/formProps.js";
 export interface DayCalendarSlots {
   /**
@@ -18,11 +19,6 @@ export interface DayCalendarSlots {
 export interface DayCalendarSlotProps {
   day?: SlotComponentPropsFromProps<PickersDayProps, {}, PickerDayOwnerState>;
 }
-export interface PickerDayOwnerState extends PickerOwnerState {
-  isDaySelected: boolean;
-  isDayDisabled: boolean;
-  day: PickerValidDate;
-}
 export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
   /**
    * If `true`, calls `renderLoading` instead of rendering the day calendar.

package/DateCalendar/DayCalendar.js

@@ -17,7 +17,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _PickersDay = require("../PickersDay/PickersDay");
+var _PickersDay = require("../PickersDay");
 var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
@@ -25,7 +25,7 @@ var _PickersSlideTransition = require("./PickersSlideTransition");
 var _useIsDateDisabled = require("./useIsDateDisabled");
 var _dateUtils = require("../internals/utils/date-utils");
 var _dayCalendarClasses = require("./dayCalendarClasses");
-var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
+var _usePickerDayOwnerState = require("../PickersDay/usePickerDayOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["parentProps", "day", "focusedDay", "selectedDays", "isDateDisabled", "currentMonthNumber", "isViewFocused"],
   _excluded2 = ["ownerState"];
@@ -162,14 +162,23 @@ function WrappedDay(_ref) {
   } = parentProps;
   const utils = (0, _useUtils.useUtils)();
   const now = (0, _useUtils.useNow)(timezone);
-  const {
-    ownerState
-  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const isFocusableDay = focusedDay != null && utils.isSameDay(day, focusedDay);
   const isFocusedDay = isViewFocused && isFocusableDay;
   const isSelected = selectedDays.some(selectedDay => utils.isSameDay(selectedDay, day));
   const isToday = utils.isSameDay(day, now);
   const isDisabled = React.useMemo(() => disabled || isDateDisabled(day), [disabled, isDateDisabled, day]);
+  const isOutsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
+  const ownerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
+    day,
+    selected: isSelected,
+    disabled: isDisabled,
+    today: isToday,
+    outsideCurrentMonth: isOutsideCurrentMonth,
+    disableMargin: undefined,
+    // This prop can only be defined using slotProps.day so the ownerState for useSlotProps cannot have its value.
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
+  });
   const Day = slots?.day ?? _PickersDay.PickersDay;
   // We don't want to pass to ownerState down, to avoid re-rendering all the day whenever a prop changes.
   const _useSlotProps = (0, _useSlotProps2.default)({
@@ -190,7 +199,6 @@ function WrappedDay(_ref) {
       })
     }),
     dayProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
-  const outsideCurrentMonth = React.useMemo(() => utils.getMonth(day) !== currentMonthNumber, [utils, day, currentMonthNumber]);
   const isFirstVisibleCell = React.useMemo(() => {
     const startOfMonth = utils.startOfMonth(utils.setMonth(day, currentMonthNumber));
     if (!showDaysOutsideCurrentMonth) {
@@ -208,9 +216,9 @@ function WrappedDay(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, (0, _extends2.default)({}, dayProps, {
     day: day,
     disabled: isDisabled,
-    autoFocus: !outsideCurrentMonth && isFocusedDay,
+    autoFocus: !isOutsideCurrentMonth && isFocusedDay,
     today: isToday,
-    outsideCurrentMonth: outsideCurrentMonth,
+    outsideCurrentMonth: isOutsideCurrentMonth,
     isFirstVisibleCell: isFirstVisibleCell,
     isLastVisibleCell: isLastVisibleCell,
     selected: isSelected,

package/DateCalendar/index.d.ts

@@ -1,6 +1,5 @@
 export { DateCalendar } from "./DateCalendar.js";
 export type { DateCalendarProps, DateCalendarSlots, DateCalendarSlotProps } from './DateCalendar.types';
-export type { PickerDayOwnerState } from './DayCalendar';
 export { getDateCalendarUtilityClass, dateCalendarClasses } from "./dateCalendarClasses.js";
 export type { DateCalendarClassKey, DateCalendarClasses } from './dateCalendarClasses';
 export { dayCalendarClasses } from "./dayCalendarClasses.js";

package/DateField/useDateField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateFieldProps } from "./DateField.types.js";
-export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseDateValidationProps | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/DateField/useDateField.js

@@ -6,26 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDateField = void 0;
 var _useField = require("../internals/hooks/useField");
-var _hooks = require("../hooks");
 var _managers = require("../managers");
 const useDateField = props => {
   const manager = (0, _managers.useDateManager)(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = (0, _hooks.useSplitFieldProps)(props, 'date');
-  const internalPropsWithDefaults = (0, _useField.useFieldInternalPropsWithDefaults)({
-    manager,
-    internalProps
-  });
   return (0, _useField.useField)({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };
 exports.useDateField = useDateField;

package/DatePicker/DatePicker.js

@@ -106,6 +106,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DateTimeField/useDateTimeField.d.ts

@@ -1,2 +1,2 @@
 import { UseDateTimeFieldProps } from "./DateTimeField.types.js";
-export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | "maxDate" | "minDate" | "disablePast" | "disableFuture" | "shouldDisableYear" | "shouldDisableMonth" | "shouldDisableDate" | "minTime" | "maxTime" | "minutesStep" | "shouldDisableTime" | "disableIgnoringDatePartForTimeValidation" | "ampm" | "minDateTime" | "maxDateTime" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;
+export declare const useDateTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TProps extends UseDateTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TProps) => import("../internals").UseFieldReturnValue<TEnableAccessibleFieldDOMStructure, TProps>;

package/DateTimeField/useDateTimeField.js

@@ -6,26 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDateTimeField = void 0;
 var _useField = require("../internals/hooks/useField");
-var _hooks = require("../hooks");
 var _managers = require("../managers");
 const useDateTimeField = props => {
   const manager = (0, _managers.useDateTimeManager)(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = (0, _hooks.useSplitFieldProps)(props, 'date-time');
-  const internalPropsWithDefaults = (0, _useField.useFieldInternalPropsWithDefaults)({
-    manager,
-    internalProps
-  });
   return (0, _useField.useField)({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };
 exports.useDateTimeField = useDateTimeField;

package/DateTimePicker/DateTimePicker.js

@@ -121,6 +121,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DesktopDatePicker/DesktopDatePicker.js

@@ -121,6 +121,7 @@ DesktopDatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -210,6 +210,7 @@ DesktopDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/DesktopTimePicker/DesktopTimePicker.js

@@ -135,6 +135,7 @@ DesktopTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MobileDatePicker/MobileDatePicker.js

@@ -114,6 +114,7 @@ MobileDatePicker.propTypes = {
   disableHighlightToday: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MobileDateTimePicker/MobileDateTimePicker.js

@@ -172,6 +172,7 @@ MobileDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/MobileTimePicker/MobileTimePicker.js

@@ -120,6 +120,7 @@ MobileTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: _propTypes.default.bool,
   /**
    * If `true`, the button to open the Picker will not be rendered (it will only render the field).
+   * @deprecated Use the [field component](https://next.mui.com/x/react-date-pickers/fields/) instead.
    * @default false
    */
   disableOpenPicker: _propTypes.default.bool,

package/PickersDay/PickersDay.d.ts

@@ -1,76 +1,5 @@
 import * as React from 'react';
-import { ButtonBaseProps } from '@mui/material/ButtonBase';
-import { ExtendMui } from "../internals/models/helpers.js";
-import { PickersDayClasses } from "./pickersDayClasses.js";
-import { PickerValidDate } from "../models/index.js";
-export interface ExportedPickersDayProps {
-  /**
-   * If `true`, today's date is rendering without highlighting with circle.
-   * @default false
-   */
-  disableHighlightToday?: boolean;
-  /**
-   * If `true`, days outside the current month are rendered:
-   *
-   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
-   *
-   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
-   *
-   * - ignored if `calendars` equals more than `1` on range pickers.
-   * @default false
-   */
-  showDaysOutsideCurrentMonth?: boolean;
-}
-export interface PickersDayProps extends ExportedPickersDayProps, Omit<ExtendMui<ButtonBaseProps>, 'onKeyDown' | 'onFocus' | 'onBlur' | 'onMouseEnter' | 'LinkComponent'> {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<PickersDayClasses>;
-  /**
-   * The date to show.
-   */
-  day: PickerValidDate;
-  /**
-   * If `true`, renders as disabled.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * If `true`, days are rendering without margin. Useful for displaying linked range of days.
-   * @default false
-   */
-  disableMargin?: boolean;
-  isAnimating?: boolean;
-  onFocus?: (event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void;
-  onBlur?: (event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, day: PickerValidDate) => void;
-  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, day: PickerValidDate) => void;
-  onDaySelect: (day: PickerValidDate) => void;
-  /**
-   * If `true`, day is outside of month and will be hidden.
-   */
-  outsideCurrentMonth: boolean;
-  /**
-   * 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`.
-   */
-  isFirstVisibleCell: boolean;
-  /**
-   * 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`.
-   */
-  isLastVisibleCell: boolean;
-  /**
-   * If `true`, renders as selected.
-   * @default false
-   */
-  selected?: boolean;
-  /**
-   * If `true`, renders as today date.
-   * @default false
-   */
-  today?: boolean;
-}
+import { PickersDayProps } from "./PickersDay.types.js";
 type PickersDayComponent = ((props: PickersDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/PickersDay/PickersDay.js

@@ -18,22 +18,22 @@ var _styles = require("@mui/material/styles");
 var _useUtils = require("../internals/hooks/useUtils");
 var _dimensions = require("../internals/constants/dimensions");
 var _pickersDayClasses = require("./pickersDayClasses");
+var _usePickerDayOwnerState = require("./usePickerDayOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "day", "disabled", "disableHighlightToday", "disableMargin", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "outsideCurrentMonth", "selected", "showDaysOutsideCurrentMonth", "children", "today", "isFirstVisibleCell", "isLastVisibleCell"];
-const useUtilityClasses = ownerState => {
+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"];
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    selected,
+    isDaySelected,
+    isDayDisabled,
+    isDayCurrent,
+    isDayOutsideMonth,
     disableMargin,
     disableHighlightToday,
-    today,
-    disabled,
-    outsideCurrentMonth,
-    showDaysOutsideCurrentMonth,
-    classes
+    showDaysOutsideCurrentMonth
   } = ownerState;
-  const isHiddenDaySpacingFiller = outsideCurrentMonth && !showDaysOutsideCurrentMonth;
+  const isHiddenDaySpacingFiller = isDayOutsideMonth && !showDaysOutsideCurrentMonth;
   const slots = {
-    root: ['root', selected && !isHiddenDaySpacingFiller && 'selected', disabled && 'disabled', !disableMargin && 'dayWithMargin', !disableHighlightToday && today && 'today', outsideCurrentMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth', isHiddenDaySpacingFiller && 'hiddenDaySpacingFiller'],
+    root: ['root', isDaySelected && !isHiddenDaySpacingFiller && 'selected', isDayDisabled && 'disabled', !disableMargin && 'dayWithMargin', !disableHighlightToday && isDayCurrent && 'today', isDayOutsideMonth && showDaysOutsideCurrentMonth && 'dayOutsideMonth', isHiddenDaySpacingFiller && 'hiddenDaySpacingFiller'],
     hiddenDaySpacingFiller: ['hiddenDaySpacingFiller']
   };
   return (0, _utils.unstable_composeClasses)(slots, _pickersDayClasses.getPickersDayUtilityClass, classes);
@@ -87,7 +87,7 @@ const styleArg = ({
     }
   }, {
     props: {
-      outsideCurrentMonth: true,
+      isDayOutsideMonth: true,
       showDaysOutsideCurrentMonth: true
     },
     style: {
@@ -96,7 +96,7 @@ const styleArg = ({
   }, {
     props: {
       disableHighlightToday: false,
-      today: true
+      isDayCurrent: true
     },
     style: {
       [`&:not(.${_pickersDayClasses.pickersDayClasses.selected})`]: {
@@ -109,7 +109,7 @@ const overridesResolver = (props, styles) => {
   const {
     ownerState
   } = props;
-  return [styles.root, !ownerState.disableMargin && styles.dayWithMargin, !ownerState.disableHighlightToday && ownerState.today && styles.today, !ownerState.outsideCurrentMonth && ownerState.showDaysOutsideCurrentMonth && styles.dayOutsideMonth, ownerState.outsideCurrentMonth && !ownerState.showDaysOutsideCurrentMonth && styles.hiddenDaySpacingFiller];
+  return [styles.root, !ownerState.disableMargin && styles.dayWithMargin, !ownerState.disableHighlightToday && ownerState.isDayCurrent && styles.today, !ownerState.isDayOutsideMonth && ownerState.showDaysOutsideCurrentMonth && styles.dayOutsideMonth, ownerState.isDayOutsideMonth && !ownerState.showDaysOutsideCurrentMonth && styles.hiddenDaySpacingFiller];
 };
 const PickersDayRoot = (0, _styles.styled)(_ButtonBase.default, {
   name: 'MuiPickersDay',
@@ -138,10 +138,7 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
   const {
       autoFocus = false,
       className,
-      day,
-      disabled = false,
-      disableHighlightToday = false,
-      disableMargin = false,
+      classes: classesProp,
       isAnimating,
       onClick,
       onDaySelect,
@@ -150,23 +147,28 @@ const PickersDayRaw = /*#__PURE__*/React.forwardRef(function PickersDay(inProps,
       onKeyDown = noop,
       onMouseDown = noop,
       onMouseEnter = noop,
-      outsideCurrentMonth,
-      selected = false,
-      showDaysOutsideCurrentMonth = false,
       children,
-      today: isToday = false
+      day,
+      selected,
+      disabled,
+      today,
+      outsideCurrentMonth,
+      disableMargin,
+      disableHighlightToday,
+      showDaysOutsideCurrentMonth
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
-    autoFocus,
+  const ownerState = (0, _usePickerDayOwnerState.usePickerDayOwnerState)({
+    day,
+    selected,
     disabled,
-    disableHighlightToday,
+    today,
+    outsideCurrentMonth,
     disableMargin,
-    selected,
-    showDaysOutsideCurrentMonth,
-    today: isToday
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const utils = (0, _useUtils.useUtils)();
   const ref = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, forwardedRef);

package/PickersDay/PickersDay.types.d.ts

@@ -0,0 +1,114 @@
+import { ButtonBaseProps } from '@mui/material/ButtonBase';
+import { PickerOwnerState, PickerValidDate } from "../models/pickers.js";
+import { ExtendMui } from "../internals/models/helpers.js";
+import { PickersDayClasses } from "./pickersDayClasses.js";
+export interface PickerDayOwnerState extends PickerOwnerState {
+  /**
+   * The object representing the day.
+   */
+  day: PickerValidDate;
+  /**
+   * Whether the day is selected.
+   */
+  isDaySelected: boolean;
+  /**
+   * Whether the day is disabled.
+   */
+  isDayDisabled: boolean;
+  /**
+   * Whether the day is equal to today.
+   */
+  isDayCurrent: boolean;
+  /**
+   * Whether the day is outside the month it's being rendered in.
+   */
+  isDayOutsideMonth: boolean;
+  /**
+   * Whether the day is the first day of the week.
+   */
+  isDayStartOfWeek: boolean;
+  /**
+   * Whether the day is the last day of the week.
+   */
+  isDayEndOfWeek: boolean;
+  /**
+   * Whether the margin around the day should be removed.
+   */
+  disableMargin: boolean;
+  /**
+   * Whether the visual indication around the current day should be removed.
+   */
+  disableHighlightToday: boolean;
+  /**
+   * Whether the day outside of the month they are being rendered in should be visible.
+   */
+  showDaysOutsideCurrentMonth: boolean;
+}
+export interface ExportedPickersDayProps {
+  /**
+   * If `true`, today's date is rendering without highlighting with circle.
+   * @default false
+   */
+  disableHighlightToday?: boolean;
+  /**
+   * If `true`, days outside the current month are rendered:
+   *
+   * - if `fixedWeekNumber` is defined, renders days to have the weeks requested.
+   *
+   * - if `fixedWeekNumber` is not defined, renders day to fill the first and last week of the current month.
+   *
+   * - ignored if `calendars` equals more than `1` on range pickers.
+   * @default false
+   */
+  showDaysOutsideCurrentMonth?: boolean;
+}
+export interface PickersDayProps extends ExportedPickersDayProps, Omit<ExtendMui<ButtonBaseProps>, 'onKeyDown' | 'onFocus' | 'onBlur' | 'onMouseEnter' | 'LinkComponent'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickersDayClasses>;
+  /**
+   * The date to show.
+   */
+  day: PickerValidDate;
+  /**
+   * If `true`, renders as disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, days are rendering without margin. Useful for displaying linked range of days.
+   * @default false
+   */
+  disableMargin?: boolean;
+  isAnimating?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onBlur?: (event: React.FocusEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>, day: PickerValidDate) => void;
+  onDaySelect: (day: PickerValidDate) => void;
+  /**
+   * If `true`, day is outside of month and will be hidden.
+   */
+  outsideCurrentMonth: boolean;
+  /**
+   * 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`.
+   */
+  isFirstVisibleCell: boolean;
+  /**
+   * 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`.
+   */
+  isLastVisibleCell: boolean;
+  /**
+   * If `true`, renders as selected.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * If `true`, renders as today date.
+   * @default false
+   */
+  today?: boolean;
+}

package/PickersDay/PickersDay.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/PickersDay/index.d.ts

@@ -1,4 +1,4 @@
 export { PickersDay } from "./PickersDay.js";
-export type { PickersDayProps } from './PickersDay';
+export type { PickersDayProps, PickerDayOwnerState } from './PickersDay.types';
 export { pickersDayClasses, getPickersDayUtilityClass } from "./pickersDayClasses.js";
 export type { PickersDayClasses, PickersDayClassKey } from './pickersDayClasses';