@mui/x-date-pickers 6.15.0 → 6.16.1

package/legacy/DesktopDatePicker/DesktopDatePicker.js

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

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

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

package/legacy/MobileDatePicker/MobileDatePicker.js

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

@@ -109,9 +109,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,
   /**
@@ -341,6 +342,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/legacy/MonthCalendar/MonthCalendar.js

@@ -15,6 +15,7 @@ import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { DIALOG_WIDTH } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -49,7 +50,9 @@ var MonthCalendarRoot = styled('div', {
   flexWrap: 'wrap',
   alignContent: 'stretch',
   padding: '0 4px',
-  width: 320
+  width: DIALOG_WIDTH,
+  // avoid padding increasing width over defined
+  boxSizing: 'border-box'
 });
 export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   var props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');

package/legacy/StaticDatePicker/StaticDatePicker.js

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

package/legacy/StaticDateTimePicker/StaticDateTimePicker.js

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

package/legacy/TimeField/TimeField.js

@@ -2,7 +2,7 @@ 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';
@@ -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";
 var TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
@@ -47,11 +48,25 @@ var TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
     onKeyDown = _useTimeField.onKeyDown,
     inputMode = _useTimeField.inputMode,
     readOnly = _useTimeField.readOnly,
+    clearable = _useTimeField.clearable,
+    onClear = _useTimeField.onClear,
     fieldProps = _objectWithoutProperties(_useTimeField, _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, {
@@ -78,6 +93,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
@@ -218,6 +238,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/legacy/TimePicker/TimePickerToolbar.js

@@ -232,6 +232,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/legacy/YearCalendar/PickersYear.js

@@ -48,7 +48,7 @@ var PickersYearButton = styled('button', {
     border: 0,
     outline: 0
   }, theme.typography.subtitle1, (_extends2 = {
-    margin: '8px 0',
+    margin: '6px 0',
     height: 36,
     width: 72,
     borderRadius: 18,

package/legacy/YearCalendar/YearCalendar.js

@@ -15,6 +15,7 @@ import { applyDefaultDate } from '../internals/utils/date-utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -24,6 +25,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getYearCalendarUtilityClass, classes);
 };
 function useYearCalendarDefaultizedProps(props, name) {
+  var _themeProps$yearsPerR;
   var utils = useUtils();
   var defaultDates = useDefaultDates();
   var themeProps = useThemeProps({
@@ -34,6 +36,7 @@ function useYearCalendarDefaultizedProps(props, name) {
     disablePast: false,
     disableFuture: false
   }, themeProps, {
+    yearsPerRow: (_themeProps$yearsPerR = themeProps.yearsPerRow) != null ? _themeProps$yearsPerR : 3,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -51,8 +54,8 @@ var YearCalendarRoot = styled('div', {
   overflowY: 'auto',
   height: '100%',
   padding: '0 4px',
-  width: 320,
-  maxHeight: 304,
+  width: DIALOG_WIDTH,
+  maxHeight: MAX_CALENDAR_HEIGHT,
   // avoid padding increasing width over defined
   boxSizing: 'border-box',
   position: 'relative'
@@ -76,8 +79,7 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
     onYearFocus = props.onYearFocus,
     hasFocus = props.hasFocus,
     onFocusedViewChange = props.onFocusedViewChange,
-    _props$yearsPerRow = props.yearsPerRow,
-    yearsPerRow = _props$yearsPerRow === void 0 ? 3 : _props$yearsPerRow,
+    yearsPerRow = props.yearsPerRow,
     timezoneProp = props.timezone,
     gridLabelId = props.gridLabelId,
     other = _objectWithoutProperties(props, _excluded);

package/legacy/hooks/index.js

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

package/legacy/hooks/useClearableField.js

@@ -0,0 +1,80 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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 var useClearableField = function useClearableField(_ref) {
+  var _ref2, _slots$clearButton, _slotProps$clearButto, _ref3, _slots$clearIcon, _slotProps$clearIcon;
+  var clearable = _ref.clearable,
+    forwardedFieldProps = _ref.fieldProps,
+    ForwardedInputProps = _ref.InputProps,
+    onClear = _ref.onClear,
+    slots = _ref.slots,
+    slotProps = _ref.slotProps,
+    components = _ref.components,
+    componentsProps = _ref.componentsProps;
+  var localeText = useLocaleText();
+  var IconButton = (_ref2 = (_slots$clearButton = slots == null ? void 0 : slots.clearButton) != null ? _slots$clearButton : components == null ? void 0 : components.ClearButton) != null ? _ref2 : MuiIconButton;
+  // The spread is here to avoid this bug mui/material-ui#34056
+  var _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
+      }
+    }),
+    ownerState = _useSlotProps.ownerState,
+    iconButtonProps = _objectWithoutProperties(_useSlotProps, _excluded);
+  var EndClearIcon = (_ref3 = (_slots$clearIcon = slots == null ? void 0 : slots.clearIcon) != null ? _slots$clearIcon : components == null ? void 0 : components.ClearIcon) != null ? _ref3 : ClearIcon;
+  var endClearIconProps = useSlotProps({
+    elementType: EndClearIcon,
+    externalSlotProps: (_slotProps$clearIcon = slotProps == null ? void 0 : slotProps.clearIcon) != null ? _slotProps$clearIcon : componentsProps == null ? void 0 : componentsProps.clearIcon,
+    ownerState: {}
+  });
+  var 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
+  });
+  var fieldProps = _extends({}, forwardedFieldProps, {
+    sx: [{
+      '& .clearButton': {
+        opacity: 1
+      },
+      '@media (pointer: fine)': {
+        '& .clearButton': {
+          opacity: 0
+        },
+        '&:hover, &:focus-within': {
+          '.clearButton': {
+            opacity: 1
+          }
+        }
+      }
+    }].concat(_toConsumableArray(Array.isArray(forwardedFieldProps.sx) ? forwardedFieldProps.sx : [forwardedFieldProps.sx]))
+  });
+  return {
+    InputProps: InputProps,
+    fieldProps: fieldProps
+  };
+};

package/legacy/icons/index.js

@@ -58,4 +58,11 @@ export var 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 var 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/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.15.0
+ * @mui/x-date-pickers v6.16.1
  *
  * @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/legacy/internals/constants/dimensions.js

@@ -1,6 +1,7 @@
 export var DAY_SIZE = 36;
 export var DAY_MARGIN = 2;
 export var DIALOG_WIDTH = 320;
-export var VIEW_HEIGHT = 358;
+export var MAX_CALENDAR_HEIGHT = 280;
+export var VIEW_HEIGHT = 334;
 export var DIGITAL_CLOCK_VIEW_HEIGHT = 232;
 export var MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/legacy/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -119,7 +119,9 @@ export var useDesktopPicker = function useDesktopPicker(_ref) {
     }))));
   }
   var slotsForField = _extends({
-    textField: slots.textField
+    textField: slots.textField,
+    clearIcon: slots.clearIcon,
+    clearButton: slots.clearButton
   }, fieldProps.slots);
   var Layout = (_slots$layout = slots.layout) != null ? _slots$layout : PickersLayout;
   var handleInputRef = useForkRef(internalInputRef, fieldProps.inputRef, inputRef);

package/legacy/internals/hooks/useField/useField.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error"];
+var _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -42,6 +42,9 @@ export var useField = function useField(params) {
     onMouseUp = _params$forwardedProp.onMouseUp,
     onPaste = _params$forwardedProp.onPaste,
     error = _params$forwardedProp.error,
+    clearable = _params$forwardedProp.clearable,
+    onClear = _params$forwardedProp.onClear,
+    disabled = _params$forwardedProp.disabled,
     otherForwardedProps = _objectWithoutProperties(_params$forwardedProp, _excluded),
     fieldValueManager = params.fieldValueManager,
     valueManager = params.valueManager,
@@ -85,11 +88,16 @@ export var useField = function useField(params) {
     var sectionIndex = nextSectionIndex === -1 ? state.sections.length - 1 : nextSectionIndex - 1;
     _setSelectedSections(sectionIndex);
   };
-  var handleInputClick = useEventCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  var handleInputClick = useEventCallback(function (event) {
+    // 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;
+    }
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
     }
-    onClick == null || onClick.apply(void 0, _toConsumableArray(args));
+    onClick == null || onClick.apply(void 0, [event].concat(_toConsumableArray(args)));
     syncSelectionFromDOM();
   });
   var handleInputMouseUp = useEventCallback(function (event) {
@@ -384,7 +392,8 @@ export var useField = function useField(params) {
     return 'numeric';
   }, [selectedSectionIndexes, state.sections]);
   var inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
-  var shouldShowPlaceholder = !inputHasFocus && valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  var areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+  var shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
   React.useImperativeHandle(unstableFieldRef, function () {
     return {
       getSections: function getSections() {
@@ -408,9 +417,21 @@ export var useField = function useField(params) {
       }
     };
   });
+  var handleClearValue = useEventCallback(function (event) {
+    var _inputRef$current;
+    event.preventDefault();
+    for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+      args[_key4 - 1] = arguments[_key4];
+    }
+    onClear == null || onClear.apply(void 0, [event].concat(_toConsumableArray(args)));
+    clearValue();
+    inputRef == null || (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+    _setSelectedSections(0);
+  });
   return _extends({
     placeholder: placeholder,
-    autoComplete: 'off'
+    autoComplete: 'off',
+    disabled: Boolean(disabled)
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,
     inputMode: inputMode,
@@ -422,7 +443,9 @@ export var useField = function useField(params) {
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown,
     onMouseUp: handleInputMouseUp,
+    onClear: handleClearValue,
     error: inputError,
-    ref: handleRef
+    ref: handleRef,
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

package/legacy/internals/utils/date-utils.js

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

package/legacy/locales/beBY.js

@@ -62,6 +62,8 @@ var beBYPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "\u0410\u0431\u0440\u0430\u0446\u044C \u0447\u0430\u0441, \u0430\u0431\u0440\u044B\u043D\u044B \u0447\u0430\u0441  ".concat(utils.format(value, 'fullTime')) : 'Абраць час';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'абраць час',
   dateTableLabel: 'абраць дату',

package/legacy/locales/caES.js

@@ -61,6 +61,8 @@ var caESPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Tria l'hora, l'hora triada \xE9s ".concat(utils.format(value, 'fullTime')) : "Tria l'hora";
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'tria la data',
   dateTableLabel: "tria l'hora",

package/legacy/locales/csCZ.js

@@ -63,6 +63,8 @@ var csCZPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Vyberte \u010Das, vybran\xFD \u010Das je ".concat(utils.format(value, 'fullTime')) : 'Vyberte čas';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'vyberte čas',
   dateTableLabel: 'vyberte datum',

package/legacy/locales/daDK.js

@@ -63,6 +63,8 @@ var daDKPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "V\xE6lg tidspunkt, valgte tidspunkt er ".concat(utils.format(value, 'fullTime')) : 'Vælg tidspunkt';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'vælg tidspunkt',
   dateTableLabel: 'vælg dato',

package/legacy/locales/deDE.js

@@ -63,6 +63,8 @@ var deDEPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Uhrzeit ausw\xE4hlen, gew\xE4hlte Uhrzeit ist ".concat(utils.format(value, 'fullTime')) : 'Uhrzeit auswählen';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'Uhrzeit auswählen',
   dateTableLabel: 'Datum auswählen',

package/legacy/locales/elGR.js

@@ -61,6 +61,8 @@ var elGRPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CE\u03C1\u03B1, \u03B7 \u03B5\u03C0\u03B9\u03BB\u03B5\u03B3\u03BC\u03AD\u03BD\u03B7 \u03CE\u03C1\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 ".concat(utils.format(value, 'fullTime')) : 'Επιλέξτε ώρα';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'επιλέξτε ώρα',
   dateTableLabel: 'επιλέξτε ημερομηνία',

package/legacy/locales/enUS.js

@@ -58,6 +58,7 @@ var enUSPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Choose time, selected time is ".concat(utils.format(value, 'fullTime')) : 'Choose time';
   },
+  fieldClearLabel: 'Clear value',
   // Table labels
   timeTableLabel: 'pick time',
   dateTableLabel: 'pick date',

package/legacy/locales/esES.js

@@ -61,6 +61,8 @@ var esESPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Elige la hora, la hora elegido es ".concat(utils.format(value, 'fullTime')) : 'Elige la hora';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'elige la fecha',
   dateTableLabel: 'elige la hora',

package/legacy/locales/faIR.js

@@ -61,6 +61,8 @@ var faIRPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "\u0633\u0627\u0639\u062A \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F\u060C \u0633\u0627\u0639\u062A \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647 ".concat(utils.format(value, 'fullTime'), " \u0645\u06CC \u0628\u0627\u0634\u062F") : 'ساعت را انتخاب کنید';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'انتخاب تاریخ',
   dateTableLabel: 'انتخاب ساعت',

package/legacy/locales/fiFI.js

@@ -61,6 +61,8 @@ var fiFIPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Valitse aika, valittu aika on ".concat(utils.format(value, 'fullTime')) : 'Valitse aika';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'valitse aika',
   dateTableLabel: 'valitse päivä',

package/legacy/locales/frFR.js

@@ -61,6 +61,8 @@ var frFRPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "Choisir l'heure, l'heure s\xE9lectionn\xE9e est ".concat(utils.format(value, 'fullTime')) : "Choisir l'heure";
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: "choix de l'heure",
   dateTableLabel: 'choix de la date',

package/legacy/locales/heIL.js

@@ -61,6 +61,8 @@ var heILPickers = {
   openTimePickerDialogue: function openTimePickerDialogue(value, utils) {
     return value !== null && utils.isValid(value) ? "\u05D1\u05D7\u05D9\u05E8\u05EA \u05E9\u05E2\u05D4, \u05D4\u05E9\u05E2\u05D4 \u05E9\u05E0\u05D1\u05D7\u05E8\u05D4 \u05D4\u05D9\u05D0 ".concat(utils.format(value, 'fullTime')) : 'בחירת שעה';
   },
+  // fieldClearLabel: 'Clear value',
+
   // Table labels
   timeTableLabel: 'בחירת שעה',
   dateTableLabel: 'בחירת תאריך',