@mui/x-date-pickers 6.14.0 → 6.16.0

package/modern/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',
@@ -235,7 +240,7 @@ export function DayCalendar(inProps) {
     shouldDisableDate,
     shouldDisableMonth,
     shouldDisableYear,
-    dayOfWeekFormatter = defaultDayOfWeekFormatter,
+    dayOfWeekFormatter: dayOfWeekFormatterFromProps,
     hasFocus,
     onFocusedViewChange,
     gridLabelId,
@@ -249,6 +254,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,
@@ -390,9 +398,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,
@@ -402,13 +411,18 @@ export function DayCalendar(inProps) {
         "aria-label": localeText.calendarWeekNumberHeaderLabel,
         className: classes.weekNumberLabel,
         children: localeText.calendarWeekNumberHeaderText
-      }), utils.getWeekdays().map((day, i) => /*#__PURE__*/_jsx(PickersCalendarWeekDayLabel, {
-        variant: "caption",
-        role: "columnheader",
-        "aria-label": utils.format(utils.addDays(startOfCurrentWeek, i), 'weekday'),
-        className: classes.weekDayLabel,
-        children: dayOfWeekFormatter?.(day) ?? day
-      }, day + i.toString()))]
+      }), getWeekdays(utils, now).map((weekday, i) => {
+        // 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?.(day, weekday) ?? day
+        }, day + i.toString());
+      })]
     }), loading ? /*#__PURE__*/_jsx(PickersCalendarLoadingContainer, {
       className: classes.loadingContainer,
       children: renderLoading()

package/modern/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/modern/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) {
   const themeProps = useThemeProps({
@@ -50,13 +51,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, {
@@ -78,6 +94,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
@@ -206,6 +227,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.
@@ -252,6 +277,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/modern/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/modern/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) {
   const themeProps = useThemeProps({
@@ -50,13 +51,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, {
@@ -83,6 +99,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
@@ -239,6 +260,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.
@@ -293,6 +318,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/modern/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/modern/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/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -88,9 +88,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,
   /**
@@ -284,6 +285,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/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -134,9 +134,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,
   /**
@@ -366,6 +367,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.

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -85,9 +85,10 @@ MobileDatePicker.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,
   /**
@@ -281,6 +282,9 @@ MobileDatePicker.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/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -106,9 +106,10 @@ MobileDateTimePicker.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,
   /**
@@ -338,6 +339,9 @@ MobileDateTimePicker.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/modern/StaticDatePicker/StaticDatePicker.js

@@ -67,9 +67,10 @@ StaticDatePicker.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,
   /**
@@ -217,6 +218,9 @@ StaticDatePicker.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/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -87,9 +87,10 @@ StaticDateTimePicker.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,
   /**
@@ -273,6 +274,9 @@ StaticDateTimePicker.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/modern/TimeField/TimeField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "components", "componentsProps", "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 { useTimeField } from './useTimeField';
+import { useClearableField } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
   const themeProps = useThemeProps({
@@ -50,13 +51,28 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
       onPaste,
       onKeyDown,
       inputMode,
-      readOnly
+      readOnly,
+      clearable,
+      onClear
     } = _useTimeField,
     fieldProps = _objectWithoutPropertiesLoose(_useTimeField, _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, {
@@ -83,6 +99,11 @@ process.env.NODE_ENV !== "production" ? TimeField.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
@@ -223,6 +244,10 @@ process.env.NODE_ENV !== "production" ? TimeField.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.

package/modern/TimePicker/TimePickerToolbar.js

@@ -222,6 +222,7 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.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/modern/hooks/index.js

@@ -0,0 +1 @@
+export { useClearableField } from './useClearableField';

package/modern/hooks/useClearableField.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ownerState"];
+import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
+import MuiIconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import { ClearIcon } from '../icons';
+import { useLocaleText } from '../internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const useClearableField = ({
+  clearable,
+  fieldProps: forwardedFieldProps,
+  InputProps: ForwardedInputProps,
+  onClear,
+  slots,
+  slotProps,
+  components,
+  componentsProps
+}) => {
+  const localeText = useLocaleText();
+  const IconButton = slots?.clearButton ?? components?.ClearButton ?? MuiIconButton;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const _useSlotProps = useSlotProps({
+      elementType: IconButton,
+      externalSlotProps: slotProps?.clearButton ?? componentsProps?.clearButton,
+      ownerState: {},
+      className: 'clearButton',
+      additionalProps: {
+        title: localeText.fieldClearLabel
+      }
+    }),
+    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  const EndClearIcon = slots?.clearIcon ?? components?.ClearIcon ?? ClearIcon;
+  const endClearIconProps = useSlotProps({
+    elementType: EndClearIcon,
+    externalSlotProps: slotProps?.clearIcon ?? componentsProps?.clearIcon,
+    ownerState: {}
+  });
+  const InputProps = _extends({}, ForwardedInputProps, {
+    endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(InputAdornment, {
+        position: "end",
+        sx: {
+          marginRight: ForwardedInputProps?.endAdornment ? -1 : -1.5
+        },
+        children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
+          onClick: onClear,
+          children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
+            fontSize: "small"
+          }, endClearIconProps))
+        }))
+      }), ForwardedInputProps?.endAdornment]
+    }) : ForwardedInputProps?.endAdornment
+  });
+  const fieldProps = _extends({}, forwardedFieldProps, {
+    sx: [{
+      '& .clearButton': {
+        opacity: 1
+      },
+      '@media (pointer: fine)': {
+        '& .clearButton': {
+          opacity: 0
+        },
+        '&:hover, &:focus-within': {
+          '.clearButton': {
+            opacity: 1
+          }
+        }
+      }
+    }, ...(Array.isArray(forwardedFieldProps.sx) ? forwardedFieldProps.sx : [forwardedFieldProps.sx])]
+  });
+  return {
+    InputProps,
+    fieldProps
+  };
+};

package/modern/icons/index.js

@@ -58,4 +58,11 @@ export const TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   }), /*#__PURE__*/_jsx("path", {
     d: "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"
   })]
-}), 'Time');
+}), 'Time');
+
+/**
+ * @ignore - internal component.
+ */
+export const ClearIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Clear');

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.14.0
+ * @mui/x-date-pickers v6.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -48,4 +48,5 @@ export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
-export * from './icons';
+export * from './icons';
+export * from './hooks';

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -121,7 +121,9 @@ export const useDesktopPicker = _ref => {
     });
   }
   const slotsForField = _extends({
-    textField: slots.textField
+    textField: slots.textField,
+    clearIcon: slots.clearIcon,
+    clearButton: slots.clearButton
   }, fieldProps.slots);
   const Layout = slots.layout ?? PickersLayout;
   const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);