@mui/x-date-pickers 6.14.0 → 6.16.0

package/CHANGELOG.md

@@ -3,6 +3,173 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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="380" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/72460825/e4a66169-83b5-4579-b9f6-6e15bb528411">
+
+- 💫 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_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Implement columns auto-sizing (#10180) @romgrk
+- 🎁 Add support for `getRowsToExport` option to print export on the data grid (#10084) @zreecespieces
+- 🌍 Improve Finnish (fi-FI) locale
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.15.0`
+
+- [DataGrid] Add support for `getRowsToExport` option to print export (#10084) @zreecespieces
+- [DataGrid] Fix dev warning about `InputLabelProps` (#10413) @romgrk
+- [DataGrid] Refactor `GridMenu` prop `onClickAway` to `onClose` (#10411) @romgrk
+- [DataGrid] Restore focus after `GridMenu` closes (#10412) @romgrk
+- [DataGrid] Fix typing of `GridActionsCellItem` (#10344) @romgrk
+- [DataGrid] Hide `eval` from bundlers (#10329) @romgrk
+- [DataGrid] Add `border: 0` to unmounted focused cell to avoid layout shifts in that row (#10318) @lauri865
+
+#### `@mui/x-data-grid-pro@6.15.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.15.0`, plus:
+
+- [DataGridPro] Implement columns auto-sizing (#10180) @romgrk
+- [DataGridPro] Fix keyboard navigation issue in header filters (#10358) @MBilalShafi
+- [DataGridPro] Add missing row hover styles (#10252) @cherniavskii
+- [DataGridPro] Make default filter items have stable references in header filters (#10338) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.15.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.15.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.15.0`
+
+- [pickers] Support tokens without spaces (#10185) @alexfauquette
+- [l10n] Improve Finnish (fi-FI) locale (#10346) @samijouppila
+
+#### `@mui/x-date-pickers-pro@6.15.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.15.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.12`
+
+- [charts] Fix sparkline scale and rendering (#10402) @alexfauquette
+- [charts] Remove components from `@mui/material` (#10115) @alexfauquette
+
+### Tree View / `@mui/x-tree-view@6.0.0-alpha.4`
+
+- [TreeView] Split features into plugins to prepare for Pro version (#10123) @flaviendelangle
+
+### Docs
+
+- [docs] Add charts documentation pages to complete pricing table (#10394) @alexfauquette
+- [docs] Add missing MIT packages on the Licensing page (#10348) @flaviendelangle
+- [docs] Clearer component pattern @oliviertassinari
+- [docs] Easier to understand demo (#10370) @oliviertassinari
+- [docs] Fix `301` to Material UI @oliviertassinari
+- [docs] Improve the column visibility section (#10327) @MBilalShafi
+- [docs] Improve the documentation section `rowIdentifier` (#10326) @MBilalShafi
+- [docs] Improve pickers localization documentation (#10202) @flaviendelangle
+- [docs] Polish typescript ref usage (#10359) @oliviertassinari
+- [docs] Improve charts tooltip wording (#10406) @alexfauquette
+
+### Core
+
+- [core] Cleanup GitHub issues template (#10372) @romgrk
+- [core] Fix Circle CI OOM (#10385) @romgrk
+- [core] Improve sleep test helper @oliviertassinari
+- [core] Remove unwanted prefixes @oliviertassinari
+- [core] Remove duplicate label @oliviertassinari
+- [core] Simplify source @oliviertassinari
+- [core] Upgrade monorepo (#10425) @cherniavskii
+- [core] Upgrade monorepo to have the new typescript-to-proptype (#10224) @flaviendelangle
+- [test] Do not use deprecated adapter methods (#10416) @flaviendelangle
+- [test] Name test suites according to sentence case (#10429) @alexfauquette
+
 ## 6.14.0
 
 _Sep 14, 2023_

package/DateCalendar/DateCalendar.js

@@ -375,9 +375,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 +504,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',
@@ -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/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.

package/DateTimeField/DateTimeField.types.d.ts

@@ -7,6 +7,7 @@ import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
 import { BaseDateValidationProps, BaseTimeValidationProps, DateTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
 import { FieldsTextFieldProps } from '../internals/models/fields';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
+import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals';
 export interface UseDateTimeFieldParams<TDate, TChildProps extends {}> {
     props: UseDateTimeFieldComponentProps<TDate, TChildProps>;
     inputRef?: React.Ref<HTMLInputElement>;
@@ -45,7 +46,7 @@ export interface DateTimeFieldProps<TDate> extends UseDateTimeFieldComponentProp
     slotProps?: DateTimeFieldSlotsComponentsProps<TDate>;
 }
 export type DateTimeFieldOwnerState<TDate> = DateTimeFieldProps<TDate>;
-export interface DateTimeFieldSlotsComponent {
+export interface DateTimeFieldSlotsComponent extends FieldSlotsComponents {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -53,6 +54,6 @@ export interface DateTimeFieldSlotsComponent {
      */
     TextField?: React.ElementType;
 }
-export interface DateTimeFieldSlotsComponentsProps<TDate> {
+export interface DateTimeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, DateTimeFieldOwnerState<TDate>>;
 }

package/DateTimePicker/DateTimePicker.js

@@ -78,9 +78,10 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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,
   /**
@@ -316,6 +317,9 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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.

package/DateTimePicker/DateTimePickerToolbar.js

@@ -316,6 +316,7 @@ process.env.NODE_ENV !== "production" ? DateTimePickerToolbar.propTypes = {
    */
   onViewChange: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   titleId: PropTypes.string,
   /**
    * Toolbar date format.

package/DesktopDatePicker/DesktopDatePicker.js

@@ -92,9 +92,10 @@ DesktopDatePicker.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,
   /**
@@ -288,6 +289,9 @@ DesktopDatePicker.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/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -138,9 +138,10 @@ DesktopDateTimePicker.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,
   /**
@@ -370,6 +371,9 @@ DesktopDateTimePicker.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.