@mui/x-date-pickers-pro 6.14.0 → 6.16.0

package/StaticDateRangePicker/StaticDateRangePicker.js

@@ -78,9 +78,10 @@ StaticDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -227,6 +228,9 @@ StaticDateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.14.0
+ * @mui/x-date-pickers-pro v6.16.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/hooks/useEnrichedRangePickerFieldProps.d.ts

@@ -6,10 +6,10 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
 import { DateOrTimeViewWithMeridiem } from '@mui/x-date-pickers/internals/models';
 import { PickersInputLocaleText } from '@mui/x-date-pickers/locales';
-import { BaseFieldProps, UsePickerResponse, WrapperVariant, UncapitalizeObjectKeys, UsePickerProps } from '@mui/x-date-pickers/internals';
+import { BaseFieldProps, UsePickerResponse, WrapperVariant, UncapitalizeObjectKeys, UsePickerProps, FieldSlotsComponents, FieldSlotsComponentsProps } from '@mui/x-date-pickers/internals';
 import { BaseMultiInputFieldProps, DateRange, RangeFieldSection, RangePosition, UseDateRangeFieldProps } from '../models';
 import { UseRangePositionResponse } from './useRangePosition';
-export interface RangePickerFieldSlotsComponent {
+export interface RangePickerFieldSlotsComponent extends FieldSlotsComponents {
     Field: React.ElementType;
     /**
      * Element rendered at the root.
@@ -29,7 +29,7 @@ export interface RangePickerFieldSlotsComponent {
      */
     TextField?: React.ElementType<TextFieldProps>;
 }
-export interface RangePickerFieldSlotsComponentsProps<TDate> {
+export interface RangePickerFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     field?: SlotComponentProps<React.ElementType<BaseMultiInputFieldProps<DateRange<TDate>, TDate, RangeFieldSection, unknown>>, {}, UsePickerProps<DateRange<TDate>, TDate, any, RangeFieldSection, any, any, any>>;
     fieldRoot?: SlotComponentProps<typeof Stack, {}, Record<string, any>>;
     fieldSeparator?: SlotComponentProps<typeof Typography, {}, Record<string, any>>;

package/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["clearable", "onClear"];
 import * as React from 'react';
 import { resolveComponentProps } from '@mui/base/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -115,7 +117,10 @@ const useMultiInputFieldSlotProps = ({
     },
     separator: pickerSlotProps == null ? void 0 : pickerSlotProps.fieldSeparator
   });
-  const enrichedFieldProps = _extends({}, fieldProps, {
+
+  /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
+  const restFieldProps = _objectWithoutPropertiesLoose(fieldProps, _excluded);
+  const enrichedFieldProps = _extends({}, restFieldProps, {
     slots,
     slotProps
   });
@@ -173,10 +178,14 @@ const useSingleInputFieldSlotProps = ({
     }
   };
   const slots = _extends({}, fieldProps.slots, {
-    textField: pickerSlots == null ? void 0 : pickerSlots.textField
+    textField: pickerSlots == null ? void 0 : pickerSlots.textField,
+    clearButton: pickerSlots == null ? void 0 : pickerSlots.clearButton,
+    clearIcon: pickerSlots == null ? void 0 : pickerSlots.clearIcon
   });
   const slotProps = _extends({}, fieldProps.slotProps, {
-    textField: pickerSlotProps == null ? void 0 : pickerSlotProps.textField
+    textField: pickerSlotProps == null ? void 0 : pickerSlotProps.textField,
+    clearButton: pickerSlots == null ? void 0 : pickerSlots.clearButton,
+    clearIcon: pickerSlots == null ? void 0 : pickerSlots.clearIcon
   });
   const enrichedFieldProps = _extends({}, fieldProps, {
     slots,

package/internals/hooks/useMultiInputRangeField/shared.d.ts

@@ -0,0 +1 @@
+export declare const excludeProps: <TProps extends {}>(props: TProps, excludedProps: (keyof TProps)[]) => TProps;

package/internals/hooks/useMultiInputRangeField/shared.js

@@ -0,0 +1,9 @@
+/* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
+export const excludeProps = (props, excludedProps) => {
+  return Object.keys(props).reduce((acc, key) => {
+    if (!excludedProps.includes(key)) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+};

package/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -5,6 +5,7 @@ import { useLocalizationContext, useValidation, useControlledValueWithTimezone }
 import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField';
 import { validateDateRange } from '../../utils/validation/validateDateRange';
 import { rangeValueManager } from '../../utils/valueManagers';
+import { excludeProps } from './shared';
 export const useMultiInputDateRangeField = ({
   sharedProps: inSharedProps,
   startTextFieldProps,
@@ -104,8 +105,10 @@ export const useMultiInputDateRangeField = ({
     props: endFieldProps,
     inputRef: endInputRef
   });
+
+  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
   return {
-    startDate: startDateResponse,
-    endDate: endDateResponse
+    startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
+    endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
   };
 };

package/internals/hooks/useMultiInputRangeField/useMultiInputDateTimeRangeField.js

@@ -4,6 +4,7 @@ import { unstable_useDateTimeField as useDateTimeField } from '@mui/x-date-picke
 import { applyDefaultDate, useDefaultDates, useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { validateDateTimeRange } from '../../utils/validation/validateDateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
+import { excludeProps } from './shared';
 export const useDefaultizedDateTimeRangeFieldProps = props => {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format, _props$minDateTime, _props$maxDateTime, _props$minDateTime2, _props$maxDateTime2;
   const utils = useUtils();
@@ -111,8 +112,10 @@ export const useMultiInputDateTimeRangeField = ({
     props: endFieldProps,
     inputRef: endInputRef
   });
+
+  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
   return {
-    startDate: startDateResponse,
-    endDate: endDateResponse
+    startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
+    endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
   };
 };

package/internals/hooks/useMultiInputRangeField/useMultiInputTimeRangeField.js

@@ -4,6 +4,7 @@ import { unstable_useTimeField as useTimeField } from '@mui/x-date-pickers/TimeF
 import { useLocalizationContext, useUtils, useValidation, useControlledValueWithTimezone } from '@mui/x-date-pickers/internals';
 import { validateTimeRange } from '../../utils/validation/validateTimeRange';
 import { rangeValueManager } from '../../utils/valueManagers';
+import { excludeProps } from './shared';
 export const useDefaultizedTimeRangeFieldProps = props => {
   var _props$ampm, _props$disablePast, _props$disableFuture, _props$format;
   const utils = useUtils();
@@ -105,8 +106,10 @@ export const useMultiInputTimeRangeField = ({
     props: endFieldProps,
     inputRef: endInputRef
   });
+
+  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
   return {
-    startDate: startDateResponse,
-    endDate: endDateResponse
+    startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
+    endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
   };
 };

package/internals/models/dateRange.d.ts

@@ -8,6 +8,9 @@ import { RangeFieldSection } from './fields';
 export interface DayRangeValidationProps<TDate> {
     /**
      * 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.
      * @param {string} position The date to test, 'start' or 'end'.

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY5NDY0MjQwMDAwMA==";
+  const releaseInfo = "MTY5NTkzODQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/DateRangeCalendar/DateRangeCalendar.js

@@ -532,9 +532,10 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -652,6 +653,9 @@ process.env.NODE_ENV !== "production" ? DateRangeCalendar.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/DateRangePicker/DateRangePicker.js

@@ -76,9 +76,10 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -279,6 +280,9 @@ process.env.NODE_ENV !== "production" ? DateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/DateRangePicker/DateRangePickerToolbar.js

@@ -103,6 +103,7 @@ process.env.NODE_ENV !== "production" ? DateRangePickerToolbar.propTypes = {
   onRangePositionChange: PropTypes.func.isRequired,
   rangePosition: PropTypes.oneOf(['end', 'start']).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/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -91,9 +91,10 @@ DesktopDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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 @@ DesktopDateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/MobileDateRangePicker/MobileDateRangePicker.js

@@ -91,9 +91,10 @@ MobileDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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 @@ MobileDateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -282,6 +282,9 @@ process.env.NODE_ENV !== "production" ? MultiInputDateRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -323,6 +323,9 @@ process.env.NODE_ENV !== "production" ? MultiInputDateTimeRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -2,12 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { useClearableField } from '@mui/x-date-pickers/hooks';
 import { refType } from '@mui/utils';
 import { useSingleInputDateRangeField } from './useSingleInputDateRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,11 +48,25 @@ var SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     onKeyDown = _useSingleInputDateRa.onKeyDown,
     inputMode = _useSingleInputDateRa.inputMode,
     readOnly = _useSingleInputDateRa.readOnly,
+    clearable = _useSingleInputDateRa.clearable,
+    onClear = _useSingleInputDateRa.onClear,
     fieldProps = _objectWithoutProperties(_useSingleInputDateRa, _excluded3);
+  var _useClearableField = useClearableField({
+      onClear: onClear,
+      clearable: clearable,
+      fieldProps: fieldProps,
+      InputProps: fieldProps.InputProps,
+      slots: slots,
+      slotProps: slotProps,
+      components: components,
+      componentsProps: componentsProps
+    }),
+    ProcessedInputProps = _useClearableField.InputProps,
+    processedFieldProps = _useClearableField.fieldProps;
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
-  }, fieldProps, {
-    InputProps: _extends({}, fieldProps.InputProps, {
+  }, processedFieldProps, {
+    InputProps: _extends({}, ProcessedInputProps, {
       readOnly: readOnly
     }),
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -74,6 +89,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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
@@ -202,6 +222,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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.
@@ -248,6 +272,9 @@ process.env.NODE_ENV !== "production" ? SingleInputDateRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -2,12 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
+import { useClearableField } from '@mui/x-date-pickers/hooks';
 import { refType } from '@mui/utils';
 import { useSingleInputDateTimeRangeField } from './useSingleInputDateTimeRangeField';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -47,11 +48,25 @@ var SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Singl
     onKeyDown = _useSingleInputDateTi.onKeyDown,
     inputMode = _useSingleInputDateTi.inputMode,
     readOnly = _useSingleInputDateTi.readOnly,
+    clearable = _useSingleInputDateTi.clearable,
+    onClear = _useSingleInputDateTi.onClear,
     fieldProps = _objectWithoutProperties(_useSingleInputDateTi, _excluded3);
+  var _useClearableField = useClearableField({
+      onClear: onClear,
+      clearable: clearable,
+      fieldProps: fieldProps,
+      InputProps: fieldProps.InputProps,
+      slots: slots,
+      slotProps: slotProps,
+      components: components,
+      componentsProps: componentsProps
+    }),
+    ProcessedInputProps = _useClearableField.InputProps,
+    processedFieldProps = _useClearableField.fieldProps;
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
-  }, fieldProps, {
-    InputProps: _extends({}, fieldProps.InputProps, {
+  }, processedFieldProps, {
+    InputProps: _extends({}, ProcessedInputProps, {
       readOnly: readOnly
     }),
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -79,6 +94,11 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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
@@ -235,6 +255,10 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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.
@@ -289,6 +313,9 @@ process.env.NODE_ENV !== "production" ? SingleInputDateTimeRangeField.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _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 { useClearableField } from '@mui/x-date-pickers/hooks';
 import MuiTextField from '@mui/material/TextField';
 import { useThemeProps } from '@mui/material/styles';
 import { useSlotProps } from '@mui/base/utils';
@@ -47,11 +48,25 @@ var SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleInp
     onKeyDown = _useSingleInputTimeRa.onKeyDown,
     inputMode = _useSingleInputTimeRa.inputMode,
     readOnly = _useSingleInputTimeRa.readOnly,
+    clearable = _useSingleInputTimeRa.clearable,
+    onClear = _useSingleInputTimeRa.onClear,
     fieldProps = _objectWithoutProperties(_useSingleInputTimeRa, _excluded3);
+  var _useClearableField = useClearableField({
+      onClear: onClear,
+      clearable: clearable,
+      fieldProps: fieldProps,
+      InputProps: fieldProps.InputProps,
+      slots: slots,
+      slotProps: slotProps,
+      components: components,
+      componentsProps: componentsProps
+    }),
+    ProcessedInputProps = _useClearableField.InputProps,
+    processedFieldProps = _useClearableField.fieldProps;
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
-  }, fieldProps, {
-    InputProps: _extends({}, fieldProps.InputProps, {
+  }, processedFieldProps, {
+    InputProps: _extends({}, ProcessedInputProps, {
       readOnly: readOnly
     }),
     inputProps: _extends({}, fieldProps.inputProps, {
@@ -79,6 +94,11 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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
@@ -219,6 +239,10 @@ process.env.NODE_ENV !== "production" ? SingleInputTimeRangeField.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/legacy/StaticDateRangePicker/StaticDateRangePicker.js

@@ -77,9 +77,10 @@ StaticDateRangePicker.propTypes = {
   currentMonthCalendarPosition: PropTypes.oneOf([1, 2, 3]),
   /**
    * 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,
   /**
@@ -226,6 +227,9 @@ StaticDateRangePicker.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.
    * @param {string} position The date to test, 'start' or 'end'.

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v6.14.0
+ * @mui/x-date-pickers-pro v6.16.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/internals/hooks/useEnrichedRangePickerFieldProps.js

@@ -1,4 +1,6 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["clearable", "onClear"];
 import * as React from 'react';
 import { resolveComponentProps } from '@mui/base/utils';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -114,7 +116,12 @@ var useMultiInputFieldSlotProps = function useMultiInputFieldSlotProps(_ref) {
     },
     separator: pickerSlotProps == null ? void 0 : pickerSlotProps.fieldSeparator
   });
-  var enrichedFieldProps = _extends({}, fieldProps, {
+
+  /* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
+  var clearable = fieldProps.clearable,
+    onClear = fieldProps.onClear,
+    restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
+  var enrichedFieldProps = _extends({}, restFieldProps, {
     slots: slots,
     slotProps: slotProps
   });
@@ -171,10 +178,14 @@ var useSingleInputFieldSlotProps = function useSingleInputFieldSlotProps(_ref2)
     }
   };
   var slots = _extends({}, fieldProps.slots, {
-    textField: pickerSlots == null ? void 0 : pickerSlots.textField
+    textField: pickerSlots == null ? void 0 : pickerSlots.textField,
+    clearButton: pickerSlots == null ? void 0 : pickerSlots.clearButton,
+    clearIcon: pickerSlots == null ? void 0 : pickerSlots.clearIcon
   });
   var slotProps = _extends({}, fieldProps.slotProps, {
-    textField: pickerSlotProps == null ? void 0 : pickerSlotProps.textField
+    textField: pickerSlotProps == null ? void 0 : pickerSlotProps.textField,
+    clearButton: pickerSlots == null ? void 0 : pickerSlots.clearButton,
+    clearIcon: pickerSlots == null ? void 0 : pickerSlots.clearIcon
   });
   var enrichedFieldProps = _extends({}, fieldProps, {
     slots: slots,

package/legacy/internals/hooks/useMultiInputRangeField/shared.js

@@ -0,0 +1,9 @@
+/* TODO: remove this when a clearable behavior for multiple input range fields is implemented */
+export var excludeProps = function excludeProps(props, excludedProps) {
+  return Object.keys(props).reduce(function (acc, key) {
+    if (!excludedProps.includes(key)) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+};

package/legacy/internals/hooks/useMultiInputRangeField/useMultiInputDateRangeField.js

@@ -5,6 +5,7 @@ import { useLocalizationContext, useValidation, useControlledValueWithTimezone }
 import { useDefaultizedDateRangeFieldProps } from '../../../SingleInputDateRangeField/useSingleInputDateRangeField';
 import { validateDateRange } from '../../utils/validation/validateDateRange';
 import { rangeValueManager } from '../../utils/valueManagers';
+import { excludeProps } from './shared';
 export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_ref) {
   var inSharedProps = _ref.sharedProps,
     startTextFieldProps = _ref.startTextFieldProps,
@@ -100,8 +101,10 @@ export var useMultiInputDateRangeField = function useMultiInputDateRangeField(_r
     props: endFieldProps,
     inputRef: endInputRef
   });
+
+  /* TODO: Undo this change when a clearable behavior for multiple input range fields is implemented */
   return {
-    startDate: startDateResponse,
-    endDate: endDateResponse
+    startDate: excludeProps(startDateResponse, ['clearable', 'onClear']),
+    endDate: excludeProps(endDateResponse, ['clearable', 'onClear'])
   };
 };