@mui/x-date-pickers 6.15.0 → 6.16.1

package/CHANGELOG.md

@@ -3,6 +3,150 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.16.1
+
+_Oct 6, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🥧 Support interaction with pie chart
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.1`
+
+- [DataGrid] Add a new demo with sparklines (#9228) @flaviendelangle
+- [DataGrid] Fix autosize missing a few pixels (#10471) @romgrk
+- [DataGrid] Make `disableColumnSelector` demo idempotent (#10548) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.16.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@6.16.1`.
+
+#### `@mui/x-data-grid-premium@6.16.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@6.16.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.1`
+
+- [pickers] Avoid calendar layout shifting when changing views (#10541) @LukasTy
+- [pickers] Fix clearable behavior when disabled (#10542) @noraleonte
+- [pickers] Improve customization playground examples (#10544) @noraleonte
+
+#### `@mui/x-date-pickers-pro@6.16.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@6.16.1`, plus:
+
+- [DateRangePicker] Fix `InputProps` propagation in multi input (#10564) @alexfauquette
+
+### Charts / `@mui/x-charts@6.0.0-alpha.14`
+
+- [charts] Display cursor pointer for pie chart only if `onClick` is provided (#10551) @giladappsforce
+- [charts] Add `onClick` prop to PieChart (#10506) @giladappsforce
+- [charts] Support `slots`/`slotProps` for the tooltip (#10515) @alexfauquette
+
+### Docs
+
+- [docs] Add `DateRangePicker` example with a `Button` trigger (#10485) @LukasTy
+- [docs] Add section about disabling columns panel (#10328) @MBilalShafi
+- [docs] Add section about overriding slots to base concepts (#10421) @noraleonte
+- [docs] Add "What's new" page listing all release announcements (#9727) @joserodolfofreitas
+- [docs] Update RTL Support section of the grid localization docs (#10561) @MBilalShafi
+
+### Core
+
+- [core] Fix casing consistency with legal and marketing content @oliviertassinari
+- [core] Revert the link in the priority support ticket description (#10517) @michelengelen
+- [CHANGELOG] Polish image @oliviertassinari
+
+## 6.16.0
+
+_Sep 29, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add a clearable behavior to all the single input pickers and fields (#9095) @noraleonte
+
+  The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#clearing-the-value).
+
+  <img width="337" height="139" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/3165635/a5407cb6-0b8a-443c-b4b9-1f81ceb4d087">
+
+- 💫 Add Date Picker customization playground (#9581) @noraleonte
+
+  You can play around with style customization options on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#customization).
+
+  We are thrilled to hear your feedback about this functionality!
+
+- 🚀 Fix header filters menu auto closing on render (#10483) @MBilalShafi
+- 🎯 Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
+- 🌍 Improve Russian (ru-RU) locale on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.0`
+
+- [DataGrid] Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
+- [DataGrid] Rename `global` to `globalScope` due to Jest issue (#10470) @romgrk
+- [l10n] Improve Russian (ru-RU) locale (#10464 and #10407) @NKodos
+
+#### `@mui/x-data-grid-pro@6.16.0` [![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@6.16.0`, plus:
+
+- [DataGridPro] Fix header filters menu auto closing on render (#10483) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.16.0` [![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@6.16.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.0`
+
+- [pickers] Add warning to `shouldDisableDate` validation (#10502) @michelengelen
+- [pickers] Implement `clearable` field behavior (#9095) @noraleonte
+- [pickers] Refactor `dayOfWeekFormatter` (#10345) @michelengelen
+
+#### `@mui/x-date-pickers-pro@6.16.0` [![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@6.16.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.13`
+
+- [charts] Share upfront future Pro features (#10465) @oliviertassinari
+
+### Tree View / `@mui/x-tree-view@6.0.0-beta.0`
+
+- [TreeView] Do not try to focus a collapsed node when re-focusing the TreeView (#10422) @flaviendelangle
+- [TreeView] Fix the typing of the `Multiple` generic (#10478) @flaviendelangle
+
+### Docs
+
+- [docs] Correct the typo in data grid api docs (#10477) @MBilalShafi
+- [docs] Add customization playground (#9581) @noraleonte
+- [docs] Fix Tree View product ID (#10428) @oliviertassinari
+- [docs] Fix demo crashing when all rows are deleted (#10438) @cherniavskii
+- [docs] Fix mobile scrollbar column resize (#10455) @oliviertassinari
+- [docs] Fix usage of `GridRenderCellParams` interface (#10435) @cherniavskii
+
+### Core
+
+- [core] Fix typo in header data grid quick filter @oliviertassinari
+- [core] Group D3 renovate PRs (#10480) @flaviendelangle
+- [core] Link the priority support page (#10495) @michelengelen
+- [core] Move the pickers describes to the test utils folder (#10490) @flaviendelangle
+- [core] Priority Support casing normalization @oliviertassinari
+- [core] Remove automated DataGrid performance tests (#10414) @romgrk
+- [core] Sync `prism-okaidia.css` with docs-infra @oliviertassinari
+- [core] Update issue actions & templates (#10375) @romgrk
+- [core] Update release guide (#10468) @DanailH
+
 ## 6.15.0
 
 _Sep 22, 2023_

package/DateCalendar/DateCalendar.js

@@ -21,6 +21,7 @@ import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceA
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { VIEW_HEIGHT } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -62,7 +63,8 @@ const DateCalendarRoot = styled(PickerViewRoot, {
   overridesResolver: (props, styles) => styles.root
 })({
   display: 'flex',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  height: VIEW_HEIGHT
 });
 const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   name: 'MuiDateCalendar',
@@ -375,9 +377,10 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter's method `getWeekdays`.
+   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
+   * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (day) => day.charAt(0).toUpperCase()
+   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -503,6 +506,9 @@ process.env.NODE_ENV !== "production" ? DateCalendar.propTypes = {
   renderLoading: PropTypes.func,
   /**
    * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
    * @template TDate
    * @param {TDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.

package/DateCalendar/DateCalendar.types.d.ts

@@ -24,7 +24,7 @@ export interface DateCalendarSlotsComponent<TDate> extends PickersCalendarHeader
 export interface DateCalendarSlotsComponentsProps<TDate> extends PickersCalendarHeaderSlotsComponentsProps<TDate>, DayCalendarSlotsComponentsProps<TDate> {
     calendarHeader?: SlotComponentProps<typeof PickersCalendarHeader, {}, DateCalendarProps<TDate>>;
 }
-export interface ExportedDateCalendarProps<TDate> extends ExportedDayCalendarProps, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, TimezoneProps {
+export interface ExportedDateCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, ExportedMonthCalendarProps, ExportedYearCalendarProps, BaseDateValidationProps<TDate>, DayValidationProps<TDate>, YearValidationProps<TDate>, MonthValidationProps<TDate>, TimezoneProps {
     /**
      * Default calendar month displayed when `value` and `defaultValue` are empty.
      */

package/DateCalendar/DayCalendar.d.ts

@@ -22,7 +22,7 @@ export interface DayCalendarSlotsComponentsProps<TDate> {
         selected: boolean;
     }>;
 }
-export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
+export interface ExportedDayCalendarProps<TDate> extends ExportedPickersDayProps {
     /**
      * If `true`, calls `renderLoading` instead of rendering the day calendar.
      * Can be used to preload information and show it in calendar.
@@ -37,11 +37,12 @@ export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
     renderLoading?: () => React.ReactNode;
     /**
      * Formats the day of week displayed in the calendar header.
-     * @param {string} day The day of week provided by the adapter's method `getWeekdays`.
+     * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
+     * @param {TDate} date The date of the day of week provided by the adapter.
      * @returns {string} The name to display.
-     * @default (day) => day.charAt(0).toUpperCase()
+     * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
      */
-    dayOfWeekFormatter?: (day: string) => string;
+    dayOfWeekFormatter?: (day: string, date: TDate) => string;
     /**
      * If `true`, the week number will be display in the calendar.
      */
@@ -53,7 +54,7 @@ export interface ExportedDayCalendarProps extends ExportedPickersDayProps {
      */
     fixedWeekNumber?: number;
 }
-export interface DayCalendarProps<TDate> extends ExportedDayCalendarProps, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, Required<BaseDateValidationProps<TDate>>, DefaultizedProps<TimezoneProps, 'timezone'>, SlotsAndSlotProps<DayCalendarSlotsComponent<TDate>, DayCalendarSlotsComponentsProps<TDate>> {
+export interface DayCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, DayValidationProps<TDate>, MonthValidationProps<TDate>, YearValidationProps<TDate>, Required<BaseDateValidationProps<TDate>>, DefaultizedProps<TimezoneProps, 'timezone'>, SlotsAndSlotProps<DayCalendarSlotsComponent<TDate>, DayCalendarSlotsComponentsProps<TDate>> {
     autoFocus?: boolean;
     className?: string;
     currentMonth: TDate;

package/DateCalendar/DayCalendar.js

@@ -14,7 +14,7 @@ import { useUtils, useNow, useLocaleText } from '../internals/hooks/useUtils';
 import { DAY_SIZE, DAY_MARGIN } from '../internals/constants/dimensions';
 import { PickersSlideTransition } from './PickersSlideTransition';
 import { useIsDateDisabled } from './useIsDateDisabled';
-import { findClosestEnabledDate } from '../internals/utils/date-utils';
+import { findClosestEnabledDate, getWeekdays } from '../internals/utils/date-utils';
 import { getDayCalendarUtilityClass } from './dayCalendarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,6 +23,7 @@ const useUtilityClasses = ownerState => {
     classes
   } = ownerState;
   const slots = {
+    root: ['root'],
     header: ['header'],
     weekDayLabel: ['weekDayLabel'],
     loadingContainer: ['loadingContainer'],
@@ -34,8 +35,12 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDayCalendarUtilityClass, classes);
 };
-const defaultDayOfWeekFormatter = day => day.charAt(0).toUpperCase();
 const weeksContainerHeight = (DAY_SIZE + DAY_MARGIN * 2) * 6;
+const PickersCalendarDayRoot = styled('div', {
+  name: 'MuiDayCalendar',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})({});
 const PickersCalendarDayHeader = styled('div', {
   name: 'MuiDayCalendar',
   slot: 'Header',
@@ -62,7 +67,7 @@ const PickersCalendarWeekDayLabel = styled(Typography, {
   color: (theme.vars || theme).palette.text.secondary
 }));
 const PickersCalendarWeekNumberLabel = styled(Typography, {
-  name: 'MuiDayPicker',
+  name: 'MuiDayCalendar',
   slot: 'WeekNumberLabel',
   overridesResolver: (_, styles) => styles.weekNumberLabel
 })(({
@@ -78,7 +83,7 @@ const PickersCalendarWeekNumberLabel = styled(Typography, {
   color: theme.palette.text.disabled
 }));
 const PickersCalendarWeekNumber = styled(Typography, {
-  name: 'MuiDayPicker',
+  name: 'MuiDayCalendar',
   slot: 'WeekNumber',
   overridesResolver: (_, styles) => styles.weekNumber
 })(({
@@ -236,7 +241,7 @@ export function DayCalendar(inProps) {
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
-    dayOfWeekFormatter = defaultDayOfWeekFormatter,
+    dayOfWeekFormatter: dayOfWeekFormatterFromProps,
     hasFocus,
     onFocusedViewChange,
     gridLabelId,
@@ -250,6 +255,9 @@ export function DayCalendar(inProps) {
   const classes = useUtilityClasses(props);
   const theme = useTheme();
   const isRTL = theme.direction === 'rtl';
+
+  // before we could define this outside of the component scope, but now we need utils, which is only defined here
+  const dayOfWeekFormatter = dayOfWeekFormatterFromProps || ((_day, date) => utils.format(date, 'weekdayShort').charAt(0).toUpperCase());
   const isDateDisabled = useIsDateDisabled({
     shouldDisableDate,
     shouldDisableMonth,
@@ -391,9 +399,10 @@ export function DayCalendar(inProps) {
     }
     return toDisplay;
   }, [currentMonth, fixedWeekNumber, utils, timezone]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(PickersCalendarDayRoot, {
     role: "grid",
     "aria-labelledby": gridLabelId,
+    className: classes.root,
     children: [/*#__PURE__*/_jsxs(PickersCalendarDayHeader, {
       role: "row",
       className: classes.header,
@@ -403,14 +412,17 @@ export function DayCalendar(inProps) {
         "aria-label": localeText.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: localeText.calendarWeekNumberHeaderText
-      }), utils.getWeekdays().map((day, i) => {
+      }), getWeekdays(utils, now).map((weekday, i) => {
         var _dayOfWeekFormatter;
+        // regression-prevention:
+        // since 'weekdayShort' now always returns an abbreviated form we slice the first 2 letters from it.
+        const day = utils.format(weekday, 'weekdayShort').slice(0, 2);
         return /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
           variant: "caption",
           role: "columnheader",
           "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
           className: classes.weekDayLabel,
-          children: (_dayOfWeekFormatter = dayOfWeekFormatter == null ? void 0 : dayOfWeekFormatter(day)) != null ? _dayOfWeekFormatter : day
+          children: (_dayOfWeekFormatter = dayOfWeekFormatter == null ? void 0 : dayOfWeekFormatter(day, weekday)) != null ? _dayOfWeekFormatter : day
         }, day + i.toString());
       })]
     }), loading ? /*#__PURE__*/_jsx(PickersCalendarLoadingContainer, {

package/DateCalendar/PickersFadeTransitionGroup.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import Fade from '@mui/material/Fade';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { TransitionGroup } from 'react-transition-group';
+import Fade from '@mui/material/Fade';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
 import { getPickersFadeTransitionGroupUtilityClass } from './pickersFadeTransitionGroupClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -15,7 +15,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes);
 };
-const animationDuration = 500;
 const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   name: 'MuiPickersFadeTransitionGroup',
   slot: 'Root',
@@ -40,6 +39,7 @@ export function PickersFadeTransitionGroup(inProps) {
     transKey
   } = props;
   const classes = useUtilityClasses(props);
+  const theme = useTheme();
   if (reduceAnimations) {
     return children;
   }
@@ -50,8 +50,8 @@ export function PickersFadeTransitionGroup(inProps) {
       mountOnEnter: true,
       unmountOnExit: true,
       timeout: {
-        appear: animationDuration,
-        enter: animationDuration / 2,
+        appear: theme.transitions.duration.enteringScreen,
+        enter: theme.transitions.duration.enteringScreen,
         exit: 0
       },
       children: children

package/DateCalendar/PickersSlideTransition.d.ts

@@ -12,7 +12,6 @@ export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'
     slideDirection: SlideDirection;
     transKey: React.Key;
 }
-export declare const slideAnimationDuration = 350;
 /**
  * @ignore - do not document.
  */

package/DateCalendar/PickersSlideTransition.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +22,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
 };
-export const slideAnimationDuration = 350;
 const PickersSlideTransitionRoot = styled(TransitionGroup, {
   name: 'MuiPickersSlideTransition',
   slot: 'Root',
@@ -43,7 +42,7 @@ const PickersSlideTransitionRoot = styled(TransitionGroup, {
   theme
 }) => {
   const slideTransition = theme.transitions.create('transform', {
-    duration: slideAnimationDuration,
+    duration: theme.transitions.duration.complex,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
   });
   return {
@@ -105,6 +104,7 @@ export function PickersSlideTransition(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
+  const theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {
       className: clsx(classes.root, className),
@@ -126,7 +126,7 @@ export function PickersSlideTransition(inProps) {
     children: /*#__PURE__*/_jsx(CSSTransition, _extends({
       mountOnEnter: true,
       unmountOnExit: true,
-      timeout: slideAnimationDuration,
+      timeout: theme.transitions.duration.complex,
       classNames: transitionClasses
     }, other, {
       children: children

package/DateCalendar/dayCalendarClasses.d.ts

@@ -1,4 +1,6 @@
 export interface DayCalendarClasses {
+    /** Styles applied to the root element. */
+    root: string;
     /** Styles applied to the header element. */
     header: string;
     /** Styles applied to the week day label element. */

package/DateCalendar/dayCalendarClasses.js

@@ -1,3 +1,3 @@
 import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
 export const getDayCalendarUtilityClass = slot => generateUtilityClass('MuiDayCalendar', slot);
-export const dayPickerClasses = generateUtilityClasses('MuiDayCalendar', ['header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer', 'weekNumberLabel', 'weekNumber']);
+export const dayPickerClasses = generateUtilityClasses('MuiDayCalendar', ['root', 'header', 'weekDayLabel', 'loadingContainer', 'slideTransition', 'monthContainer', 'weekContainer', 'weekNumberLabel', 'weekNumber']);

package/DateField/DateField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly"];
+  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -10,6 +10,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useDateField } from './useDateField';
+import { useClearableField } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
@@ -51,13 +52,28 @@ const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref)
       onPaste,
       onKeyDown,
       inputMode,
-      readOnly
+      readOnly,
+      clearable,
+      onClear
     } = _useDateField,
     fieldProps = _objectWithoutPropertiesLoose(_useDateField, _excluded3);
+  const {
+    InputProps: ProcessedInputProps,
+    fieldProps: processedFieldProps
+  } = useClearableField({
+    onClear,
+    clearable,
+    fieldProps,
+    InputProps: fieldProps.InputProps,
+    slots,
+    slotProps,
+    components,
+    componentsProps
+  });
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
-  }, fieldProps, {
-    InputProps: _extends({}, fieldProps.InputProps, {
+  }, processedFieldProps, {
+    InputProps: _extends({}, ProcessedInputProps, {
       readOnly
     }),
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -79,6 +95,11 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    */
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable: PropTypes.bool,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -207,6 +228,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * Callback fired when the clear button is clicked.
+   */
+  onClear: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -253,6 +278,9 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   })]),
   /**
    * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
    * @template TDate
    * @param {TDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.

package/DateField/DateField.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
+import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals';
 import { DateValidationError, FieldSection } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
@@ -18,7 +19,7 @@ export type UseDateFieldComponentProps<TDate, TChildProps extends {}> = Omit<TCh
 export interface DateFieldProps<TDate> extends UseDateFieldComponentProps<TDate, FieldsTextFieldProps>, SlotsAndSlotProps<DateFieldSlotsComponent, DateFieldSlotsComponentsProps<TDate>> {
 }
 export type DateFieldOwnerState<TDate> = DateFieldProps<TDate>;
-export interface DateFieldSlotsComponent {
+export interface DateFieldSlotsComponent extends FieldSlotsComponents {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -26,6 +27,6 @@ export interface DateFieldSlotsComponent {
      */
     TextField?: React.ElementType;
 }
-export interface DateFieldSlotsComponentsProps<TDate> {
+export interface DateFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, DateFieldOwnerState<TDate>>;
 }

package/DatePicker/DatePicker.js

@@ -68,9 +68,10 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   componentsProps: PropTypes.object,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {string} day The day of week provided by the adapter's method `getWeekdays`.
+   * @param {string} day The day of week provided by the adapter.  Deprecated, will be removed in v7: Use `date` instead.
+   * @param {TDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (day) => day.charAt(0).toUpperCase()
+   * @default (_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: PropTypes.func,
   /**
@@ -270,6 +271,9 @@ process.env.NODE_ENV !== "production" ? DatePicker.propTypes = {
   })]),
   /**
    * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
    * @template TDate
    * @param {TDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.

package/DateTimeField/DateTimeField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["components", "componentsProps", "slots", "slotProps", "InputProps", "inputProps"],
   _excluded2 = ["inputRef"],
-  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly"];
+  _excluded3 = ["ref", "onPaste", "onKeyDown", "inputMode", "readOnly", "clearable", "onClear"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MuiTextField from '@mui/material/TextField';
@@ -10,6 +10,7 @@ import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
 import { refType } from '@mui/utils';
 import { useDateTimeField } from './useDateTimeField';
+import { useClearableField } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
@@ -51,13 +52,28 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
       onPaste,
       onKeyDown,
       inputMode,
-      readOnly
+      readOnly,
+      clearable,
+      onClear
     } = _useDateTimeField,
     fieldProps = _objectWithoutPropertiesLoose(_useDateTimeField, _excluded3);
+  const {
+    InputProps: ProcessedInputProps,
+    fieldProps: processedFieldProps
+  } = useClearableField({
+    onClear,
+    clearable,
+    fieldProps,
+    InputProps: fieldProps.InputProps,
+    slots,
+    slotProps,
+    components,
+    componentsProps
+  });
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
-  }, fieldProps, {
-    InputProps: _extends({}, fieldProps.InputProps, {
+  }, processedFieldProps, {
+    InputProps: _extends({}, ProcessedInputProps, {
       readOnly
     }),
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -84,6 +100,11 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    */
   autoFocus: PropTypes.bool,
   className: PropTypes.string,
+  /**
+   * If `true`, a clear button will be shown in the field allowing value clearing.
+   * @default false
+   */
+  clearable: PropTypes.bool,
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -240,6 +261,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * Callback fired when the clear button is clicked.
+   */
+  onClear: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -294,6 +319,9 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific date.
+   *
+   * Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
+   *
    * @template TDate
    * @param {TDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.