@mui/x-date-pickers 6.16.0 → 6.16.2

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", "clearable", "onClear"];
+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';
@@ -44,6 +44,7 @@ export var useField = function useField(params) {
     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,
@@ -429,7 +430,8 @@ export var useField = function useField(params) {
   });
   return _extends({
     placeholder: placeholder,
-    autoComplete: 'off'
+    autoComplete: 'off',
+    disabled: Boolean(disabled)
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,
     inputMode: inputMode,
@@ -444,6 +446,6 @@ export var useField = function useField(params) {
     onClear: handleClearValue,
     error: inputError,
     ref: handleRef,
-    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly)
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

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/DateCalendar/DateCalendar.js

@@ -21,6 +21,7 @@ import { useDefaultReduceAnimations } from '../internals/hooks/useDefaultReduceA
 import { getDateCalendarUtilityClass } from './dateCalendarClasses';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
+import { VIEW_HEIGHT } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -61,7 +62,8 @@ const DateCalendarRoot = styled(PickerViewRoot, {
   overridesResolver: (props, styles) => styles.root
 })({
   display: 'flex',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  height: VIEW_HEIGHT
 });
 const DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   name: 'MuiDateCalendar',

package/modern/DateCalendar/DayCalendar.js

@@ -67,7 +67,7 @@ const PickersCalendarWeekDayLabel = styled(Typography, {
   color: (theme.vars || theme).palette.text.secondary
 }));
 const PickersCalendarWeekNumberLabel = styled(Typography, {
-  name: 'MuiDayPicker',
+  name: 'MuiDayCalendar',
   slot: 'WeekNumberLabel',
   overridesResolver: (_, styles) => styles.weekNumberLabel
 })(({
@@ -83,7 +83,7 @@ const PickersCalendarWeekNumberLabel = styled(Typography, {
   color: theme.palette.text.disabled
 }));
 const PickersCalendarWeekNumber = styled(Typography, {
-  name: 'MuiDayPicker',
+  name: 'MuiDayCalendar',
   slot: 'WeekNumber',
   overridesResolver: (_, styles) => styles.weekNumber
 })(({

package/modern/DateCalendar/PickersFadeTransitionGroup.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import Fade from '@mui/material/Fade';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { TransitionGroup } from 'react-transition-group';
+import Fade from '@mui/material/Fade';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
 import { getPickersFadeTransitionGroupUtilityClass } from './pickersFadeTransitionGroupClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
@@ -15,7 +15,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes);
 };
-const animationDuration = 500;
 const PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   name: 'MuiPickersFadeTransitionGroup',
   slot: 'Root',
@@ -40,6 +39,7 @@ export function PickersFadeTransitionGroup(inProps) {
     transKey
   } = props;
   const classes = useUtilityClasses(props);
+  const theme = useTheme();
   if (reduceAnimations) {
     return children;
   }
@@ -50,8 +50,8 @@ export function PickersFadeTransitionGroup(inProps) {
       mountOnEnter: true,
       unmountOnExit: true,
       timeout: {
-        appear: animationDuration,
-        enter: animationDuration / 2,
+        appear: theme.transitions.duration.enteringScreen,
+        enter: theme.transitions.duration.enteringScreen,
         exit: 0
       },
       children: children

package/modern/DateCalendar/PickersSlideTransition.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["children", "className", "reduceAnimations", "slideDirection", "transKey", "classes"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled, useTheme, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { getPickersSlideTransitionUtilityClass, pickersSlideTransitionClasses } from './pickersSlideTransitionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +22,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
 };
-export const slideAnimationDuration = 350;
 const PickersSlideTransitionRoot = styled(TransitionGroup, {
   name: 'MuiPickersSlideTransition',
   slot: 'Root',
@@ -43,7 +42,7 @@ const PickersSlideTransitionRoot = styled(TransitionGroup, {
   theme
 }) => {
   const slideTransition = theme.transitions.create('transform', {
-    duration: slideAnimationDuration,
+    duration: theme.transitions.duration.complex,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
   });
   return {
@@ -105,6 +104,7 @@ export function PickersSlideTransition(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const classes = useUtilityClasses(props);
+  const theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {
       className: clsx(classes.root, className),
@@ -126,7 +126,7 @@ export function PickersSlideTransition(inProps) {
     children: /*#__PURE__*/_jsx(CSSTransition, _extends({
       mountOnEnter: true,
       unmountOnExit: true,
-      timeout: slideAnimationDuration,
+      timeout: theme.transitions.duration.complex,
       classNames: transitionClasses
     }, other, {
       children: children

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,

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,

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/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

@@ -152,7 +152,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/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/MonthCalendar/MonthCalendar.js

@@ -14,6 +14,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";
 const useUtilityClasses = ownerState => {
   const {
@@ -48,7 +49,9 @@ const 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 const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -7,6 +7,16 @@ import { renderDateViewCalendar } from '../dateViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
 import { validateDateTime } from '../internals/utils/validation/validateDateTime';
+/**
+ * Demos:
+ *
+ * - [DateTimePicker](https://mui.com/x/react-date-pickers/date-time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [StaticDateTimePicker API](https://mui.com/x/api/date-pickers/static-date-time-picker/)
+ */
 const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTimePicker(inProps, ref) {
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -6,6 +6,16 @@ import { renderTimeViewClock } from '../timeViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
 import { validateTime } from '../internals/utils/validation/validateTime';
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/)
+ */
 const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';

package/modern/TimeField/TimeField.js

@@ -12,6 +12,16 @@ import { refType } from '@mui/utils';
 import { useTimeField } from './useTimeField';
 import { useClearableField } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Demos:
+ *
+ * - [TimeField](http://mui.com/x/react-date-pickers/time-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/)
+ */
 const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
   const themeProps = useThemeProps({
     props: inProps,

package/modern/TimePicker/TimePicker.js

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

package/modern/YearCalendar/PickersYear.js

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

package/modern/YearCalendar/YearCalendar.js

@@ -14,6 +14,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";
 const useUtilityClasses = ownerState => {
   const {
@@ -35,6 +36,7 @@ function useYearCalendarDefaultizedProps(props, name) {
     disablePast: false,
     disableFuture: false
   }, themeProps, {
+    yearsPerRow: themeProps.yearsPerRow ?? 3,
     minDate: applyDefaultDate(utils, themeProps.minDate, defaultDates.minDate),
     maxDate: applyDefaultDate(utils, themeProps.maxDate, defaultDates.maxDate)
   });
@@ -50,8 +52,8 @@ const 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,7 +78,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
-      yearsPerRow = 3,
+      yearsPerRow,
       timezone: timezoneProp,
       gridLabelId
     } = props,