@mui/x-date-pickers 6.16.1 → 6.16.3

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

@@ -171,6 +171,11 @@ export var useField = function useField(params) {
       return;
     }
     var targetValue = event.target.value;
+    if (targetValue === '') {
+      resetCharacterQuery();
+      clearValue();
+      return;
+    }
     var eventData = event.nativeEvent.data;
     // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data`
     // usual changes have only the currently typed character in the `event.nativeEvent.data`
@@ -210,8 +215,13 @@ export var useField = function useField(params) {
       var activeSectionEndRelativeToNewValue = cleanValueStr.length - prevValueStr.length + activeSection.end - cleanString(activeSection.endSeparator || '').length;
       keyPressed = cleanValueStr.slice(activeSection.start + cleanString(activeSection.startSeparator || '').length, activeSectionEndRelativeToNewValue);
     }
-    if (isAndroid() && keyPressed.length === 0) {
-      setTempAndroidValueStr(valueStr);
+    if (keyPressed.length === 0) {
+      if (isAndroid()) {
+        setTempAndroidValueStr(valueStr);
+      } else {
+        resetCharacterQuery();
+        clearActiveSection();
+      }
       return;
     }
     applyCharacterEditing({
@@ -269,7 +279,7 @@ export var useField = function useField(params) {
         }
 
       // Reset the value of the selected section
-      case ['Backspace', 'Delete'].includes(event.key):
+      case event.key === 'Delete':
         {
           event.preventDefault();
           if (readOnly) {
@@ -330,7 +340,7 @@ export var useField = function useField(params) {
       // Fix scroll jumping on iOS browser: https://github.com/mui/mui-x/issues/8321
       var currentScrollTop = inputRef.current.scrollTop;
       // On multi input range pickers we want to update selection range only for the active input
-      // This helps avoiding the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+      // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
       // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
       if (inputRef.current === getActiveElement(document)) {
         inputRef.current.setSelectionRange(selectionStart, selectionEnd);

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

@@ -312,7 +312,7 @@ export var doesSectionFormatHaveLeadingZeros = function doesSectionFormatHaveLea
       }
     case 'seconds':
       {
-        return utils.formatByString(utils.setMinutes(now, 1), format).length > 1;
+        return utils.formatByString(utils.setSeconds(now, 1), format).length > 1;
       }
     default:
       {

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

@@ -137,6 +137,9 @@ export var useFieldState = function useFieldState(params) {
         tempValueStrAndroid: null
       });
     });
+    if (valueManager.areValuesEqual(utils, state.value, value)) {
+      return;
+    }
     var context = {
       validationError: validator({
         adapter: adapter,
@@ -158,9 +161,6 @@ export var useFieldState = function useFieldState(params) {
     return addPositionPropertiesToSections(newSections, isRTL);
   };
   var clearValue = function clearValue() {
-    if (valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue)) {
-      return;
-    }
     publishValue({
       value: valueManager.emptyValue,
       referenceValue: state.referenceValue,
@@ -172,16 +172,13 @@ export var useFieldState = function useFieldState(params) {
       return;
     }
     var activeSection = state.sections[selectedSectionIndexes.startIndex];
-    if (activeSection.value === '') {
-      return;
-    }
     var activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
     var nonEmptySectionCountBefore = activeDateManager.getSections(state.sections).filter(function (section) {
       return section.value !== '';
     }).length;
-    var isTheOnlyNonEmptySection = nonEmptySectionCountBefore === 1;
+    var hasNoOtherNonEmptySections = nonEmptySectionCountBefore === (activeSection.value === '' ? 0 : 1);
     var newSections = setSectionValue(selectedSectionIndexes.startIndex, '');
-    var newActiveDate = isTheOnlyNonEmptySection ? null : utils.date(new Date(''));
+    var newActiveDate = hasNoOtherNonEmptySections ? null : utils.date(new Date(''));
     var newValues = activeDateManager.getNewValuesFromNewActiveDate(newActiveDate);
     if ((newActiveDate != null && !utils.isValid(newActiveDate)) !== (activeDateManager.date != null && !utils.isValid(activeDateManager.date))) {
       publishValue(_extends({}, newValues, {

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

@@ -1,7 +1,8 @@
+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 = ["views", "format"];
-import { resolveTimeFormat, isTimeView } from './time-utils';
+import { resolveTimeFormat, isTimeView, isInternalTimeView } from './time-utils';
 import { resolveDateFormat } from './date-utils';
 export var resolveDateTimeFormat = function resolveDateTimeFormat(utils, _ref) {
   var views = _ref.views,
@@ -36,4 +37,35 @@ export var resolveDateTimeFormat = function resolveDateTimeFormat(utils, _ref) {
     views: dateViews
   }, other), false);
   return "".concat(dateFormat, " ").concat(timeFormat);
-};
+};
+var resolveViews = function resolveViews(ampm, views, shouldUseSingleColumn) {
+  if (shouldUseSingleColumn) {
+    return views.filter(function (view) {
+      return !isInternalTimeView(view) || view === 'hours';
+    });
+  }
+  return ampm ? [].concat(_toConsumableArray(views), ['meridiem']) : views;
+};
+var resolveShouldRenderTimeInASingleColumn = function resolveShouldRenderTimeInASingleColumn(timeSteps, threshold) {
+  var _timeSteps$hours, _timeSteps$minutes;
+  return 24 * 60 / (((_timeSteps$hours = timeSteps.hours) != null ? _timeSteps$hours : 1) * ((_timeSteps$minutes = timeSteps.minutes) != null ? _timeSteps$minutes : 5)) <= threshold;
+};
+export function resolveTimeViewsResponse(_ref2) {
+  var inThreshold = _ref2.thresholdToRenderTimeInASingleColumn,
+    ampm = _ref2.ampm,
+    inTimeSteps = _ref2.timeSteps,
+    views = _ref2.views;
+  var thresholdToRenderTimeInASingleColumn = inThreshold != null ? inThreshold : 24;
+  var timeSteps = _extends({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, inTimeSteps);
+  var shouldRenderTimeInASingleColumn = resolveShouldRenderTimeInASingleColumn(timeSteps, thresholdToRenderTimeInASingleColumn);
+  return {
+    thresholdToRenderTimeInASingleColumn: thresholdToRenderTimeInASingleColumn,
+    timeSteps: timeSteps,
+    shouldRenderTimeInASingleColumn: shouldRenderTimeInASingleColumn,
+    views: resolveViews(ampm, views, shouldRenderTimeInASingleColumn)
+  };
+}

package/legacy/locales/esES.js

@@ -68,7 +68,7 @@ var esESPickers = {
   dateTableLabel: 'elige la hora',
   // Field section placeholders
   fieldYearPlaceholder: function fieldYearPlaceholder(params) {
-    return 'Y'.repeat(params.digitAmount);
+    return 'A'.repeat(params.digitAmount);
   },
   fieldMonthPlaceholder: function fieldMonthPlaceholder(params) {
     return params.contentType === 'letter' ? 'MMMM' : 'MM';

package/locales/esES.js

@@ -47,7 +47,7 @@ const esESPickers = {
   timeTableLabel: 'elige la fecha',
   dateTableLabel: 'elige la hora',
   // Field section placeholders
-  fieldYearPlaceholder: params => 'Y'.repeat(params.digitAmount),
+  fieldYearPlaceholder: params => 'A'.repeat(params.digitAmount),
   fieldMonthPlaceholder: params => params.contentType === 'letter' ? 'MMMM' : 'MM',
   fieldDayPlaceholder: () => 'DD',
   fieldWeekDayPlaceholder: params => params.contentType === 'letter' ? 'EEEE' : 'EE',

package/modern/AdapterDayjs/AdapterDayjs.js

@@ -295,13 +295,15 @@ export class AdapterDayjs {
       return parsedValue.locale(this.locale);
     };
     this.getTimezone = value => {
-      if (this.hasUTCPlugin() && value.isUTC()) {
-        return 'UTC';
-      }
       if (this.hasTimezonePlugin()) {
         // @ts-ignore
         const zone = value.$x?.$timezone;
-        return zone ?? 'system';
+        if (zone) {
+          return zone;
+        }
+      }
+      if (this.hasUTCPlugin() && value.isUTC()) {
+        return 'UTC';
       }
       return 'system';
     };

package/modern/AdapterMoment/AdapterMoment.js

@@ -239,16 +239,13 @@ export class AdapterMoment {
       return this.createTZDate(value, timezone);
     };
     this.getTimezone = value => {
-      if (value.isUTC()) {
-        return 'UTC';
-      }
-
       // @ts-ignore
       // eslint-disable-next-line no-underscore-dangle
       const zone = value._z?.name;
+      const defaultZone = value.isUTC() ? 'UTC' : 'system';
 
       // @ts-ignore
-      return zone ?? this.moment.defaultZone?.name ?? 'system';
+      return zone ?? this.moment.defaultZone?.name ?? defaultZone;
     };
     this.setTimezone = (value, timezone) => {
       if (this.getTimezone(value) === timezone) {

package/modern/DateField/DateField.js

@@ -12,6 +12,16 @@ import { refType } from '@mui/utils';
 import { useDateField } from './useDateField';
 import { useClearableField } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [DateField](http://mui.com/x/react-date-pickers/date-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [DateField API](https://mui.com/x/api/date-pickers/date-field/)
+ */
 const DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
   const themeProps = useThemeProps({
     props: inProps,
@@ -102,7 +112,7 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),

package/modern/DatePicker/DatePicker.js

@@ -10,6 +10,16 @@ import { DesktopDatePicker } from '../DesktopDatePicker';
 import { MobileDatePicker } from '../MobileDatePicker';
 import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DatePicker API](https://mui.com/x/api/date-pickers/date-picker/)
+ */
 const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/DatePicker/DatePickerToolbar.js

@@ -39,6 +39,16 @@ const DatePickerToolbarTitle = styled(Typography, {
 }) => _extends({}, ownerState.isLandscape && {
   margin: 'auto 16px auto auto'
 }));
+/**
+ * Demos:
+ *
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DatePickerToolbar API](https://mui.com/x/api/date-pickers/date-picker-toolbar/)
+ */
 const DatePickerToolbar = /*#__PURE__*/React.forwardRef(function DatePickerToolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/DateTimeField/DateTimeField.js

@@ -12,6 +12,16 @@ import { refType } from '@mui/utils';
 import { useDateTimeField } from './useDateTimeField';
 import { useClearableField } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [DateTimeField](http://mui.com/x/react-date-pickers/date-time-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [DateTimeField API](https://mui.com/x/api/date-pickers/date-time-field/)
+ */
 const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
   const themeProps = useThemeProps({
     props: inProps,
@@ -107,7 +117,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
   color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),

package/modern/DateTimePicker/DateTimePicker.js

@@ -10,6 +10,16 @@ import { DesktopDateTimePicker } from '../DesktopDateTimePicker';
 import { MobileDateTimePicker } from '../MobileDateTimePicker';
 import { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from '../internals/utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DateTimePicker API](https://mui.com/x/api/date-pickers/date-time-picker/)
+ */
 const DateTimePicker = /*#__PURE__*/React.forwardRef(function DateTimePicker(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -377,6 +387,11 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
    * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.

package/modern/DateTimePicker/DateTimePickerTabs.js

@@ -47,6 +47,17 @@ const DateTimePickerTabsRoot = styled(Tabs, {
     }
   }
 }));
+
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DateTimePickerTabs API](https://mui.com/x/api/date-pickers/date-time-picker-tabs/)
+ */
 const DateTimePickerTabs = function DateTimePickerTabs(inProps) {
   const props = useThemeProps({
     props: inProps,

package/modern/DateTimePicker/DateTimePickerToolbar.js

@@ -153,6 +153,17 @@ const DateTimePickerToolbarAmPmSelection = styled('div', {
     fontSize: 17
   }
 }));
+
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [DateTimePickerToolbar API](https://mui.com/x/api/date-pickers/date-time-picker-toolbar/)
+ */
 function DateTimePickerToolbar(inProps) {
   const props = useThemeProps({
     props: inProps,

package/modern/DayCalendarSkeleton/DayCalendarSkeleton.js

@@ -60,10 +60,9 @@ DayCalendarSkeletonDay.propTypes = {
 const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 0, 0, 0]];
 
 /**
- *
  * Demos:
  *
- * - [Date Picker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
  *
  * API:
  *

package/modern/DesktopDatePicker/DesktopDatePicker.js

@@ -12,6 +12,16 @@ import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { resolveDateFormat } from '../internals/utils/date-utils';
+/**
+ * Demos:
+ *
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDatePicker API](https://mui.com/x/api/date-pickers/desktop-date-picker/)
+ */
 const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();

package/modern/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -13,18 +13,29 @@ import { validateDateTime } from '../internals/utils/validation/validateDateTime
 import { CalendarIcon } from '../icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
-import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
+import { resolveDateTimeFormat, resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopDateTimePicker API](https://mui.com/x/api/date-pickers/desktop-date-time-picker/)
+ */
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();
 
   // Props with the default values common to all date time pickers
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
-  const timeSteps = _extends({
-    hours: 1,
-    minutes: 5,
-    seconds: 5
-  }, defaultizedProps.timeSteps);
+  const {
+    shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn,
+    views,
+    timeSteps
+  } = resolveTimeViewsResponse(defaultizedProps);
   const shouldUseNewRenderer = !defaultizedProps.viewRenderers || Object.keys(defaultizedProps.viewRenderers).length === 0;
   const viewRenderers =
   // we can only ensure the expected two-column layout if none of the renderers are overridden
@@ -53,10 +64,12 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   const props = _extends({}, defaultizedProps, {
     viewRenderers,
     format: resolveDateTimeFormat(utils, defaultizedProps),
-    views: defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views,
+    views,
     yearsPerRow: defaultizedProps.yearsPerRow ?? 4,
     ampmInClock,
     timeSteps,
+    thresholdToRenderTimeInASingleColumn,
+    shouldRenderTimeInASingleColumn,
     slots: _extends({
       field: DateTimeField,
       openPickerIcon: CalendarIcon
@@ -427,6 +440,11 @@ DesktopDateTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
   /**
    * The time steps between two time unit options.
    * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.

package/modern/DesktopTimePicker/DesktopTimePicker.js

@@ -13,19 +13,28 @@ import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 import { resolveTimeFormat } from '../internals/utils/time-utils';
+import { resolveTimeViewsResponse } from '../internals/utils/date-time-utils';
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [DesktopTimePicker API](https://mui.com/x/api/date-pickers/desktop-time-picker/)
+ */
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
-  const thresholdToRenderTimeInASingleColumn = defaultizedProps.thresholdToRenderTimeInASingleColumn ?? 24;
-  const timeSteps = _extends({
-    hours: 1,
-    minutes: 5,
-    seconds: 5
-  }, defaultizedProps.timeSteps);
-  const shouldRenderTimeInASingleColumn = 24 * 60 / (timeSteps.hours * timeSteps.minutes) <= thresholdToRenderTimeInASingleColumn;
+  const {
+    shouldRenderTimeInASingleColumn,
+    views: resolvedViews,
+    timeSteps
+  } = resolveTimeViewsResponse(defaultizedProps);
   const renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
     hours: renderTimeView,
@@ -37,7 +46,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   const shouldHoursRendererContainMeridiemView = viewRenderers.hours?.name === renderMultiSectionDigitalClockTimeView.name;
-  const views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
+  const views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(view => view !== 'meridiem') : resolvedViews;
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {

package/modern/DigitalClock/DigitalClock.js

@@ -79,6 +79,16 @@ const DigitalClockItem = styled(MenuItem, {
     backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
   }
 }));
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/)
+ *
+ * API:
+ *
+ * - [DigitalClock API](https://mui.com/x/api/date-pickers/digital-clock/)
+ */
 export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(inProps, ref) {
   const utils = useUtils();
   const containerRef = React.useRef(null);
@@ -152,7 +162,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
     props,
     timezone
   });
-  const handleValueChange = useEventCallback(newValue => handleRawValueChange(newValue, 'finish'));
+  const handleValueChange = useEventCallback(newValue => handleRawValueChange(newValue, 'finish', 'hours'));
   const {
     setValueAndGoToNextView
   } = useViews({

package/modern/LocalizationProvider/LocalizationProvider.js

@@ -9,6 +9,18 @@ export const MuiPickersAdapterContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   MuiPickersAdapterContext.displayName = 'MuiPickersAdapterContext';
 }
+/**
+ * Demos:
+ *
+ * - [Date format and localization](https://mui.com/x/react-date-pickers/adapters-locale/)
+ * - [Calendar systems](https://mui.com/x/react-date-pickers/calendar-systems/)
+ * - [Translated components](https://mui.com/x/react-date-pickers/localization/)
+ * - [UTC and timezones](https://mui.com/x/react-date-pickers/timezone/)
+ *
+ * API:
+ *
+ * - [LocalizationProvider API](https://mui.com/x/api/date-pickers/localization-provider/)
+ */
 export const LocalizationProvider = function LocalizationProvider(inProps) {
   const {
       localeText: inLocaleText

package/modern/MobileDatePicker/MobileDatePicker.js

@@ -11,6 +11,16 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { resolveDateFormat } from '../internals/utils/date-utils';
+/**
+ * Demos:
+ *
+ * - [DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
+ */
 const MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -13,6 +13,16 @@ import { extractValidationProps } from '../internals/utils/validation/extractVal
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
+ */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -12,6 +12,16 @@ import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { resolveTimeFormat } from '../internals/utils/time-utils';
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
+ */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
   const localeText = useLocaleText();
   const utils = useUtils();

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -41,6 +41,16 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, {
   width: '100%',
   borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [DigitalClock](https://mui.com/x/react-date-pickers/digital-clock/)
+ *
+ * API:
+ *
+ * - [MultiSectionDigitalClock API](https://mui.com/x/api/date-pickers/multi-section-digital-clock/)
+ */
 export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClock(inProps, ref) {
   const utils = useUtils();
   const props = useThemeProps({

package/modern/PickersActionBar/PickersActionBar.js

@@ -7,6 +7,16 @@ import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
 import { useLocaleText } from '../internals/hooks/useUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
+ * - [Custom layout](https://mui.com/x/react-date-pickers/custom-layout/)
+ *
+ * API:
+ *
+ * - [PickersActionBar API](https://mui.com/x/api/date-pickers/pickers-action-bar/)
+ */
 function PickersActionBar(props) {
   const {
       onAccept,