@mui/x-date-pickers 6.16.0 → 6.16.2

package/legacy/DateCalendar/DayCalendar.js

@@ -73,7 +73,7 @@ var PickersCalendarWeekDayLabel = styled(Typography, {
   };
 });
 var PickersCalendarWeekNumberLabel = styled(Typography, {
-  name: 'MuiDayPicker',
+  name: 'MuiDayCalendar',
   slot: 'WeekNumberLabel',
   overridesResolver: function overridesResolver(_, styles) {
     return styles.weekNumberLabel;
@@ -92,7 +92,7 @@ var PickersCalendarWeekNumberLabel = styled(Typography, {
   };
 });
 var PickersCalendarWeekNumber = styled(Typography, {
-  name: 'MuiDayPicker',
+  name: 'MuiDayCalendar',
   slot: 'WeekNumber',
   overridesResolver: function overridesResolver(_, styles) {
     return styles.weekNumber;

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -13,7 +13,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getPickersFadeTransitionGroupUtilityClass, classes);
 };
-var animationDuration = 500;
 var PickersFadeTransitionGroupRoot = styled(TransitionGroup, {
   name: 'MuiPickersFadeTransitionGroup',
   slot: 'Root',
@@ -38,6 +37,7 @@ export function PickersFadeTransitionGroup(inProps) {
     reduceAnimations = props.reduceAnimations,
     transKey = props.transKey;
   var classes = useUtilityClasses(props);
+  var theme = useTheme();
   if (reduceAnimations) {
     return children;
   }
@@ -48,8 +48,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/legacy/DateCalendar/PickersSlideTransition.js

@@ -4,8 +4,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _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";
@@ -21,7 +21,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getPickersSlideTransitionUtilityClass, classes);
 };
-export var slideAnimationDuration = 350;
 var PickersSlideTransitionRoot = styled(TransitionGroup, {
   name: 'MuiPickersSlideTransition',
   slot: 'Root',
@@ -32,7 +31,7 @@ var PickersSlideTransitionRoot = styled(TransitionGroup, {
   var _ref8;
   var theme = _ref7.theme;
   var slideTransition = theme.transitions.create('transform', {
-    duration: slideAnimationDuration,
+    duration: theme.transitions.duration.complex,
     easing: 'cubic-bezier(0.35, 0.8, 0.4, 1)'
   });
   return _ref8 = {
@@ -87,6 +86,7 @@ export function PickersSlideTransition(inProps) {
     providedClasses = props.classes,
     other = _objectWithoutProperties(props, _excluded);
   var classes = useUtilityClasses(props);
+  var theme = useTheme();
   if (reduceAnimations) {
     return /*#__PURE__*/_jsx("div", {
       className: clsx(classes.root, className),
@@ -110,7 +110,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/legacy/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/)
+ */
 var DateField = /*#__PURE__*/React.forwardRef(function DateField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
   var themeProps = useThemeProps({

package/legacy/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/)
+ */
 var DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
   var themeProps = useThemeProps({

package/legacy/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/)
+ */
 var DateTimePicker = /*#__PURE__*/React.forwardRef(function DateTimePicker(inProps, ref) {
   var props = useThemeProps({
     props: inProps,
@@ -376,6 +386,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/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -14,7 +13,17 @@ 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/)
+ */
 var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
@@ -22,11 +31,11 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
 
   // Props with the default values common to all date time pickers
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
-  var timeSteps = _extends({
-    hours: 1,
-    minutes: 5,
-    seconds: 5
-  }, defaultizedProps.timeSteps);
+  var _resolveTimeViewsResp = resolveTimeViewsResponse(defaultizedProps),
+    shouldRenderTimeInASingleColumn = _resolveTimeViewsResp.shouldRenderTimeInASingleColumn,
+    thresholdToRenderTimeInASingleColumn = _resolveTimeViewsResp.thresholdToRenderTimeInASingleColumn,
+    views = _resolveTimeViewsResp.views,
+    timeSteps = _resolveTimeViewsResp.timeSteps;
   var shouldUseNewRenderer = !defaultizedProps.viewRenderers || Object.keys(defaultizedProps.viewRenderers).length === 0;
   var viewRenderers =
   // we can only ensure the expected two-column layout if none of the renderers are overridden
@@ -55,10 +64,12 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
     format: resolveDateTimeFormat(utils, defaultizedProps),
-    views: defaultizedProps.ampm ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views,
+    views: views,
     yearsPerRow: (_defaultizedProps$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     ampmInClock: ampmInClock,
     timeSteps: timeSteps,
+    thresholdToRenderTimeInASingleColumn: thresholdToRenderTimeInASingleColumn,
+    shouldRenderTimeInASingleColumn: shouldRenderTimeInASingleColumn,
     slots: _extends({
       field: DateTimeField,
       openPickerIcon: CalendarIcon
@@ -431,6 +442,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/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -14,20 +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/)
+ */
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
+  var _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();
   var utils = useUtils();
 
   // Props with the default values common to all time pickers
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
-  var thresholdToRenderTimeInASingleColumn = (_defaultizedProps$thr = defaultizedProps.thresholdToRenderTimeInASingleColumn) != null ? _defaultizedProps$thr : 24;
-  var timeSteps = _extends({
-    hours: 1,
-    minutes: 5,
-    seconds: 5
-  }, defaultizedProps.timeSteps);
-  var shouldRenderTimeInASingleColumn = 24 * 60 / (timeSteps.hours * timeSteps.minutes) <= thresholdToRenderTimeInASingleColumn;
+  var _resolveTimeViewsResp = resolveTimeViewsResponse(defaultizedProps),
+    shouldRenderTimeInASingleColumn = _resolveTimeViewsResp.shouldRenderTimeInASingleColumn,
+    resolvedViews = _resolveTimeViewsResp.views,
+    timeSteps = _resolveTimeViewsResp.timeSteps;
   var renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   var viewRenderers = _extends({
     hours: renderTimeView,
@@ -39,7 +46,9 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
   var actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
   // Need to avoid adding the `meridiem` view when unexpected renderer is specified
   var shouldHoursRendererContainMeridiemView = ((_viewRenderers$hours = viewRenderers.hours) == null ? void 0 : _viewRenderers$hours.name) === renderMultiSectionDigitalClockTimeView.name;
-  var views = defaultizedProps.ampm && shouldHoursRendererContainMeridiemView ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views;
+  var views = !shouldHoursRendererContainMeridiemView ? resolvedViews.filter(function (view) {
+    return view !== 'meridiem';
+  }) : resolvedViews;
 
   // Props with the default values specific to the desktop variant
   var props = _extends({}, defaultizedProps, {

package/legacy/DigitalClock/DigitalClock.js

@@ -166,7 +166,7 @@ export var DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(in
     timezone: timezone
   });
   var handleValueChange = useEventCallback(function (newValue) {
-    return handleRawValueChange(newValue, 'finish');
+    return handleRawValueChange(newValue, 'finish', 'hours');
   });
   var _useViews = useViews({
       view: inView,

package/legacy/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/)
+ */
 var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();

package/legacy/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/)
+ */
 var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2, _props$localeText$ope, _props$localeText;
   var localeText = useLocaleText();

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/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/)
+ */
 var StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTimePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo, _defaultizedProps$slo2;
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');

package/legacy/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/)
+ */
 var StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$slo;
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');

package/legacy/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/)
+ */
 var TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref) {
   var _ref, _slots$textField, _slotProps$textField;
   var themeProps = useThemeProps({

package/legacy/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/)
+ */
 var TimePicker = /*#__PURE__*/React.forwardRef(function TimePicker(inProps, ref) {
   var props = useThemeProps({
     props: inProps,

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

@@ -4,10 +4,13 @@ import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import { resolveComponentProps } from '@mui/base/utils';
 import { DateCalendar } from '../DateCalendar';
-import { MultiSectionDigitalClock, multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
+import { multiSectionDigitalClockSectionClasses } from '../MultiSectionDigitalClock';
 import { DateTimeViewWrapper } from '../internals/components/DateTimeViewWrapper';
 import { isInternalTimeView } from '../internals/utils/time-utils';
 import { isDatePickerView } from '../internals/utils/date-utils';
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
+import { digitalClockClasses } from '../DigitalClock';
+import { VIEW_HEIGHT } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref) {
@@ -61,8 +64,41 @@ export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref)
     disableIgnoringDatePartForTimeValidation = _ref.disableIgnoringDatePartForTimeValidation,
     timeSteps = _ref.timeSteps,
     skipDisabled = _ref.skipDisabled,
-    timeViewsCount = _ref.timeViewsCount;
+    timeViewsCount = _ref.timeViewsCount,
+    shouldRenderTimeInASingleColumn = _ref.shouldRenderTimeInASingleColumn;
   var isActionBarVisible = !!((_resolveComponentProp = resolveComponentProps((_slotProps$actionBar = slotProps == null ? void 0 : slotProps.actionBar) != null ? _slotProps$actionBar : componentsProps == null ? void 0 : componentsProps.actionBar, {})) != null && (_resolveComponentProp = _resolveComponentProp.actions) != null && _resolveComponentProp.length);
+  var commonTimeProps = {
+    view: isInternalTimeView(view) ? view : 'hours',
+    onViewChange: onViewChange,
+    focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
+    onFocusedViewChange: onFocusedViewChange,
+    views: views.filter(isInternalTimeView),
+    value: value,
+    defaultValue: defaultValue,
+    referenceDate: referenceDate,
+    onChange: onChange,
+    className: className,
+    classes: classes,
+    disableFuture: disableFuture,
+    disablePast: disablePast,
+    minTime: minTime,
+    maxTime: maxTime,
+    shouldDisableTime: shouldDisableTime,
+    shouldDisableClock: shouldDisableClock,
+    minutesStep: minutesStep,
+    ampm: ampm,
+    components: components,
+    componentsProps: componentsProps,
+    slots: slots,
+    slotProps: slotProps,
+    readOnly: readOnly,
+    disabled: disabled,
+    autoFocus: autoFocus,
+    disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
+    timeSteps: timeSteps,
+    skipDisabled: skipDisabled,
+    timezone: timezone
+  };
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(DateTimeViewWrapper, {
       children: [/*#__PURE__*/_jsx(DateCalendar, {
@@ -109,44 +145,26 @@ export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref)
       }), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(Divider, {
           orientation: "vertical"
-        }), /*#__PURE__*/_jsx(MultiSectionDigitalClock, {
+        }), shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView(_extends({}, commonTimeProps, {
+          view: 'hours',
+          views: ['hours'],
+          focusedView: focusedView && isInternalTimeView(focusedView) ? 'hours' : null,
+          sx: _extends(_defineProperty({
+            width: 'auto'
+          }, "&.".concat(digitalClockClasses.root), {
+            maxHeight: VIEW_HEIGHT
+          }), Array.isArray(sx) ? sx : [sx])
+        })) : renderMultiSectionDigitalClockTimeView(_extends({}, commonTimeProps, {
           view: isInternalTimeView(view) ? view : 'hours',
-          onViewChange: onViewChange,
-          focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
-          onFocusedViewChange: onFocusedViewChange,
           views: views.filter(isInternalTimeView),
-          value: value,
-          defaultValue: defaultValue,
-          referenceDate: referenceDate,
-          onChange: onChange,
-          className: className,
-          classes: classes,
-          disableFuture: disableFuture,
-          disablePast: disablePast,
-          minTime: minTime,
-          maxTime: maxTime,
-          shouldDisableTime: shouldDisableTime,
-          shouldDisableClock: shouldDisableClock,
-          minutesStep: minutesStep,
-          ampm: ampm,
-          components: components,
-          componentsProps: componentsProps,
-          slots: slots,
-          slotProps: slotProps,
-          readOnly: readOnly,
-          disabled: disabled,
+          focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
           sx: _extends(_defineProperty({
             borderBottom: 0,
             width: 'auto'
           }, ".".concat(multiSectionDigitalClockSectionClasses.root), {
             maxHeight: '100%'
-          }), Array.isArray(sx) ? sx : [sx]),
-          autoFocus: autoFocus,
-          disableIgnoringDatePartForTimeValidation: disableIgnoringDatePartForTimeValidation,
-          timeSteps: timeSteps,
-          skipDisabled: skipDisabled,
-          timezone: timezone
-        })]
+          }), Array.isArray(sx) ? sx : [sx])
+        }))]
       })]
     }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]
   });

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.16.0
+ * @mui/x-date-pickers v6.16.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/FakeTextField/FakeTextField.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function FakeTextField(props) {
+  var sections = props.sections;
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "row",
+    spacing: 1,
+    children: sections.map(function (section) {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [section.startSeparator, /*#__PURE__*/_jsx("input", {
+          value: section.value,
+          onChange: function onChange() {}
+        }), section.endSeparator]
+      });
+    })
+  });
+}

package/legacy/internals/components/FakeTextField/index.js

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

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;