@mui/x-date-pickers 6.5.0 → 6.7.0

package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -1,3 +1,4 @@
+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';
@@ -5,35 +6,61 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { renderDateViewCalendar } from '../dateViewRenderers';
-import { useLocaleText, validateDateTime } from '../internals';
-import { Calendar } from '../internals/components/icons';
+import { renderDateViewCalendar } from '../dateViewRenderers/dateViewRenderers';
+import { renderDesktopDateTimeView } from '../dateTimeViewRenderers';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+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';
 var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3;
+  var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all date time pickers
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiDesktopDateTimePicker');
-  var viewRenderers = _extends({
+  var timeSteps = _extends({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, defaultizedProps.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
+  shouldUseNewRenderer ? {
+    day: renderDesktopDateTimeView,
+    month: renderDesktopDateTimeView,
+    year: renderDesktopDateTimeView,
+    hours: renderDesktopDateTimeView,
+    minutes: renderDesktopDateTimeView,
+    seconds: renderDesktopDateTimeView,
+    meridiem: renderDesktopDateTimeView
+  } : _extends({
     day: renderDateViewCalendar,
     month: renderDateViewCalendar,
     year: renderDateViewCalendar,
     hours: null,
     minutes: null,
-    seconds: null
+    seconds: null,
+    meridiem: null
   }, defaultizedProps.viewRenderers);
   var ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : true;
+  // add "accept" action only when the new date time view renderers are used
+  var actionBarActions = shouldUseNewRenderer ? ['accept'] : [];
 
   // Props with the default values specific to the desktop variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
+    views: defaultizedProps.ampm ? [].concat(_toConsumableArray(defaultizedProps.views), ['meridiem']) : defaultizedProps.views,
     yearsPerRow: (_defaultizedProps$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     ampmInClock: ampmInClock,
+    timeSteps: timeSteps,
     slots: _extends({
       field: DateTimeField,
-      openPickerIcon: Calendar
+      openPickerIcon: CalendarIcon
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: function field(ownerState) {
@@ -44,11 +71,15 @@ var DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTi
       },
       toolbar: _extends({
         hidden: true,
-        ampmInClock: ampmInClock
+        ampmInClock: ampmInClock,
+        toolbarVariant: shouldUseNewRenderer ? 'desktop' : 'mobile'
       }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar),
       tabs: _extends({
         hidden: true
-      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.tabs)
+      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.tabs),
+      actionBar: _extends({
+        actions: actionBarActions
+      }, (_defaultizedProps$slo4 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo4.actionBar)
     })
   });
   var _useDesktopPicker = useDesktopPicker({
@@ -295,7 +326,7 @@ DesktopDateTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  openTo: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Force rendering in particular orientation.
    */
@@ -373,6 +404,11 @@ DesktopDateTimePicker.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -387,6 +423,17 @@ 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]),
+  /**
+   * 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]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -397,7 +444,7 @@ DesktopDateTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -406,6 +453,7 @@ DesktopDateTimePicker.propTypes = {
   viewRenderers: PropTypes.shape({
     day: PropTypes.func,
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     month: PropTypes.func,
     seconds: PropTypes.func,

package/legacy/DesktopTimePicker/DesktopTimePicker.js

@@ -6,14 +6,17 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, validateTime } from '../internals';
-import { Clock } from '../internals/components/icons';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateTime } from '../internals/utils/validation/validateTime';
+import { ClockIcon } from '../icons';
 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';
 var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
   var _defaultizedProps$thr, _defaultizedProps$amp, _viewRenderers$hours, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all time pickers
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
@@ -42,12 +45,13 @@ var DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker
     ampmInClock: ampmInClock,
     timeSteps: timeSteps,
     viewRenderers: viewRenderers,
+    format: resolveTimeFormat(utils, defaultizedProps),
     // Setting only `hours` time view in case of single column time picker
     // Allows for easy view lifecycle management
     views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: _extends({
       field: TimeField,
-      openPickerIcon: Clock
+      openPickerIcon: ClockIcon
     }, defaultizedProps.slots),
     slotProps: _extends({}, defaultizedProps.slotProps, {
       field: function field(ownerState) {

package/legacy/LocalizationProvider/LocalizationProvider.js

@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? LocalizationProvider.propTypes = {
     keyboardDateTime: PropTypes.string,
     keyboardDateTime12h: PropTypes.string,
     keyboardDateTime24h: PropTypes.string,
+    meridiem: PropTypes.string,
     minutes: PropTypes.string,
     month: PropTypes.string,
     monthAndDate: PropTypes.string,

package/legacy/MobileDatePicker/MobileDatePicker.js

@@ -3,12 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { resolveComponentProps } from '@mui/base/utils';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
-import { getDatePickerFieldFormat, useDatePickerDefaultizedProps } from '../DatePicker/shared';
+import { useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import { useLocaleText, useUtils, validateDate } from '../internals';
 import { DateField } from '../DateField';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
+import { resolveDateFormat } from '../internals/utils/date-utils';
 var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
   var _defaultizedProps$slo2;
   var localeText = useLocaleText();
@@ -25,7 +26,7 @@ var MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(i
   // Props with the default values specific to the mobile variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
-    format: getDatePickerFieldFormat(utils, defaultizedProps),
+    format: resolveDateFormat(utils, defaultizedProps, false),
     slots: _extends({
       field: DateField
     }, defaultizedProps.slots),

package/legacy/MobileDateTimePicker/MobileDateTimePicker.js

@@ -5,14 +5,17 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { DateTimeField } from '../DateTimeField';
 import { useDateTimePickerDefaultizedProps } from '../DateTimePicker/shared';
-import { useLocaleText, validateDateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { renderTimeViewClock } from '../timeViewRenderers';
+import { resolveDateTimeFormat } from '../internals/utils/date-time-utils';
 var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all date time pickers
   var defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiMobileDateTimePicker');
@@ -29,6 +32,7 @@ var MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTime
   // Props with the default values specific to the mobile variant
   var props = _extends({}, defaultizedProps, {
     viewRenderers: viewRenderers,
+    format: resolveDateTimeFormat(utils, defaultizedProps),
     ampmInClock: ampmInClock,
     slots: _extends({
       field: DateTimeField

package/legacy/MobileTimePicker/MobileTimePicker.js

@@ -5,13 +5,16 @@ import { resolveComponentProps } from '@mui/base/utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { TimeField } from '../TimeField';
 import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
-import { useLocaleText, validateTime } from '../internals';
+import { useLocaleText, useUtils } from '../internals/hooks/useUtils';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { useMobilePicker } from '../internals/hooks/useMobilePicker';
 import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderTimeViewClock } from '../timeViewRenderers';
+import { resolveTimeFormat } from '../internals/utils/time-utils';
 var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$slo2;
   var localeText = useLocaleText();
+  var utils = useUtils();
 
   // Props with the default values common to all time pickers
   var defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiMobileTimePicker');
@@ -26,6 +29,7 @@ var MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(i
   var props = _extends({}, defaultizedProps, {
     ampmInClock: ampmInClock,
     viewRenderers: viewRenderers,
+    format: resolveTimeFormat(utils, defaultizedProps),
     slots: _extends({
       field: TimeField
     }, defaultizedProps.slots),

package/legacy/MonthCalendar/MonthCalendar.js

@@ -120,7 +120,7 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
       onFocusedViewChange(newHasFocus);
     }
   });
-  var isMonthDisabled = useEventCallback(function (month) {
+  var isMonthDisabled = React.useCallback(function (month) {
     var firstEnabledMonth = utils.startOfMonth(disablePast && utils.isAfter(now, minDate) ? now : minDate);
     var lastEnabledMonth = utils.startOfMonth(disableFuture && utils.isBefore(now, maxDate) ? now : maxDate);
     if (utils.isBefore(month, firstEnabledMonth)) {
@@ -133,7 +133,7 @@ export var MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(
       return false;
     }
     return shouldDisableMonth(month);
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableMonth, utils]);
   var handleMonthSelection = useEventCallback(function (event, month) {
     if (readOnly) {
       return;

package/legacy/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -9,7 +9,7 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
 import { getMultiSectionDigitalClockSectionUtilityClass } from './multiSectionDigitalClockSectionClasses';
-import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
@@ -43,7 +43,8 @@ var MultiSectionDigitalClockSectionRoot = styled(MenuList, {
     '&:after': {
       display: 'block',
       content: '""',
-      height: 188
+      // subtracting the height of one item, extra margin and borders to make sure the max height is correct
+      height: 'calc(100% - 40px - 6px)'
     }
   };
 });
@@ -58,7 +59,7 @@ var MultiSectionDigitalClockSectionItem = styled(MenuItem, {
   return {
     padding: 8,
     margin: '2px 4px',
-    width: 48,
+    width: MULTI_SECTION_CLOCK_SECTION_WIDTH,
     justifyContent: 'center',
     '&:first-of-type': {
       marginTop: 4

package/legacy/TimeField/TimeField.js

@@ -240,6 +240,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default false
    */
   readOnly: PropTypes.bool,
+  /**
+   * The date used to generate a part of the date-time that is not present in the format when both `value` and `defaultValue` are not present.
+   * For example, on time fields it will be used to determine the date to set.
+   * @default The closest valid date using the validation props, except callbacks such as `shouldDisableDate`. Value is rounded to the most granular section used.
+   */
+  referenceDate: PropTypes.any,
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false

package/legacy/YearCalendar/YearCalendar.js

@@ -122,7 +122,7 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
       onFocusedViewChange(newHasFocus);
     }
   });
-  var isYearDisabled = useEventCallback(function (dateToValidate) {
+  var isYearDisabled = React.useCallback(function (dateToValidate) {
     if (disablePast && utils.isBeforeYear(dateToValidate, now)) {
       return true;
     }
@@ -139,7 +139,7 @@ export var YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(in
       return true;
     }
     return false;
-  });
+  }, [disableFuture, disablePast, maxDate, minDate, now, shouldDisableYear, utils]);
   var handleYearSelection = useEventCallback(function (event, year) {
     if (readOnly) {
       return;

package/legacy/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -0,0 +1,147 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 { DateTimeViewWrapper } from '../internals/components/DateTimeViewWrapper';
+import { isInternalTimeView } from '../internals/utils/time-utils';
+import { isDatePickerView } from '../internals/utils/date-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var renderDesktopDateTimeView = function renderDesktopDateTimeView(_ref) {
+  var _resolveComponentProp, _resolveComponentProp2, _slotProps$actionBar;
+  var view = _ref.view,
+    onViewChange = _ref.onViewChange,
+    views = _ref.views,
+    focusedView = _ref.focusedView,
+    onFocusedViewChange = _ref.onFocusedViewChange,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    classes = _ref.classes,
+    disableFuture = _ref.disableFuture,
+    disablePast = _ref.disablePast,
+    minDate = _ref.minDate,
+    minTime = _ref.minTime,
+    maxDate = _ref.maxDate,
+    maxTime = _ref.maxTime,
+    shouldDisableDate = _ref.shouldDisableDate,
+    shouldDisableMonth = _ref.shouldDisableMonth,
+    shouldDisableYear = _ref.shouldDisableYear,
+    shouldDisableTime = _ref.shouldDisableTime,
+    shouldDisableClock = _ref.shouldDisableClock,
+    reduceAnimations = _ref.reduceAnimations,
+    minutesStep = _ref.minutesStep,
+    ampm = _ref.ampm,
+    onMonthChange = _ref.onMonthChange,
+    monthsPerRow = _ref.monthsPerRow,
+    onYearChange = _ref.onYearChange,
+    yearsPerRow = _ref.yearsPerRow,
+    defaultCalendarMonth = _ref.defaultCalendarMonth,
+    components = _ref.components,
+    componentsProps = _ref.componentsProps,
+    slots = _ref.slots,
+    slotProps = _ref.slotProps,
+    loading = _ref.loading,
+    renderLoading = _ref.renderLoading,
+    disableHighlightToday = _ref.disableHighlightToday,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    showDaysOutsideCurrentMonth = _ref.showDaysOutsideCurrentMonth,
+    dayOfWeekFormatter = _ref.dayOfWeekFormatter,
+    sx = _ref.sx,
+    autoFocus = _ref.autoFocus,
+    fixedWeekNumber = _ref.fixedWeekNumber,
+    displayWeekNumber = _ref.displayWeekNumber,
+    disableIgnoringDatePartForTimeValidation = _ref.disableIgnoringDatePartForTimeValidation,
+    timeSteps = _ref.timeSteps,
+    skipDisabled = _ref.skipDisabled,
+    timeViewsCount = _ref.timeViewsCount;
+  var isActionBarVisible = !!((_resolveComponentProp = resolveComponentProps((_slotProps$actionBar = slotProps == null ? void 0 : slotProps.actionBar) != null ? _slotProps$actionBar : componentsProps == null ? void 0 : componentsProps.actionBar, {})) != null && (_resolveComponentProp2 = _resolveComponentProp.actions) != null && _resolveComponentProp2.length);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsxs(DateTimeViewWrapper, {
+      children: [/*#__PURE__*/_jsx(DateCalendar, {
+        view: isDatePickerView(view) ? view : 'day',
+        onViewChange: onViewChange,
+        views: views.filter(isDatePickerView),
+        focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
+        onFocusedViewChange: onFocusedViewChange,
+        value: value,
+        defaultValue: defaultValue,
+        onChange: onChange,
+        className: className,
+        classes: classes,
+        disableFuture: disableFuture,
+        disablePast: disablePast,
+        minDate: minDate,
+        maxDate: maxDate,
+        shouldDisableDate: shouldDisableDate,
+        shouldDisableMonth: shouldDisableMonth,
+        shouldDisableYear: shouldDisableYear,
+        reduceAnimations: reduceAnimations,
+        onMonthChange: onMonthChange,
+        monthsPerRow: monthsPerRow,
+        onYearChange: onYearChange,
+        yearsPerRow: yearsPerRow,
+        defaultCalendarMonth: defaultCalendarMonth,
+        components: components,
+        componentsProps: componentsProps,
+        slots: slots,
+        slotProps: slotProps,
+        loading: loading,
+        renderLoading: renderLoading,
+        disableHighlightToday: disableHighlightToday,
+        readOnly: readOnly,
+        disabled: disabled,
+        showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth,
+        dayOfWeekFormatter: dayOfWeekFormatter,
+        sx: sx,
+        autoFocus: autoFocus,
+        fixedWeekNumber: fixedWeekNumber,
+        displayWeekNumber: displayWeekNumber
+      }), timeViewsCount > 0 && /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Divider, {
+          orientation: "vertical"
+        }), /*#__PURE__*/_jsx(MultiSectionDigitalClock, {
+          view: isInternalTimeView(view) ? view : 'hours',
+          onViewChange: onViewChange,
+          focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
+          onFocusedViewChange: onFocusedViewChange,
+          views: views.filter(isInternalTimeView),
+          value: value,
+          defaultValue: defaultValue,
+          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,
+          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
+        })]
+      })]
+    }), isActionBarVisible && /*#__PURE__*/_jsx(Divider, {})]
+  });
+};

package/legacy/dateTimeViewRenderers/index.js

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

package/legacy/dateViewRenderers/dateViewRenderers.js

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { DateCalendar } from '../DateCalendar';
+import { isDatePickerView } from '../internals/utils/date-utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-var isDatePickerView = function isDatePickerView(view) {
-  return view === 'year' || view === 'month' || view === 'day';
-};
 export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
   var view = _ref.view,
     onViewChange = _ref.onViewChange,
@@ -47,7 +45,7 @@ export var renderDateViewCalendar = function renderDateViewCalendar(_ref) {
     view: view,
     onViewChange: onViewChange,
     views: views.filter(isDatePickerView),
-    focusedView: focusedView,
+    focusedView: focusedView && isDatePickerView(focusedView) ? focusedView : null,
     onFocusedViewChange: onFocusedViewChange,
     value: value,
     defaultValue: defaultValue,

package/legacy/{internals/components/icons → icons}/index.js

@@ -6,35 +6,35 @@ import * as React from 'react';
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var ArrowDropDown = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowDropDownIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), 'ArrowDropDown');
 
 /**
  * @ignore - internal component.
  */
-export var ArrowLeft = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowLeftIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"
 }), 'ArrowLeft');
 
 /**
  * @ignore - internal component.
  */
-export var ArrowRight = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var ArrowRightIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
 }), 'ArrowRight');
 
 /**
  * @ignore - internal component.
  */
-export var Calendar = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var CalendarIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
 }), 'Calendar');
 
 /**
  * @ignore - internal component.
  */
-export var Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export var ClockIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {
@@ -45,14 +45,14 @@ export var Clock = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
 /**
  * @ignore - internal component.
  */
-export var DateRange = createSvgIcon( /*#__PURE__*/_jsx("path", {
+export var DateRangeIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
   d: "M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"
 }), 'DateRange');
 
 /**
  * @ignore - internal component.
  */
-export var Time = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
+export var TimeIcon = createSvgIcon( /*#__PURE__*/_jsxs(React.Fragment, {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
   }), /*#__PURE__*/_jsx("path", {

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v6.5.0
+ * @mui/x-date-pickers v6.7.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -47,4 +47,5 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
-export * from './models';
+export * from './models';
+export * from './icons';

package/legacy/internals/components/DateTimeViewWrapper/DateTimeViewWrapper.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/material/styles';
+export var DateTimeViewWrapper = styled('div')({
+  display: 'flex',
+  margin: '0 auto'
+});

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

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

package/legacy/internals/components/PickersArrowSwitcher/PickersArrowSwitcher.js

@@ -11,7 +11,7 @@ import { useTheme, styled, useThemeProps } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useSlotProps } from '@mui/base/utils';
 import IconButton from '@mui/material/IconButton';
-import { ArrowLeft, ArrowRight } from '../icons';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons';
 import { getPickersArrowSwitcherUtilityClass } from './pickersArrowSwitcherClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -130,7 +130,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     }),
     className: classes.button
   });
-  var LeftArrowIcon = (_slots$leftArrowIcon = slots == null ? void 0 : slots.leftArrowIcon) != null ? _slots$leftArrowIcon : ArrowLeft;
+  var LeftArrowIcon = (_slots$leftArrowIcon = slots == null ? void 0 : slots.leftArrowIcon) != null ? _slots$leftArrowIcon : ArrowLeftIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps = useSlotProps({
       elementType: LeftArrowIcon,
@@ -142,7 +142,7 @@ export var PickersArrowSwitcher = /*#__PURE__*/React.forwardRef(function Pickers
     }),
     leftArrowIconOwnerState = _useSlotProps.ownerState,
     leftArrowIconProps = _objectWithoutProperties(_useSlotProps, _excluded2);
-  var RightArrowIcon = (_slots$rightArrowIcon = slots == null ? void 0 : slots.rightArrowIcon) != null ? _slots$rightArrowIcon : ArrowRight;
+  var RightArrowIcon = (_slots$rightArrowIcon = slots == null ? void 0 : slots.rightArrowIcon) != null ? _slots$rightArrowIcon : ArrowRightIcon;
   // The spread is here to avoid this bug mui/material-ui#34056
   var _useSlotProps2 = useSlotProps({
       elementType: RightArrowIcon,