@mui/x-date-pickers 6.16.0 → 6.16.2

package/AdapterDayjs/AdapterDayjs.js

@@ -297,14 +297,16 @@ export class AdapterDayjs {
       return parsedValue.locale(this.locale);
     };
     this.getTimezone = value => {
-      if (this.hasUTCPlugin() && value.isUTC()) {
-        return 'UTC';
-      }
       if (this.hasTimezonePlugin()) {
         var _value$$x;
         // @ts-ignore
         const zone = (_value$$x = value.$x) == null ? void 0 : _value$$x.$timezone;
-        return zone != null ? zone : 'system';
+        if (zone) {
+          return zone;
+        }
+      }
+      if (this.hasUTCPlugin() && value.isUTC()) {
+        return 'UTC';
       }
       return 'system';
     };

package/AdapterMoment/AdapterMoment.js

@@ -241,16 +241,13 @@ export class AdapterMoment {
     };
     this.getTimezone = value => {
       var _value$_z, _ref, _this$moment$defaultZ;
-      if (value.isUTC()) {
-        return 'UTC';
-      }
-
       // @ts-ignore
       // eslint-disable-next-line no-underscore-dangle
       const zone = (_value$_z = value._z) == null ? void 0 : _value$_z.name;
+      const defaultZone = value.isUTC() ? 'UTC' : 'system';
 
       // @ts-ignore
-      return (_ref = zone != null ? zone : (_this$moment$defaultZ = this.moment.defaultZone) == null ? void 0 : _this$moment$defaultZ.name) != null ? _ref : 'system';
+      return (_ref = zone != null ? zone : (_this$moment$defaultZ = this.moment.defaultZone) == null ? void 0 : _this$moment$defaultZ.name) != null ? _ref : defaultZone;
     };
     this.setTimezone = (value, timezone) => {
       var _this$moment$defaultZ2, _this$moment$defaultZ3;

package/CHANGELOG.md

@@ -3,6 +3,170 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.16.2
+
+_Oct 12, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart's legend text management has been reworked and contains breaking changes (#10138) @alexfauquette
+- 📝 Add [Bulk editing](https://mui.com/x/react-data-grid/recipes-editing/#bulk-editing) demo (#10333) @cherniavskii
+- 🚀 Column grouping now works smoothly with column pinning (#10518) @MBilalShafi
+- 🌍 Improve Arabic (ar-SD) and Spanish (es-ES) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.2`
+
+- [DataGrid] Fix `LazyLoading` demo crash (#10621) @MBilalShafi
+- [DataGrid] Fix cells overlapping the scrollbar in iOS Safari (#10633) @cherniavskii
+- [DataGrid] Fix `getRowId is not defined` error (#10613) @romgrk
+- [DataGrid] Get quick filter to work OOTB with `date` and `dateTime` fields (#10636) @MBilalShafi
+- [DataGrid] Make cursor for selectable cells to be `default` unless editable (#9997) @gitstart
+- [DataGrid] Remove unnecessary syntax in JSDoc (#10567) @Lev-Shapiro
+- [DataGrid] Update row hover behavior to match native hover (#10623) @cherniavskii
+- [l10n] Improve Arabic (ar-SD) locale (#10625) @alabenyahia
+
+#### `@mui/x-data-grid-pro@6.16.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.16.2`, plus:
+
+- [DataGridPro] Improve column grouping and column pinning friendship (#10518) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.16.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.16.2`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.2`
+
+- [DateTimePicker] Add support for `DigitalClock` view renderer (#10624) @LukasTy
+- [fields] Bootstrap the multi-HTML input component (#10638) @flaviendelangle
+- [pickers] Fix timezone `UTC` false positive (#10586) @alexfauquette
+- [l10n] Improve Spanish (es-ES) locale (#10588) @eduardodallmann
+
+#### `@mui/x-date-pickers-pro@6.16.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.16.2`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.15`
+
+#### Breaking changes
+
+The charts have a new text display mechanism.
+It adds line break support and avoids overlapping text in the legend.
+This comes with some breaking changes.
+
+- The DOM structure is modified. An intermediary `<tspan />` element has been added. This can impact how your style is applied.
+  ```diff
+  - <text>The label</text>
+  + <text><tspan>The label</tspan></text>
+  ```
+
+- The top margin has been reduced from 100 to 50 to benefit from the denser legend.
+
+- To accurately compute the text size and then place it, styling should be provided as a JS object. For example, to set the legend font size, you should do:
+  ```jsx
+  <PieChart
+    {/** ... */}
+    slotProps={{
+      legend: {
+        labelStyle: {
+          fontSize: 16,
+        },
+      },
+    }}
+  />
+  ```
+  Support for other text elements (axis labels and tick labels) will be implemented in follow-up PR.
+
+#### Changes
+
+- [charts] Fix typo between internal/external variable (#10640) @alexfauquette
+- [charts] Improve the management of the text (#10138) @alexfauquette
+
+### Docs
+
+- [docs] Add bulk editing demo (#10333) @cherniavskii
+- [docs] Add reference links to DateRangePicker components (#10629) @michelengelen
+- [docs] Add reference links to DateTimePicker components (#10628) @michelengelen
+- [docs] Add reference links to picker field components (#10631) @michelengelen
+- [docs] Added reference links to TimePicker components (#10627) @michelengelen
+- [docs] Avoid Pickers playground error due to empty views (#10654) @LukasTy
+- [docs] Fix DataGrid[Pro/Premium] reference links (#10620) @michelengelen
+
+### Core
+
+- [core] Bump monorepo (#10619) @alexfauquette
+- [core] Update `no-response` workflow (#10491) @MBilalShafi
+- [core] Update the issue templates to reflect the new support workflow (#10651) @MBilalShafi
+- [test] Fix `testEval` not invoking test assertions (#10587) @cherniavskii
+- [test] Fix dev mode warning (#10610) @oliviertassinari
+- [test] Set UUID chance seed in visual tests (#10609) @oliviertassinari
+
+## 6.16.1
+
+_Oct 6, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🥧 Support interaction with pie chart
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.1`
+
+- [DataGrid] Add a new demo with sparklines (#9228) @flaviendelangle
+- [DataGrid] Fix autosize missing a few pixels (#10471) @romgrk
+- [DataGrid] Make `disableColumnSelector` demo idempotent (#10548) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.16.1`.
+
+#### `@mui/x-data-grid-premium@6.16.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.16.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.1`
+
+- [pickers] Avoid calendar layout shifting when changing views (#10541) @LukasTy
+- [pickers] Fix clearable behavior when disabled (#10542) @noraleonte
+- [pickers] Improve customization playground examples (#10544) @noraleonte
+
+#### `@mui/x-date-pickers-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.16.1`, plus:
+
+- [DateRangePicker] Fix `InputProps` propagation in multi input (#10564) @alexfauquette
+
+### Charts / `@mui/x-charts@6.0.0-alpha.14`
+
+- [charts] Display cursor pointer for pie chart only if `onClick` is provided (#10551) @giladappsforce
+- [charts] Add `onClick` prop to PieChart (#10506) @giladappsforce
+- [charts] Support `slots`/`slotProps` for the tooltip (#10515) @alexfauquette
+
+### Docs
+
+- [docs] Add `DateRangePicker` example with a `Button` trigger (#10485) @LukasTy
+- [docs] Add section about disabling columns panel (#10328) @MBilalShafi
+- [docs] Add section about overriding slots to base concepts (#10421) @noraleonte
+- [docs] Add "What's new" page listing all release announcements (#9727) @joserodolfofreitas
+- [docs] Update RTL Support section of the grid localization docs (#10561) @MBilalShafi
+
+### Core
+
+- [core] Fix casing consistency with legal and marketing content @oliviertassinari
+- [core] Revert the link in the priority support ticket description (#10517) @michelengelen
+- [CHANGELOG] Polish image @oliviertassinari
+
 ## 6.16.0
 
 _Sep 29, 2023_
@@ -13,7 +177,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 
   The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#clearing-the-value).
 
-  <img width="380" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/72460825/e4a66169-83b5-4579-b9f6-6e15bb528411">
+  <img width="337" height="139" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/3165635/a5407cb6-0b8a-443c-b4b9-1f81ceb4d087">
 
 - 💫 Add Date Picker customization playground (#9581) @noraleonte
 

package/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 => {
@@ -62,7 +63,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/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/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/DateCalendar/PickersSlideTransition.d.ts

@@ -12,7 +12,6 @@ export interface SlideTransitionProps extends Omit<CSSTransitionProps, 'timeout'
     slideDirection: SlideDirection;
     transKey: React.Key;
 }
-export declare const slideAnimationDuration = 350;
 /**
  * @ignore - do not document.
  */

package/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/DateField/DateField.d.ts

@@ -3,5 +3,15 @@ import { DateFieldProps } from './DateField.types';
 type DateFieldComponent = (<TDate>(props: DateFieldProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DateField: DateFieldComponent;
 export { DateField };

package/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) {
   var _ref, _slots$textField, _slotProps$textField;
   const themeProps = useThemeProps({

package/DateTimeField/DateTimeField.d.ts

@@ -3,5 +3,15 @@ import { DateTimeFieldProps } from './DateTimeField.types';
 type DateTimeFieldComponent = (<TDate>(props: DateTimeFieldProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DateTimeField: DateTimeFieldComponent;
 export { DateTimeField };

package/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) {
   var _ref, _slots$textField, _slotProps$textField;
   const themeProps = useThemeProps({

package/DateTimePicker/DateTimePicker.d.ts

@@ -3,5 +3,15 @@ import { DateTimePickerProps } from './DateTimePicker.types';
 type DateTimePickerComponent = (<TDate>(props: DateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DateTimePicker: DateTimePickerComponent;
 export { DateTimePicker };

package/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/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

@@ -3,5 +3,15 @@ import { DesktopDateTimePickerProps } from './DesktopDateTimePicker.types';
 type DesktopDateTimePickerComponent = (<TDate>(props: DesktopDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DesktopDateTimePicker: DesktopDateTimePickerComponent;
 export { DesktopDateTimePicker };

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -13,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/)
+ */
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3, _defaultizedProps$slo4, _props$localeText$ope, _props$localeText;
   const localeText = useLocaleText();
@@ -21,11 +31,12 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
 
   // 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
@@ -54,10 +65,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$yea = defaultizedProps.yearsPerRow) != null ? _defaultizedProps$yea : 4,
     ampmInClock,
     timeSteps,
+    thresholdToRenderTimeInASingleColumn,
+    shouldRenderTimeInASingleColumn,
     slots: _extends({
       field: DateTimeField,
       openPickerIcon: CalendarIcon
@@ -431,6 +444,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/DesktopDateTimePicker/DesktopDateTimePicker.types.d.ts

@@ -6,11 +6,12 @@ import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { DesktopOnlyTimePickerProps } from '../internals/models/props/clock';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { MultiSectionDigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponentsProps } from '../MultiSectionDigitalClock';
-export interface DesktopDateTimePickerSlotsComponent<TDate> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, DateOrTimeViewWithMeridiem>, 'Field' | 'OpenPickerIcon'>, MultiSectionDigitalClockSlotsComponent {
+import { DigitalClockSlotsComponent, DigitalClockSlotsComponentsProps } from '../DigitalClock';
+export interface DesktopDateTimePickerSlotsComponent<TDate> extends BaseDateTimePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, DateOrTimeViewWithMeridiem>, 'Field' | 'OpenPickerIcon'>, DigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponent {
 }
-export interface DesktopDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, ExportedUseDesktopPickerSlotsComponentsProps<TDate, DateOrTimeViewWithMeridiem>, MultiSectionDigitalClockSlotsComponentsProps {
+export interface DesktopDateTimePickerSlotsComponentsProps<TDate> extends BaseDateTimePickerSlotsComponentsProps<TDate>, ExportedUseDesktopPickerSlotsComponentsProps<TDate, DateOrTimeViewWithMeridiem>, DigitalClockSlotsComponentsProps, MultiSectionDigitalClockSlotsComponentsProps {
 }
-export interface DesktopDateTimePickerProps<TDate> extends BaseDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps<TDate>, Omit<DesktopOnlyTimePickerProps<TDate>, 'thresholdToRenderTimeInASingleColumn'> {
+export interface DesktopDateTimePickerProps<TDate> extends BaseDateTimePickerProps<TDate, DateOrTimeViewWithMeridiem>, DesktopOnlyPickerProps<TDate>, DesktopOnlyTimePickerProps<TDate> {
     /**
      * Available views.
      */

package/DesktopTimePicker/DesktopTimePicker.d.ts

@@ -3,5 +3,15 @@ import { DesktopTimePickerProps } from './DesktopTimePicker.types';
 type DesktopTimePickerComponent = (<TDate>(props: DesktopTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const DesktopTimePicker: DesktopTimePickerComponent;
 export { DesktopTimePicker };

package/DesktopTimePicker/DesktopTimePicker.js

@@ -13,20 +13,29 @@ 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) {
-  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;
   const localeText = useLocaleText();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
-  const thresholdToRenderTimeInASingleColumn = (_defaultizedProps$thr = defaultizedProps.thresholdToRenderTimeInASingleColumn) != null ? _defaultizedProps$thr : 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,
@@ -38,7 +47,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 = viewRenderers.hours) == null ? void 0 : _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/DigitalClock/DigitalClock.js

@@ -153,7 +153,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/MobileDateTimePicker/MobileDateTimePicker.d.ts

@@ -3,5 +3,15 @@ import { MobileDateTimePickerProps } from './MobileDateTimePicker.types';
 type MobileDateTimePickerComponent = (<TDate>(props: MobileDateTimePickerProps<TDate> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
     propTypes?: any;
 };
+/**
+ * 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/)
+ */
 declare const MobileDateTimePicker: MobileDateTimePickerComponent;
 export { MobileDateTimePicker };