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

package/modern/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/modern/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/modern/DateField/useDateField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
-import { useSplitFieldProps } from "../hooks/index.js";
+import { useField } from "../internals/hooks/useField/index.js";
 import { useDateManager } from "../managers/index.js";
 export const useDateField = props => {
   const manager = useDateManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'date');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };

package/modern/DatePicker/DatePicker.js

@@ -99,6 +99,7 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   disableHighlightToday: PropTypes.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.bool,

package/modern/DatePicker/shared.js

@@ -1,17 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
-import { applyDefaultDate } from "../internals/utils/date-utils.js";
 import { DatePickerToolbar } from "./DatePickerToolbar.js";
+import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
 export function useDatePickerDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
@@ -20,7 +18,7 @@ export function useDatePickerDefaultizedProps(props, name) {
       datePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     localeText
   }, applyDefaultViewProps({
     views: themeProps.views,
@@ -28,10 +26,6 @@ export function useDatePickerDefaultizedProps(props, name) {
     defaultViews: ['year', 'day'],
     defaultOpenTo: 'day'
   }), {
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: _extends({
       toolbar: DatePickerToolbar
     }, themeProps.slots)

package/modern/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/modern/DateTimeField/useDateTimeField.js

@@ -1,25 +1,11 @@
 'use client';
 
-import { useField, useFieldInternalPropsWithDefaults } from "../internals/hooks/useField/index.js";
-import { useSplitFieldProps } from "../hooks/index.js";
+import { useField } from "../internals/hooks/useField/index.js";
 import { useDateTimeManager } from "../managers/index.js";
 export const useDateTimeField = props => {
   const manager = useDateTimeManager(props);
-  const {
-    forwardedProps,
-    internalProps
-  } = useSplitFieldProps(props, 'date-time');
-  const internalPropsWithDefaults = useFieldInternalPropsWithDefaults({
-    manager,
-    internalProps
-  });
   return useField({
-    forwardedProps,
-    internalProps: internalPropsWithDefaults,
-    valueManager: manager.internal_valueManager,
-    fieldValueManager: manager.internal_fieldValueManager,
-    validator: manager.validator,
-    valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
+    manager,
+    props
   });
 };

package/modern/DateTimePicker/DateTimePicker.js

@@ -114,6 +114,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.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.bool,

package/modern/DateTimePicker/shared.js

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { useDefaultDates, useUtils } from "../internals/hooks/useUtils.js";
-import { applyDefaultDate } from "../internals/utils/date-utils.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
 import { DateTimePickerTabs } from "./DateTimePickerTabs.js";
 import { DateTimePickerToolbar } from "./DateTimePickerToolbar.js";
 import { applyDefaultViewProps } from "../internals/utils/views.js";
 import { resolveTimeViewsResponse } from "../internals/utils/date-time-utils.js";
+import { useApplyDefaultValuesToDateTimeValidationProps } from "../managers/useDateTimeManager.js";
 export function useDateTimePickerDefaultizedProps(props, name) {
   const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
+  const validationProps = useApplyDefaultValuesToDateTimeValidationProps(themeProps);
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
@@ -43,7 +43,7 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     timeSteps: themeProps.timeSteps,
     views: defaultViews
   });
-  return _extends({}, themeProps, {
+  return _extends({}, themeProps, validationProps, {
     timeSteps,
     openTo,
     shouldRenderTimeInASingleColumn,
@@ -52,16 +52,6 @@ export function useDateTimePickerDefaultizedProps(props, name) {
     ampm,
     localeText,
     orientation: themeProps.orientation ?? 'portrait',
-    // TODO: Remove from public API
-    disableIgnoringDatePartForTimeValidation: themeProps.disableIgnoringDatePartForTimeValidation ?? Boolean(themeProps.minDateTime || themeProps.maxDateTime ||
-    // allow time clock to correctly check time validity: https://github.com/mui/mui-x/issues/8520
-    themeProps.disablePast || themeProps.disableFuture),
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: applyDefaultDate(utils, themeProps.minDateTime ?? themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDateTime ?? themeProps.maxDate, defaultDates.maxDate),
-    minTime: themeProps.minDateTime ?? themeProps.minTime,
-    maxTime: themeProps.maxDateTime ?? themeProps.maxTime,
     slots: _extends({
       toolbar: DateTimePickerToolbar,
       tabs: DateTimePickerTabs

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -114,6 +114,7 @@ DesktopDatePicker.propTypes = {
   disableHighlightToday: PropTypes.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.bool,

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -203,6 +203,7 @@ DesktopDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.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.bool,

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -128,6 +128,7 @@ DesktopTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.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.bool,

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -107,6 +107,7 @@ MobileDatePicker.propTypes = {
   disableHighlightToday: PropTypes.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.bool,

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -165,6 +165,7 @@ MobileDateTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.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.bool,

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -113,6 +113,7 @@ MobileTimePicker.propTypes = {
   disableIgnoringDatePartForTimeValidation: PropTypes.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.bool,

package/modern/MonthCalendar/MonthCalendar.js

@@ -11,14 +11,15 @@ import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled, useThemeProps } from '@mui/material/styles';
 import { unstable_useControlled as useControlled, unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { MonthCalendarButton } from "./MonthCalendarButton.js";
-import { useUtils, useNow, useDefaultDates } from "../internals/hooks/useUtils.js";
+import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { getMonthCalendarUtilityClass } from "./monthCalendarClasses.js";
-import { applyDefaultDate, getMonthsInYear } from "../internals/utils/date-utils.js";
+import { getMonthsInYear } from "../internals/utils/date-utils.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { DIALOG_WIDTH } from "../internals/constants/dimensions.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { useApplyDefaultValuesToDateValidationProps } from "../managers/useDateManager.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
@@ -27,19 +28,13 @@ const useUtilityClasses = classes => {
   return composeClasses(slots, getMonthCalendarUtilityClass, classes);
 };
 export function useMonthCalendarDefaultizedProps(props, name) {
-  const utils = useUtils();
-  const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
     props,
     name
   });
-  return _extends({
-    disableFuture: false,
-    disablePast: false
-  }, themeProps, {
-    monthsPerRow: themeProps.monthsPerRow ?? 3,
-    minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
+  const validationProps = useApplyDefaultValuesToDateValidationProps(themeProps);
+  return _extends({}, themeProps, validationProps, {
+    monthsPerRow: themeProps.monthsPerRow ?? 3
   });
 }
 const MonthCalendarRoot = styled('div', {

package/modern/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/modern/PickersDay/PickersDay.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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 _excluded = ["autoFocus", "className", "classes", "hidden", "isAnimating", "onClick", "onDaySelect", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "children", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,21 +12,21 @@ import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { DAY_SIZE, DAY_MARGIN } from "../internals/constants/dimensions.js";
 import { getPickersDayUtilityClass, pickersDayClasses } from "./pickersDayClasses.js";
+import { usePickerDayOwnerState } from "./usePickerDayOwnerState.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
+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 composeClasses(slots, getPickersDayUtilityClass, classes);
@@ -80,7 +80,7 @@ const styleArg = ({
     }
   }, {
     props: {
-      outsideCurrentMonth: true,
+      isDayOutsideMonth: true,
       showDaysOutsideCurrentMonth: true
     },
     style: {
@@ -89,7 +89,7 @@ const styleArg = ({
   }, {
     props: {
       disableHighlightToday: false,
-      today: true
+      isDayCurrent: true
     },
     style: {
       [`&:not(.${pickersDayClasses.selected})`]: {
@@ -102,7 +102,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 = styled(ButtonBase, {
   name: 'MuiPickersDay',
@@ -131,10 +131,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,
@@ -143,23 +140,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 = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
-    autoFocus,
+  const ownerState = 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 = useUtils();
   const ref = React.useRef(null);
   const handleRef = useForkRef(ref, forwardedRef);

package/modern/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/modern/PickersDay/PickersDay.types.js

@@ -0,0 +1 @@
+export {};

package/modern/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';

package/modern/PickersDay/usePickerDayOwnerState.d.ts

@@ -0,0 +1,14 @@
+import { PickerDayOwnerState } from "./PickersDay.types.js";
+import { PickerValidDate } from "../models/pickers.js";
+export declare function usePickerDayOwnerState(parameters: UsePickerDayOwnerStateParameters): PickerDayOwnerState;
+interface UsePickerDayOwnerStateParameters {
+  day: PickerValidDate;
+  disabled: boolean | undefined;
+  selected: boolean | undefined;
+  today: boolean | undefined;
+  outsideCurrentMonth: boolean | undefined;
+  disableMargin: boolean | undefined;
+  disableHighlightToday: boolean | undefined;
+  showDaysOutsideCurrentMonth: boolean | undefined;
+}
+export {};

package/modern/PickersDay/usePickerDayOwnerState.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
+import { useUtils } from "../internals/hooks/useUtils.js";
+export function usePickerDayOwnerState(parameters) {
+  const {
+    disabled,
+    selected,
+    today,
+    outsideCurrentMonth,
+    day,
+    disableMargin,
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
+  } = parameters;
+  const utils = useUtils();
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  return React.useMemo(() => _extends({}, pickerOwnerState, {
+    day,
+    isDaySelected: selected ?? false,
+    isDayDisabled: disabled ?? false,
+    isDayCurrent: today ?? false,
+    isDayOutsideMonth: outsideCurrentMonth ?? false,
+    isDayStartOfWeek: utils.isSameDay(day, utils.startOfWeek(day)),
+    isDayEndOfWeek: utils.isSameDay(day, utils.endOfWeek(day)),
+    disableMargin: disableMargin ?? false,
+    disableHighlightToday: disableHighlightToday ?? false,
+    showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth ?? false
+  }), [utils, pickerOwnerState, day, selected, disabled, today, outsideCurrentMonth, disableMargin, disableHighlightToday, showDaysOutsideCurrentMonth]);
+}