@mui/x-date-pickers-pro 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/DateRangeCalendar/DateRangeCalendar.js

@@ -509,9 +509,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,
   /**
@@ -629,6 +630,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/DateRangeCalendar/DateRangeCalendar.types.d.ts

@@ -24,7 +24,7 @@ export interface DateRangeCalendarSlotsComponentsProps<TDate> extends PickersArr
         selected: boolean;
     }>;
 }
-export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, TimezoneProps, Pick<ExportedUseViewsOptions<'day'>, 'autoFocus'> {
+export interface ExportedDateRangeCalendarProps<TDate> extends ExportedDayCalendarProps<TDate>, BaseDateValidationProps<TDate>, DayRangeValidationProps<TDate>, TimezoneProps, Pick<ExportedUseViewsOptions<'day'>, 'autoFocus'> {
     /**
      * If `true`, after selecting `start` date calendar will not automatically switch to the month of `end` date.
      * @default false

package/DateRangePicker/DateRangePicker.js

@@ -77,9 +77,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,
   /**
@@ -280,6 +281,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/DateRangePicker/DateRangePickerToolbar.js

@@ -96,6 +96,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/DesktopDateRangePicker/DesktopDateRangePicker.js

@@ -92,9 +92,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,
   /**
@@ -289,6 +290,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/MobileDateRangePicker/MobileDateRangePicker.js

@@ -92,9 +92,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,
   /**
@@ -289,6 +290,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/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -283,6 +283,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/MultiInputDateRangeField/MultiInputDateRangeField.types.d.ts

@@ -11,7 +11,7 @@ import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputR
 import { RangeFieldSection } from '../internals/models/fields';
 import { MultiInputRangeFieldClasses } from '../models';
 export type UseMultiInputDateRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateRangeFieldProps<TDate>, TTextFieldSlotProps>;
-export interface UseMultiInputDateRangeFieldProps<TDate> extends Omit<UseDateRangeFieldProps<TDate>, 'unstableFieldRef'> {
+export interface UseMultiInputDateRangeFieldProps<TDate> extends Omit<UseDateRangeFieldProps<TDate>, 'unstableFieldRef' | 'clearable' | 'onClear'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -324,6 +324,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/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.types.d.ts

@@ -11,7 +11,7 @@ import { RangeFieldSection } from '../internals/models/fields';
 import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputRangeField/useMultiInputRangeField.types';
 import { MultiInputRangeFieldClasses } from '../models';
 export type UseMultiInputDateTimeRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputDateTimeRangeFieldProps<TDate>, TTextFieldSlotProps>;
-export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends Omit<UseDateTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
+export interface UseMultiInputDateTimeRangeFieldProps<TDate> extends Omit<UseDateTimeRangeFieldProps<TDate>, 'unstableFieldRef' | 'clearable' | 'onClear'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }

package/MultiInputTimeRangeField/MultiInputTimeRangeField.types.d.ts

@@ -11,7 +11,7 @@ import { UseMultiInputRangeFieldParams } from '../internals/hooks/useMultiInputR
 import { RangeFieldSection } from '../internals/models/fields';
 import { MultiInputRangeFieldClasses } from '../models';
 export type UseMultiInputTimeRangeFieldParams<TDate, TTextFieldSlotProps extends {}> = UseMultiInputRangeFieldParams<UseMultiInputTimeRangeFieldProps<TDate>, TTextFieldSlotProps>;
-export interface UseMultiInputTimeRangeFieldProps<TDate> extends Omit<UseTimeRangeFieldProps<TDate>, 'unstableFieldRef'> {
+export interface UseMultiInputTimeRangeFieldProps<TDate> extends Omit<UseTimeRangeFieldProps<TDate>, 'unstableFieldRef' | 'clearable' | 'onClear'> {
     unstableStartFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
     unstableEndFieldRef?: React.Ref<FieldRef<RangeFieldSection>>;
 }

package/SingleInputDateRangeField/SingleInputDateRangeField.js

@@ -2,12 +2,13 @@ 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';
 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";
@@ -51,13 +52,28 @@ const SingleInputDateRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       onPaste,
       onKeyDown,
       inputMode,
-      readOnly
+      readOnly,
+      clearable,
+      onClear
     } = _useSingleInputDateRa,
     fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateRa, _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, {
@@ -80,6 +96,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
@@ -208,6 +229,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.
@@ -254,6 +279,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/SingleInputDateRangeField/SingleInputDateRangeField.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
-import { FieldsTextFieldProps, UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { FieldsTextFieldProps, UncapitalizeObjectKeys, FieldSlotsComponents, FieldSlotsComponentsProps } from '@mui/x-date-pickers/internals';
 import { UseDateRangeFieldDefaultizedProps, UseDateRangeFieldProps } from '../internals/models';
 export interface UseSingleInputDateRangeFieldParams<TDate, TChildProps extends {}> {
     props: UseSingleInputDateRangeFieldComponentProps<TDate, TChildProps>;
@@ -36,7 +36,7 @@ export type SingleInputDateRangeFieldProps<TDate, TChildProps extends {} = Field
     slotProps?: SingleInputDateRangeFieldSlotsComponentsProps<TDate>;
 };
 export type SingleInputDateRangeFieldOwnerState<TDate> = SingleInputDateRangeFieldProps<TDate>;
-export interface SingleInputDateRangeFieldSlotsComponent {
+export interface SingleInputDateRangeFieldSlotsComponent extends FieldSlotsComponents {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -44,6 +44,6 @@ export interface SingleInputDateRangeFieldSlotsComponent {
      */
     TextField?: React.ElementType;
 }
-export interface SingleInputDateRangeFieldSlotsComponentsProps<TDate> {
+export interface SingleInputDateRangeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, SingleInputDateRangeFieldOwnerState<TDate>>;
 }

package/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.js

@@ -2,12 +2,13 @@ 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';
 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";
@@ -51,13 +52,28 @@ const SingleInputDateTimeRangeField = /*#__PURE__*/React.forwardRef(function Sin
       onPaste,
       onKeyDown,
       inputMode,
-      readOnly
+      readOnly,
+      clearable,
+      onClear
     } = _useSingleInputDateTi,
     fieldProps = _objectWithoutPropertiesLoose(_useSingleInputDateTi, _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, {
@@ -85,6 +101,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
@@ -241,6 +262,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.
@@ -295,6 +320,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/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
 import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields';
-import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { UncapitalizeObjectKeys, FieldSlotsComponents, FieldSlotsComponentsProps } from '@mui/x-date-pickers/internals';
 import { UseDateTimeRangeFieldDefaultizedProps, UseDateTimeRangeFieldProps } from '../internals/models';
 export interface UseSingleInputDateTimeRangeFieldParams<TDate, TChildProps extends {}> {
     props: UseSingleInputDateTimeRangeFieldComponentProps<TDate, TChildProps>;
@@ -37,7 +37,7 @@ export interface SingleInputDateTimeRangeFieldProps<TDate> extends UseSingleInpu
     slotProps?: SingleInputDateTimeRangeFieldSlotsComponentsProps<TDate>;
 }
 export type SingleInputDateTimeRangeFieldOwnerState<TDate> = SingleInputDateTimeRangeFieldProps<TDate>;
-export interface SingleInputDateTimeRangeFieldSlotsComponent {
+export interface SingleInputDateTimeRangeFieldSlotsComponent extends FieldSlotsComponents {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -45,6 +45,6 @@ export interface SingleInputDateTimeRangeFieldSlotsComponent {
      */
     TextField?: React.ElementType;
 }
-export interface SingleInputDateTimeRangeFieldSlotsComponentsProps<TDate> {
+export interface SingleInputDateTimeRangeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, SingleInputDateTimeRangeFieldOwnerState<TDate>>;
 }

package/SingleInputTimeRangeField/SingleInputTimeRangeField.js

@@ -2,9 +2,10 @@ 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 { 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';
@@ -51,13 +52,28 @@ const SingleInputTimeRangeField = /*#__PURE__*/React.forwardRef(function SingleI
       onPaste,
       onKeyDown,
       inputMode,
-      readOnly
+      readOnly,
+      clearable,
+      onClear
     } = _useSingleInputTimeRa,
     fieldProps = _objectWithoutPropertiesLoose(_useSingleInputTimeRa, _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, {
@@ -85,6 +101,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
@@ -225,6 +246,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/SingleInputTimeRangeField/SingleInputTimeRangeField.types.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/base/utils';
 import TextField from '@mui/material/TextField';
 import { FieldsTextFieldProps } from '@mui/x-date-pickers/internals/models/fields';
-import { UncapitalizeObjectKeys } from '@mui/x-date-pickers/internals';
+import { UncapitalizeObjectKeys, FieldSlotsComponents, FieldSlotsComponentsProps } from '@mui/x-date-pickers/internals';
 import { UseTimeRangeFieldDefaultizedProps, UseTimeRangeFieldProps } from '../internals/models';
 export interface UseSingleInputTimeRangeFieldParams<TDate, TChildProps extends {}> {
     props: UseSingleInputTimeRangeFieldComponentProps<TDate, TChildProps>;
@@ -37,7 +37,7 @@ export interface SingleInputTimeRangeFieldProps<TDate> extends UseSingleInputTim
     slotProps?: SingleInputTimeRangeFieldSlotsComponentsProps<TDate>;
 }
 export type SingleInputTimeRangeFieldOwnerState<TDate> = SingleInputTimeRangeFieldProps<TDate>;
-export interface SingleInputTimeRangeFieldSlotsComponent {
+export interface SingleInputTimeRangeFieldSlotsComponent extends FieldSlotsComponents {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -45,6 +45,6 @@ export interface SingleInputTimeRangeFieldSlotsComponent {
      */
     TextField?: React.ElementType;
 }
-export interface SingleInputTimeRangeFieldSlotsComponentsProps<TDate> {
+export interface SingleInputTimeRangeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, SingleInputTimeRangeFieldOwnerState<TDate>>;
 }