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

package/CHANGELOG.md

@@ -5,6 +5,177 @@
 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.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![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.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![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.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![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.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![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.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![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.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
+## 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/DateRangeCalendar/DateRangeCalendar.js

@@ -81,25 +81,20 @@ const InnerDayCalendarForRange = (0, _styles.styled)(_internals.DayCalendar)(({
 }));
 const DayCalendarForRange = InnerDayCalendarForRange;
 function useDateRangeCalendarDefaultizedProps(props, name) {
-  const utils = (0, _internals.useUtils)();
-  const defaultDates = (0, _internals.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
   const reduceAnimations = (0, _internals.useReduceAnimations)(themeProps.reduceAnimations);
-  return (0, _extends2.default)({}, themeProps, {
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateValidationProps)(themeProps);
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     renderLoading: themeProps.renderLoading ?? (() => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: "..."
     })),
     reduceAnimations,
     loading: props.loading ?? false,
-    disablePast: props.disablePast ?? false,
-    disableFuture: props.disableFuture ?? false,
     openTo: themeProps.openTo ?? 'day',
     views: themeProps.views ?? ['day'],
-    minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
     calendars: themeProps.calendars ?? 2,
     disableDragEditing: themeProps.disableDragEditing ?? false,
     availableRangePositions: themeProps.availableRangePositions ?? ['start', 'end']

package/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -5,7 +5,7 @@ import { Theme } from '@mui/material/styles';
 import { DefaultizedProps } from '@mui/x-internals/types';
 import { PickerOwnerState, PickerValidDate, TimezoneProps } from '@mui/x-date-pickers/models';
 import { PickersCalendarHeader, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { PickerDayOwnerState } from '@mui/x-date-pickers/DateCalendar';
+import { PickerDayOwnerState } from '@mui/x-date-pickers/PickersDay';
 import { BaseDateValidationProps, ExportedDayCalendarProps, DayCalendarSlots, DayCalendarSlotProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps, ExportedUseViewsOptions, PickerRangeValue, FormProps } from '@mui/x-date-pickers/internals';
 import { RangePosition } from "../models/index.js";
 import { DateRangeCalendarClasses } from "./dateRangeCalendarClasses.js";

package/DateRangePicker/DateRangePicker.js

@@ -13,6 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-date-pickers/internals");
 var _utils = require("@mui/utils");
 var _DesktopDateRangePicker = require("../DesktopDateRangePicker");
 var _MobileDateRangePicker = require("../MobileDateRangePicker");
@@ -34,7 +35,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     name: 'MuiDateRangePicker'
   });
   const {
-      desktopModeMediaQuery = '@media (pointer: fine)'
+      desktopModeMediaQuery = _internals.DEFAULT_DESKTOP_MODE_MEDIA_QUERY
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
@@ -131,6 +132,7 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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/DateRangePicker/shared.js

@@ -12,12 +12,11 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-date-pickers/internals");
 var _DateRangePickerToolbar = require("./DateRangePickerToolbar");
 function useDateRangePickerDefaultizedProps(props, name) {
-  const utils = (0, _internals.useUtils)();
-  const defaultDates = (0, _internals.useDefaultDates)();
   const themeProps = (0, _styles.useThemeProps)({
     props,
     name
   });
+  const validationProps = (0, _internals.useApplyDefaultValuesToDateValidationProps)(themeProps);
   const localeText = React.useMemo(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
@@ -26,12 +25,8 @@ function useDateRangePickerDefaultizedProps(props, name) {
       dateRangePickerToolbarTitle: themeProps.localeText.toolbarTitle
     });
   }, [themeProps.localeText]);
-  return (0, _extends2.default)({}, themeProps, {
+  return (0, _extends2.default)({}, themeProps, validationProps, {
     localeText,
-    disableFuture: themeProps.disableFuture ?? false,
-    disablePast: themeProps.disablePast ?? false,
-    minDate: (0, _internals.applyDefaultDate)(utils, themeProps.minDate, defaultDates.minDate),
-    maxDate: (0, _internals.applyDefaultDate)(utils, themeProps.maxDate, defaultDates.maxDate),
     slots: (0, _extends2.default)({
       toolbar: _DateRangePickerToolbar.DateRangePickerToolbar
     }, themeProps.slots)

package/DateRangePickerDay/DateRangePickerDay.d.ts

@@ -1,45 +1,5 @@
 import * as React from 'react';
-import { PickersDayProps } from '@mui/x-date-pickers/PickersDay';
-import { DateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
-export interface DateRangePickerDayProps extends Omit<PickersDayProps, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> {
-  /**
-   * Set to `true` if the `day` is in a highlighted date range.
-   */
-  isHighlighting: boolean;
-  /**
-   * Set to `true` if the `day` is the end of a highlighted date range.
-   */
-  isEndOfHighlighting: boolean;
-  /**
-   * Set to `true` if the `day` is the start of a highlighted date range.
-   */
-  isStartOfHighlighting: boolean;
-  /**
-   * Set to `true` if the `day` is in a preview date range.
-   */
-  isPreviewing: boolean;
-  /**
-   * Set to `true` if the `day` is the end of a previewing date range.
-   */
-  isEndOfPreviewing: boolean;
-  /**
-   * Set to `true` if the `day` is the start of a previewing date range.
-   */
-  isStartOfPreviewing: boolean;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<DateRangePickerDayClasses>;
-  /**
-   * Indicates if the day should be visually selected.
-   */
-  isVisuallySelected?: boolean;
-  /**
-   * If `true`, the day can be dragged to change the current date range.
-   * @default false
-   */
-  draggable?: boolean;
-}
+import { DateRangePickerDayProps } from "./DateRangePickerDay.types.js";
 type DateRangePickerDayComponent = (props: DateRangePickerDayProps & React.RefAttributes<HTMLButtonElement>) => React.JSX.Element;
 /**
  * Demos:

package/DateRangePickerDay/DateRangePickerDay.js

@@ -20,29 +20,31 @@ var _PickersDay = require("@mui/x-date-pickers/PickersDay");
 var _dateRangePickerDayClasses = require("./dateRangePickerDayClasses");
 var _releaseInfo = require("../internals/utils/releaseInfo");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "day", "outsideCurrentMonth", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "selected", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell"];
+const _excluded = ["className", "classes", "isEndOfHighlighting", "isEndOfPreviewing", "isHighlighting", "isPreviewing", "isStartOfHighlighting", "isStartOfPreviewing", "isVisuallySelected", "sx", "draggable", "isFirstVisibleCell", "isLastVisibleCell", "day", "selected", "disabled", "today", "outsideCurrentMonth", "disableMargin", "disableHighlightToday", "showDaysOutsideCurrentMonth"];
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    isHighlighting,
-    outsideCurrentMonth,
-    isStartOfHighlighting,
-    isStartOfMonth,
-    isEndOfHighlighting,
-    isEndOfMonth,
-    isPreviewing,
-    isStartOfPreviewing,
-    isEndOfPreviewing,
-    isFirstVisibleCell,
-    isLastVisibleCell,
-    isHiddenDayFiller,
-    selected,
-    classes
+    // Properties shared with PickersDay
+    isDaySelected,
+    isDayOutsideMonth,
+    // Range-specific properties (present in the Base UI implementation)
+    isDaySelectionStart,
+    isDaySelectionEnd,
+    isDayInsideSelection,
+    isDayPreviewStart,
+    isDayPreviewEnd,
+    isDayPreviewed,
+    // Range-specific properties (specific to the MUI implementation)
+    isDayStartOfMonth,
+    isDayEndOfMonth,
+    isDayFirstVisibleCell,
+    isDayLastVisibleCell,
+    isDayFillerCell
   } = ownerState;
   const slots = {
-    root: ['root', isHighlighting && 'rangeIntervalDayHighlight', isStartOfHighlighting && 'rangeIntervalDayHighlightStart', isEndOfHighlighting && 'rangeIntervalDayHighlightEnd', outsideCurrentMonth && 'outsideCurrentMonth', isStartOfMonth && 'startOfMonth', isEndOfMonth && 'endOfMonth', isFirstVisibleCell && 'firstVisibleCell', isLastVisibleCell && 'lastVisibleCell', isHiddenDayFiller && 'hiddenDayFiller'],
-    rangeIntervalPreview: ['rangeIntervalPreview', isPreviewing && 'rangeIntervalDayPreview', (isStartOfPreviewing || isStartOfMonth) && 'rangeIntervalDayPreviewStart', (isEndOfPreviewing || isEndOfMonth) && 'rangeIntervalDayPreviewEnd'],
-    day: ['day', !selected && 'notSelectedDate', !isHighlighting && 'dayOutsideRangeInterval', !selected && isHighlighting && 'dayInsideRangeInterval']
+    root: ['root', isDaySelected && 'rangeIntervalDayHighlight', isDaySelectionStart && 'rangeIntervalDayHighlightStart', isDaySelectionEnd && 'rangeIntervalDayHighlightEnd', isDayOutsideMonth && 'outsideCurrentMonth', isDayStartOfMonth && 'startOfMonth', isDayEndOfMonth && 'endOfMonth', isDayFirstVisibleCell && 'firstVisibleCell', isDayLastVisibleCell && 'lastVisibleCell', isDayFillerCell && 'hiddenDayFiller'],
+    rangeIntervalPreview: ['rangeIntervalPreview', isDayPreviewed && 'rangeIntervalDayPreview', (isDayPreviewStart || isDayStartOfMonth) && 'rangeIntervalDayPreviewStart', (isDayPreviewEnd || isDayEndOfMonth) && 'rangeIntervalDayPreviewEnd'],
+    day: ['day', !isDaySelected && 'notSelectedDate', !isDaySelected && 'dayOutsideRangeInterval', !isDayInsideSelection && 'dayInsideRangeInterval']
   };
   return (0, _composeClasses.default)(slots, _dateRangePickerDayClasses.getDateRangePickerDayUtilityClass, classes);
 };
@@ -81,7 +83,7 @@ const DateRangePickerDayRoot = (0, _styles.styled)('div', {
 }) => ({
   variants: [{
     props: {
-      isHiddenDayFiller: false
+      isDayFillerCell: false
     },
     style: {
       [`&:first-of-type .${_dateRangePickerDayClasses.dateRangePickerDayClasses.rangeIntervalDayPreview}`]: (0, _extends2.default)({}, startBorderStyle, {
@@ -93,8 +95,8 @@ const DateRangePickerDayRoot = (0, _styles.styled)('div', {
     }
   }, {
     props: {
-      isHiddenDayFiller: false,
-      isHighlighting: true
+      isDayFillerCell: false,
+      isDaySelected: true
     },
     style: {
       borderRadius: 0,
@@ -106,22 +108,22 @@ const DateRangePickerDayRoot = (0, _styles.styled)('div', {
   }, {
     props: ({
       ownerState: {
-        isHiddenDayFiller,
-        isStartOfHighlighting,
-        isFirstVisibleCell
+        isDayFillerCell,
+        isDaySelectionStart,
+        isDayFirstVisibleCell
       }
-    }) => !isHiddenDayFiller && (isStartOfHighlighting || isFirstVisibleCell),
+    }) => !isDayFillerCell && (isDaySelectionStart || isDayFirstVisibleCell),
     style: (0, _extends2.default)({}, startBorderStyle, {
       paddingLeft: 0
     })
   }, {
     props: ({
       ownerState: {
-        isHiddenDayFiller,
-        isEndOfHighlighting,
-        isLastVisibleCell
+        isDayFillerCell,
+        isDaySelectionEnd,
+        isDayLastVisibleCell
       }
-    }) => !isHiddenDayFiller && (isEndOfHighlighting || isLastVisibleCell),
+    }) => !isDayFillerCell && (isDaySelectionEnd || isDayLastVisibleCell),
     style: (0, _extends2.default)({}, endBorderStyle, {
       paddingRight: 0
     })
@@ -144,8 +146,8 @@ const DateRangePickerDayRangeIntervalPreview = (0, _styles.styled)('div', {
   border: '2px solid transparent',
   variants: [{
     props: {
-      isPreviewing: true,
-      isHiddenDayFiller: false
+      isDayPreviewed: true,
+      isDayFillerCell: false
     },
     style: {
       borderRadius: 0,
@@ -156,24 +158,24 @@ const DateRangePickerDayRangeIntervalPreview = (0, _styles.styled)('div', {
   }, {
     props: ({
       ownerState: {
-        isPreviewing,
-        isHiddenDayFiller,
-        isStartOfPreviewing,
-        isFirstVisibleCell
+        isDayPreviewed,
+        isDayFillerCell,
+        isDayPreviewStart,
+        isDayFirstVisibleCell
       }
-    }) => isPreviewing && !isHiddenDayFiller && (isStartOfPreviewing || isFirstVisibleCell),
+    }) => isDayPreviewed && !isDayFillerCell && (isDayPreviewStart || isDayFirstVisibleCell),
     style: (0, _extends2.default)({
       borderLeftColor: (theme.vars || theme).palette.divider
     }, startBorderStyle)
   }, {
     props: ({
       ownerState: {
-        isPreviewing,
-        isHiddenDayFiller,
-        isEndOfPreviewing,
-        isLastVisibleCell
+        isDayPreviewed,
+        isDayFillerCell,
+        isDayPreviewEnd,
+        isDayLastVisibleCell
       }
-    }) => isPreviewing && !isHiddenDayFiller && (isEndOfPreviewing || isLastVisibleCell),
+    }) => isDayPreviewed && !isDayFillerCell && (isDayPreviewEnd || isDayLastVisibleCell),
     style: (0, _extends2.default)({
       borderRightColor: (theme.vars || theme).palette.divider
     }, endBorderStyle)
@@ -212,34 +214,60 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
   });
   const {
       className,
-      day,
-      outsideCurrentMonth,
+      classes: classesProp,
+      isEndOfHighlighting,
+      isEndOfPreviewing,
       isHighlighting,
       isPreviewing,
-      selected = false,
+      isStartOfHighlighting,
+      isStartOfPreviewing,
       isVisuallySelected,
       sx,
       draggable,
       isFirstVisibleCell,
-      isLastVisibleCell
+      isLastVisibleCell,
+      day,
+      selected,
+      disabled,
+      today,
+      outsideCurrentMonth,
+      disableMargin,
+      disableHighlightToday,
+      showDaysOutsideCurrentMonth
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   (0, _xLicense.useLicenseVerifier)('x-date-pickers-pro', releaseInfo);
   const utils = (0, _internals.useUtils)();
-  const isEndOfMonth = utils.isSameDay(day, utils.endOfMonth(day));
-  const isStartOfMonth = utils.isSameDay(day, utils.startOfMonth(day));
   const shouldRenderHighlight = isHighlighting && !outsideCurrentMonth;
   const shouldRenderPreview = isPreviewing && !outsideCurrentMonth;
-  const ownerState = (0, _extends2.default)({}, props, {
+  const pickersDayOwnerState = (0, _internals.usePickerDayOwnerState)({
+    day,
     selected,
-    isStartOfMonth,
-    isEndOfMonth,
-    draggable,
-    isFirstVisibleCell,
-    isLastVisibleCell,
-    isHiddenDayFiller: outsideCurrentMonth && !other.showDaysOutsideCurrentMonth
+    disabled,
+    today,
+    outsideCurrentMonth,
+    disableMargin,
+    disableHighlightToday,
+    showDaysOutsideCurrentMonth
+  });
+  const ownerState = (0, _extends2.default)({}, pickersDayOwnerState, {
+    // Properties that the Base UI implementation will have
+    isDaySelectionStart: isStartOfHighlighting,
+    isDaySelectionEnd: isEndOfHighlighting,
+    isDayInsideSelection: isHighlighting && !isStartOfHighlighting && !isEndOfHighlighting,
+    isDaySelected: isHighlighting,
+    isDayPreviewed: isPreviewing,
+    isDayPreviewStart: isStartOfPreviewing,
+    isDayPreviewEnd: isEndOfPreviewing,
+    isDayInsidePreview: isPreviewing && !isStartOfPreviewing && !isEndOfPreviewing,
+    // Properties specific to the MUI implementation (some might be removed in the next major)
+    isDayStartOfMonth: utils.isSameDay(day, utils.startOfMonth(day)),
+    isDayEndOfMonth: utils.isSameDay(day, utils.endOfMonth(day)),
+    isDayFirstVisibleCell: isFirstVisibleCell,
+    isDayLastVisibleCell: isLastVisibleCell,
+    isDayFillerCell: outsideCurrentMonth && !showDaysOutsideCurrentMonth
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerDayRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
@@ -249,10 +277,14 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
       ownerState: ownerState,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePickerDayDay, (0, _extends2.default)({}, other, {
         ref: ref,
-        disableMargin: true,
         day: day,
         selected: isVisuallySelected,
+        disabled: disabled,
+        today: today,
         outsideCurrentMonth: outsideCurrentMonth,
+        disableMargin: true,
+        disableHighlightToday: disableHighlightToday,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
         className: classes.day,
         ownerState: ownerState,
         draggable: draggable,

package/DateRangePickerDay/DateRangePickerDay.types.d.ts

@@ -0,0 +1,91 @@
+import { PickerDayOwnerState, PickersDayProps } from '@mui/x-date-pickers/PickersDay';
+import { DateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
+export interface DateRangePickerDayProps extends Omit<PickersDayProps, 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown'> {
+  /**
+   * Set to `true` if the `day` is in a highlighted date range.
+   */
+  isHighlighting: boolean;
+  /**
+   * Set to `true` if the `day` is the end of a highlighted date range.
+   */
+  isEndOfHighlighting: boolean;
+  /**
+   * Set to `true` if the `day` is the start of a highlighted date range.
+   */
+  isStartOfHighlighting: boolean;
+  /**
+   * Set to `true` if the `day` is in a preview date range.
+   */
+  isPreviewing: boolean;
+  /**
+   * Set to `true` if the `day` is the end of a previewing date range.
+   */
+  isEndOfPreviewing: boolean;
+  /**
+   * Set to `true` if the `day` is the start of a previewing date range.
+   */
+  isStartOfPreviewing: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DateRangePickerDayClasses>;
+  /**
+   * Indicates if the day should be visually selected.
+   */
+  isVisuallySelected?: boolean;
+  /**
+   * If `true`, the day can be dragged to change the current date range.
+   * @default false
+   */
+  draggable?: boolean;
+}
+export interface DateRangePickerDayOwnerState extends PickerDayOwnerState {
+  /**
+   * Whether the day is the first day of the selected range.
+   */
+  isDaySelectionStart: boolean;
+  /**
+   * Whether the day is the last day of the selected range.
+   */
+  isDaySelectionEnd: boolean;
+  /**
+   * Whether the day is within the selected range and is not its first or last day.
+   */
+  isDayInsideSelection: boolean;
+  /**
+   * Whether the day is within the preview range.
+   */
+  isDayPreviewed: boolean;
+  /**
+   * Whether the day is the first day of the preview range.
+   */
+  isDayPreviewStart: boolean;
+  /**
+   * Whether the day is the last day of the preview range.
+   */
+  isDayPreviewEnd: boolean;
+  /**
+   * Whether the day is within the preview range and is not its first or last day.
+   */
+  isDayInsidePreview: boolean;
+  /**
+   * Whether the day is the first day of the month.
+   */
+  isDayStartOfMonth: boolean;
+  /**
+   * Whether the day is the last day of the month.
+   */
+  isDayEndOfMonth: boolean;
+  /**
+   * Whether the day is the first visible cell of the month it's being rendered in.
+   */
+  isDayFirstVisibleCell: boolean;
+  /**
+   * Whether the day is the last visible cell of the month it's being rendered in.
+   */
+  isDayLastVisibleCell: boolean;
+  /**
+   * Whether the day is a filler day (its content is hidden).
+   */
+  isDayFillerCell: boolean;
+}

package/DateRangePickerDay/DateRangePickerDay.types.js

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

package/DateRangePickerDay/index.d.ts

@@ -1,4 +1,4 @@
 export { DateRangePickerDay } from "./DateRangePickerDay.js";
-export type { DateRangePickerDayProps } from './DateRangePickerDay';
+export type { DateRangePickerDayProps, DateRangePickerDayOwnerState } from './DateRangePickerDay.types';
 export { getDateRangePickerDayUtilityClass, dateRangePickerDayClasses } from "./dateRangePickerDayClasses.js";
 export type { DateRangePickerDayClasses, DateRangePickerDayClassKey } from './dateRangePickerDayClasses';