@mui/x-date-pickers 6.14.0 → 6.16.0

package/MobileDatePicker/MobileDatePicker.js

@@ -89,9 +89,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,
   /**
@@ -285,6 +286,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/MobileDateTimePicker/MobileDateTimePicker.js

@@ -110,9 +110,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,
   /**
@@ -342,6 +343,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/StaticDatePicker/StaticDatePicker.js

@@ -68,9 +68,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,
   /**
@@ -218,6 +219,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/StaticDateTimePicker/StaticDateTimePicker.js

@@ -88,9 +88,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,
   /**
@@ -274,6 +275,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/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) {
   var _ref, _slots$textField, _slotProps$textField;
@@ -51,13 +52,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, {
@@ -84,6 +100,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
@@ -224,6 +245,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/TimeField/TimeField.types.d.ts

@@ -7,6 +7,7 @@ import { BaseTimeValidationProps, TimeValidationProps } from '../internals/model
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { FieldsTextFieldProps } from '../internals/models/fields';
 import { FieldSection, TimeValidationError } from '../models';
+import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../internals';
 export interface UseTimeFieldParams<TDate, TChildProps extends {}> {
     props: UseTimeFieldComponentProps<TDate, TChildProps>;
     inputRef?: React.Ref<HTMLInputElement>;
@@ -45,7 +46,7 @@ export interface TimeFieldProps<TDate> extends UseTimeFieldComponentProps<TDate,
     slotProps?: TimeFieldSlotsComponentsProps<TDate>;
 }
 export type TimeFieldOwnerState<TDate> = TimeFieldProps<TDate>;
-export interface TimeFieldSlotsComponent {
+export interface TimeFieldSlotsComponent extends FieldSlotsComponents {
     /**
      * Form control with an input to render the value.
      * Receives the same props as `@mui/material/TextField`.
@@ -53,6 +54,6 @@ export interface TimeFieldSlotsComponent {
      */
     TextField?: React.ElementType;
 }
-export interface TimeFieldSlotsComponentsProps<TDate> {
+export interface TimeFieldSlotsComponentsProps<TDate> extends FieldSlotsComponentsProps {
     textField?: SlotComponentProps<typeof TextField, {}, TimeFieldOwnerState<TDate>>;
 }

package/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/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/hooks/index.js",
+  "types": "./index.d.ts"
+}

package/hooks/useClearableField.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { FieldSlotsComponents, FieldSlotsComponentsProps, FieldsTextFieldProps } from '../internals';
+type UseClearableFieldProps<TFieldProps extends FieldsTextFieldProps, TInputProps extends {
+    endAdornment?: React.ReactNode;
+} | undefined, TFieldSlots extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps> = {
+    clearable: boolean;
+    fieldProps: TFieldProps;
+    InputProps: TInputProps;
+    onClear: React.MouseEventHandler<HTMLButtonElement>;
+    slots?: {
+        [K in keyof TFieldSlots as Uncapitalize<K & string>]: TFieldSlots[K];
+    };
+    slotProps?: TFieldSlotsComponentsProps;
+    components?: TFieldSlots;
+    componentsProps?: TFieldSlotsComponentsProps;
+};
+export declare const useClearableField: <TFieldProps extends FieldsTextFieldProps, TInputProps extends {
+    endAdornment?: React.ReactNode;
+} | undefined, TFieldSlotsComponents extends FieldSlotsComponents, TFieldSlotsComponentsProps extends FieldSlotsComponentsProps>({ clearable, fieldProps: forwardedFieldProps, InputProps: ForwardedInputProps, onClear, slots, slotProps, components, componentsProps, }: UseClearableFieldProps<TFieldProps, TInputProps, TFieldSlotsComponents, TFieldSlotsComponentsProps>) => {
+    InputProps: TInputProps & {
+        endAdornment: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    };
+    fieldProps: TFieldProps;
+};
+export {};

package/hooks/useClearableField.js

@@ -0,0 +1,79 @@
+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
+}) => {
+  var _ref, _slots$clearButton, _slotProps$clearButto, _ref2, _slots$clearIcon, _slotProps$clearIcon;
+  const localeText = useLocaleText();
+  const IconButton = (_ref = (_slots$clearButton = slots == null ? void 0 : slots.clearButton) != null ? _slots$clearButton : components == null ? void 0 : components.ClearButton) != null ? _ref : MuiIconButton;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  const _useSlotProps = useSlotProps({
+      elementType: IconButton,
+      externalSlotProps: (_slotProps$clearButto = slotProps == null ? void 0 : slotProps.clearButton) != null ? _slotProps$clearButto : componentsProps == null ? void 0 : componentsProps.clearButton,
+      ownerState: {},
+      className: 'clearButton',
+      additionalProps: {
+        title: localeText.fieldClearLabel
+      }
+    }),
+    iconButtonProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  const EndClearIcon = (_ref2 = (_slots$clearIcon = slots == null ? void 0 : slots.clearIcon) != null ? _slots$clearIcon : components == null ? void 0 : components.ClearIcon) != null ? _ref2 : ClearIcon;
+  const endClearIconProps = useSlotProps({
+    elementType: EndClearIcon,
+    externalSlotProps: (_slotProps$clearIcon = slotProps == null ? void 0 : slotProps.clearIcon) != null ? _slotProps$clearIcon : componentsProps == null ? void 0 : componentsProps.clearIcon,
+    ownerState: {}
+  });
+  const InputProps = _extends({}, ForwardedInputProps, {
+    endAdornment: clearable ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(InputAdornment, {
+        position: "end",
+        sx: {
+          marginRight: ForwardedInputProps != null && ForwardedInputProps.endAdornment ? -1 : -1.5
+        },
+        children: /*#__PURE__*/_jsx(IconButton, _extends({}, iconButtonProps, {
+          onClick: onClear,
+          children: /*#__PURE__*/_jsx(EndClearIcon, _extends({
+            fontSize: "small"
+          }, endClearIconProps))
+        }))
+      }), ForwardedInputProps == null ? void 0 : ForwardedInputProps.endAdornment]
+    }) : ForwardedInputProps == null ? void 0 : 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/icons/index.d.ts

@@ -40,3 +40,9 @@ export declare const DateRangeIcon: import("@mui/material/OverridableComponent")
 export declare const TimeIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
+/**
+ * @ignore - internal component.
+ */
+export declare const ClearIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/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/index.d.ts

@@ -31,3 +31,4 @@ export * from './PickersShortcuts';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';
 export * from './icons';
+export * from './hooks';

package/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/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -122,7 +122,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 = slots.layout) != null ? _slots$layout : PickersLayout;
   const handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -12,7 +12,8 @@ import { UsePickerValueNonStaticProps } from '../usePicker/usePickerValue.types'
 import { UsePickerViewsNonStaticProps, UsePickerViewsProps } from '../usePicker/usePickerViews';
 import { UncapitalizeObjectKeys } from '../../utils/slots-migration';
 import { DateOrTimeViewWithMeridiem } from '../../models';
-export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView> {
+import { FieldSlotsComponents, FieldSlotsComponentsProps } from '../useField';
+export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeViewWithMeridiem> extends Pick<PickersPopperSlotsComponent, 'DesktopPaper' | 'DesktopTransition' | 'DesktopTrapFocus' | 'Popper'>, ExportedPickersLayoutSlotsComponent<TDate | null, TDate, TView>, FieldSlotsComponents {
     /**
      * Component used to enter the date with the keyboard.
      */
@@ -40,7 +41,7 @@ export interface UseDesktopPickerSlotsComponent<TDate, TView extends DateOrTimeV
 }
 export interface UseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView>, Pick<PickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, 'toolbar'> {
 }
-export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView> {
+export interface ExportedUseDesktopPickerSlotsComponentsProps<TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersPopperSlotsComponentsProps, ExportedPickersLayoutSlotsComponentsProps<TDate | null, TDate, TView>, FieldSlotsComponentsProps {
     field?: SlotComponentProps<React.ElementType<BaseSingleInputFieldProps<TDate | null, TDate, FieldSection, unknown>>, {}, UsePickerProps<TDate | null, TDate, any, FieldSection, any, any, any>>;
     textField?: SlotComponentProps<typeof TextField, {}, Record<string, any>>;
     inputAdornment?: Partial<InputAdornmentProps>;

package/internals/hooks/useField/index.d.ts

@@ -1,3 +1,3 @@
 export { useField } from './useField';
-export type { FieldValueManager, UseFieldInternalProps, UseFieldForwardedProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext, FieldRef, } from './useField.types';
+export type { FieldValueManager, UseFieldInternalProps, UseFieldForwardedProps, UseFieldParams, UseFieldResponse, FieldChangeHandler, FieldChangeHandlerContext, FieldRef, FieldSlotsComponents, FieldSlotsComponentsProps, } from './useField.types';
 export { splitFormatIntoSections, addPositionPropertiesToSections, createDateStrForInputFromSections, } from './useField.utils';

package/internals/hooks/useField/useField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error"];
+const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -42,7 +42,9 @@ export const useField = params => {
         onBlur,
         onMouseUp,
         onPaste,
-        error
+        error,
+        clearable,
+        onClear
       },
       fieldValueManager,
       valueManager,
@@ -85,8 +87,13 @@ export const useField = params => {
     const sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     setSelectedSections(sectionIndex);
   };
-  const handleInputClick = useEventCallback((...args) => {
-    onClick == null || onClick(...args);
+  const handleInputClick = useEventCallback((event, ...args) => {
+    // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
+    // We avoid this by checking if the call of `handleInputClick` is actually intended, or a side effect.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onClick == null || onClick(event, ...args);
     syncSelectionFromDOM();
   });
   const handleInputMouseUp = useEventCallback(event => {
@@ -373,7 +380,8 @@ export const useField = params => {
     return 'numeric';
   }, [selectedSectionIndexes, state.sections]);
   const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  const shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
   React.useImperativeHandle(unstableFieldRef, () => ({
     getSections: () => state.sections,
     getActiveSectionIndex: () => {
@@ -389,6 +397,14 @@ export const useField = params => {
     },
     setSelectedSections: activeSectionIndex => setSelectedSections(activeSectionIndex)
   }));
+  const handleClearValue = useEventCallback((event, ...args) => {
+    var _inputRef$current;
+    event.preventDefault();
+    onClear == null || onClear(event, ...args);
+    clearValue();
+    inputRef == null || (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+    setSelectedSections(0);
+  });
   return _extends({
     placeholder,
     autoComplete: 'off'
@@ -403,7 +419,9 @@ export const useField = params => {
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown,
     onMouseUp: handleInputMouseUp,
+    onClear: handleClearValue,
     error: inputError,
-    ref: handleRef
+    ref: handleRef,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly)
   });
 };

package/internals/hooks/useField/useField.types.d.ts

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import { SlotComponentProps } from '@mui/base/utils';
+import IconButton from '@mui/material/IconButton';
+import { ClearIcon } from '../../../icons';
 import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, FieldValueType, PickersTimezone } from '../../../models';
 import type { PickerValueManager } from '../usePicker';
 import { InferError, Validator } from '../useValidation';
@@ -93,6 +96,15 @@ export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSect
      * The ref object used to imperatively interact with the field.
      */
     unstableFieldRef?: React.Ref<FieldRef<TSection>>;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: React.MouseEventHandler;
+    /**
+     * If `true`, a clear button will be shown in the field allowing value clearing.
+     * @default false
+     */
+    clearable?: boolean;
 }
 export interface FieldRef<TSection extends FieldSection> {
     /**
@@ -116,10 +128,12 @@ export interface UseFieldForwardedProps {
     onKeyDown?: React.KeyboardEventHandler;
     onMouseUp?: React.MouseEventHandler;
     onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler;
     onFocus?: () => void;
     onBlur?: () => void;
     error?: boolean;
+    onClear?: React.MouseEventHandler;
+    clearable?: boolean;
 }
 export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.HTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
     ref: React.Ref<HTMLInputElement>;
@@ -298,4 +312,20 @@ export type SectionOrdering = {
      */
     endIndex: number;
 };
+export interface FieldSlotsComponents {
+    /**
+     * Icon to display inside the clear button.
+     * @default ClearIcon
+     */
+    ClearIcon?: React.ElementType;
+    /**
+     * Button to clear the value.
+     * @default IconButton
+     */
+    ClearButton?: React.ElementType;
+}
+export interface FieldSlotsComponentsProps {
+    clearIcon?: SlotComponentProps<typeof ClearIcon, {}, {}>;
+    clearButton?: SlotComponentProps<typeof IconButton, {}, {}>;
+}
 export {};

package/internals/hooks/useField/useField.utils.js

@@ -385,15 +385,20 @@ export const splitFormatIntoSections = (utils, timezone, localeText, format, dat
   const escapedParts = getEscapedPartsFromFormat(utils, expandedFormat);
 
   // This RegExp test if the beginning of a string correspond to a supported token
-  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).join('|')})`);
+  const isTokenStartRegExp = new RegExp(`^(${Object.keys(utils.formatTokenMap).sort((a, b) => b.length - a.length) // Sort to put longest word first
+  .join('|')})`, 'g') // used to get access to lastIndex state
+  ;
+
   let currentTokenValue = '';
   for (let i = 0; i < expandedFormat.length; i += 1) {
     const escapedPartOfCurrentChar = escapedParts.find(escapeIndex => escapeIndex.start <= i && escapeIndex.end >= i);
     const char = expandedFormat[i];
     const isEscapedChar = escapedPartOfCurrentChar != null;
     const potentialToken = `${currentTokenValue}${expandedFormat.slice(i)}`;
-    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && isTokenStartRegExp.test(potentialToken)) {
-      currentTokenValue += char;
+    const regExpMatch = isTokenStartRegExp.test(potentialToken);
+    if (!isEscapedChar && char.match(/([A-Za-z]+)/) && regExpMatch) {
+      currentTokenValue = potentialToken.slice(0, isTokenStartRegExp.lastIndex);
+      i += isTokenStartRegExp.lastIndex - 1;
     } else {
       // If we are on the opening or closing character of an escaped part of the format,
       // Then we ignore this character.

package/internals/index.d.ts

@@ -24,7 +24,7 @@ export { DAY_MARGIN, DIALOG_WIDTH } from './constants/dimensions';
 export { useControlledValueWithTimezone } from './hooks/useValueWithTimezone';
 export type { DesktopOnlyPickerProps } from './hooks/useDesktopPicker';
 export { useField, createDateStrForInputFromSections, addPositionPropertiesToSections, } from './hooks/useField';
-export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, } from './hooks/useField';
+export type { UseFieldInternalProps, UseFieldParams, UseFieldResponse, UseFieldForwardedProps, FieldValueManager, FieldChangeHandler, FieldChangeHandlerContext, FieldSlotsComponents, FieldSlotsComponentsProps, } from './hooks/useField';
 export type { MobileOnlyPickerProps } from './hooks/useMobilePicker';
 export { usePicker } from './hooks/usePicker';
 export type { UsePickerResponse, UsePickerParams, UsePickerProps } from './hooks/usePicker';

package/internals/models/props/toolbar.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import { DateOrTimeViewWithMeridiem } from '../common';
 export interface BaseToolbarProps<TValue, TView extends DateOrTimeViewWithMeridiem> extends ExportedBaseToolbarProps {
     isLandscape: boolean;
@@ -38,4 +40,5 @@ export interface ExportedBaseToolbarProps {
      * @default `true` for Desktop, `false` for Mobile.
      */
     hidden?: boolean;
+    sx?: SxProps<Theme>;
 }

package/internals/models/validation.d.ts

@@ -78,6 +78,9 @@ export interface BaseDateValidationProps<TDate> extends FutureAndPastValidationP
 export interface DayValidationProps<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.
      * @returns {boolean} If `true` the date will be disabled.

package/internals/utils/date-utils.d.ts

@@ -23,4 +23,5 @@ export declare const resolveDateFormat: (utils: MuiPickersAdapter<any>, { format
     format?: string | undefined;
     views: readonly DateView[];
 }, isInToolbar: boolean) => string;
+export declare const getWeekdays: <TDate>(utils: MuiPickersAdapter<TDate, any>, date: TDate) => TDate[];
 export {};

package/internals/utils/date-utils.js

@@ -116,4 +116,8 @@ export const resolveDateFormat = (utils, {
     return /en/.test(utils.getCurrentLocaleCode()) ? formats.normalDateWithWeekday : formats.normalDate;
   }
   return formats.keyboardDate;
+};
+export const getWeekdays = (utils, date) => {
+  const start = utils.startOfWeek(date);
+  return [0, 1, 2, 3, 4, 5, 6].map(diff => utils.addDays(start, diff));
 };

package/legacy/DateCalendar/DateCalendar.js

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