@mui/x-date-pickers 6.16.0 → 6.16.2

package/MobileDateTimePicker/MobileDateTimePicker.js

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

package/MobileTimePicker/MobileTimePicker.d.ts

@@ -3,5 +3,15 @@ import { MobileTimePickerProps } from './MobileTimePicker.types';
 type MobileTimePickerComponent = (<TDate>(props: MobileTimePickerProps<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:
+ *
+ * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
+ */
 declare const MobileTimePicker: MobileTimePickerComponent;
 export { MobileTimePicker };

package/MobileTimePicker/MobileTimePicker.js

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

package/MonthCalendar/MonthCalendar.js

@@ -14,6 +14,7 @@ import { applyDefaultDate, getMonthsInYear } from '../internals/utils/date-utils
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { DIALOG_WIDTH } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -48,7 +49,9 @@ const MonthCalendarRoot = styled('div', {
   flexWrap: 'wrap',
   alignContent: 'stretch',
   padding: '0 4px',
-  width: 320
+  width: DIALOG_WIDTH,
+  // avoid padding increasing width over defined
+  boxSizing: 'border-box'
 });
 export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalendar(inProps, ref) {
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');

package/StaticDateTimePicker/StaticDateTimePicker.d.ts

@@ -3,5 +3,15 @@ import { StaticDateTimePickerProps } from './StaticDateTimePicker.types';
 type StaticDateTimePickerComponent = (<TDate>(props: StaticDateTimePickerProps<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:
+ *
+ * - [StaticDateTimePicker API](https://mui.com/x/api/date-pickers/static-date-time-picker/)
+ */
 declare const StaticDateTimePicker: StaticDateTimePickerComponent;
 export { StaticDateTimePicker };

package/StaticDateTimePicker/StaticDateTimePicker.js

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

package/StaticTimePicker/StaticTimePicker.d.ts

@@ -3,5 +3,15 @@ import { StaticTimePickerProps } from './StaticTimePicker.types';
 type StaticTimePickerComponent = (<TDate>(props: StaticTimePickerProps<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:
+ *
+ * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/)
+ */
 declare const StaticTimePicker: StaticTimePickerComponent;
 export { StaticTimePicker };

package/StaticTimePicker/StaticTimePicker.js

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

package/TimeField/TimeField.d.ts

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

package/TimeField/TimeField.js

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

package/TimePicker/TimePicker.d.ts

@@ -3,5 +3,15 @@ import { TimePickerProps } from './TimePicker.types';
 type TimePickerComponent = (<TDate>(props: TimePickerProps<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:
+ *
+ * - [TimePicker API](https://mui.com/x/api/date-pickers/time-picker/)
+ */
 declare const TimePicker: TimePickerComponent;
 export { TimePicker };

package/TimePicker/TimePicker.js

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

package/YearCalendar/PickersYear.js

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

package/YearCalendar/YearCalendar.js

@@ -14,6 +14,7 @@ import { applyDefaultDate } from '../internals/utils/date-utils';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { SECTION_TYPE_GRANULARITY } from '../internals/utils/getDefaultReferenceDate';
 import { useControlledValueWithTimezone } from '../internals/hooks/useValueWithTimezone';
+import { DIALOG_WIDTH, MAX_CALENDAR_HEIGHT } from '../internals/constants/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -25,6 +26,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getYearCalendarUtilityClass, classes);
 };
 function useYearCalendarDefaultizedProps(props, name) {
+  var _themeProps$yearsPerR;
   const utils = useUtils();
   const defaultDates = useDefaultDates();
   const themeProps = useThemeProps({
@@ -35,6 +37,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)
   });
@@ -50,8 +53,8 @@ const YearCalendarRoot = styled('div', {
   overflowY: 'auto',
   height: '100%',
   padding: '0 4px',
-  width: 320,
-  maxHeight: 304,
+  width: DIALOG_WIDTH,
+  maxHeight: MAX_CALENDAR_HEIGHT,
   // avoid padding increasing width over defined
   boxSizing: 'border-box',
   position: 'relative'
@@ -76,7 +79,7 @@ export const YearCalendar = /*#__PURE__*/React.forwardRef(function YearCalendar(
       onYearFocus,
       hasFocus,
       onFocusedViewChange,
-      yearsPerRow = 3,
+      yearsPerRow,
       timezone: timezoneProp,
       gridLabelId
     } = props,

package/dateTimeViewRenderers/dateTimeViewRenderers.d.ts

@@ -9,5 +9,6 @@ export interface DateTimeViewRendererProps<TDate> extends Omit<DateCalendarProps
     views: readonly DateOrTimeViewWithMeridiem[];
     focusedView: DateOrTimeViewWithMeridiem | null;
     timeViewsCount: number;
+    shouldRenderTimeInASingleColumn: boolean;
 }
-export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;
+export declare const renderDesktopDateTimeView: <TDate extends unknown>({ view, onViewChange, views, focusedView, onFocusedViewChange, value, defaultValue, referenceDate, onChange, className, classes, disableFuture, disablePast, minDate, minTime, maxDate, maxTime, shouldDisableDate, shouldDisableMonth, shouldDisableYear, shouldDisableTime, shouldDisableClock, reduceAnimations, minutesStep, ampm, onMonthChange, monthsPerRow, onYearChange, yearsPerRow, defaultCalendarMonth, components, componentsProps, slots, slotProps, loading, renderLoading, disableHighlightToday, readOnly, disabled, showDaysOutsideCurrentMonth, dayOfWeekFormatter, sx, autoFocus, fixedWeekNumber, displayWeekNumber, timezone, disableIgnoringDatePartForTimeValidation, timeSteps, skipDisabled, timeViewsCount, shouldRenderTimeInASingleColumn, }: DateTimeViewRendererProps<TDate>) => React.JSX.Element;

package/dateTimeViewRenderers/dateTimeViewRenderers.js

@@ -3,10 +3,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 const renderDesktopDateTimeView = ({
@@ -59,10 +62,43 @@ export const renderDesktopDateTimeView = ({
   disableIgnoringDatePartForTimeValidation,
   timeSteps,
   skipDisabled,
-  timeViewsCount
+  timeViewsCount,
+  shouldRenderTimeInASingleColumn
 }) => {
   var _resolveComponentProp, _slotProps$actionBar;
   const 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);
+  const commonTimeProps = {
+    view: isInternalTimeView(view) ? view : 'hours',
+    onViewChange,
+    focusedView: focusedView && isInternalTimeView(focusedView) ? focusedView : null,
+    onFocusedViewChange,
+    views: views.filter(isInternalTimeView),
+    value,
+    defaultValue,
+    referenceDate,
+    onChange,
+    className,
+    classes,
+    disableFuture,
+    disablePast,
+    minTime,
+    maxTime,
+    shouldDisableTime,
+    shouldDisableClock,
+    minutesStep,
+    ampm,
+    components,
+    componentsProps,
+    slots,
+    slotProps,
+    readOnly,
+    disabled,
+    autoFocus,
+    disableIgnoringDatePartForTimeValidation,
+    timeSteps,
+    skipDisabled,
+    timezone
+  };
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(DateTimeViewWrapper, {
       children: [/*#__PURE__*/_jsx(DateCalendar, {
@@ -109,45 +145,28 @@ export const renderDesktopDateTimeView = ({
       }), 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({
+            width: 'auto',
+            [`&.${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({
             borderBottom: 0,
             width: 'auto',
             [`.${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/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/internals/components/FakeTextField/FakeTextField.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { FieldSection } from '../../../models';
+interface FakeTextFieldProps {
+    sections: FieldSection[];
+}
+export declare function FakeTextField(props: FakeTextFieldProps): React.JSX.Element;
+export {};

package/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) {
+  const {
+    sections
+  } = props;
+  return /*#__PURE__*/_jsx(Stack, {
+    direction: "row",
+    spacing: 1,
+    children: sections.map(section => /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [section.startSeparator, /*#__PURE__*/_jsx("input", {
+        value: section.value,
+        onChange: () => {}
+      }), section.endSeparator]
+    }))
+  });
+}

package/internals/components/FakeTextField/index.d.ts

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

package/internals/components/FakeTextField/index.js

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

package/internals/constants/dimensions.d.ts

@@ -1,6 +1,7 @@
 export declare const DAY_SIZE = 36;
 export declare const DAY_MARGIN = 2;
 export declare const DIALOG_WIDTH = 320;
-export declare const VIEW_HEIGHT = 358;
+export declare const MAX_CALENDAR_HEIGHT = 280;
+export declare const VIEW_HEIGHT = 334;
 export declare const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
 export declare const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/internals/constants/dimensions.js

@@ -1,6 +1,7 @@
 export const DAY_SIZE = 36;
 export const DAY_MARGIN = 2;
 export const DIALOG_WIDTH = 320;
-export const VIEW_HEIGHT = 358;
+export const MAX_CALENDAR_HEIGHT = 280;
+export const VIEW_HEIGHT = 334;
 export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;
 export const MULTI_SECTION_CLOCK_SECTION_WIDTH = 48;

package/internals/hooks/useField/useField.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear"];
+const _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -44,7 +44,8 @@ export const useField = params => {
         onPaste,
         error,
         clearable,
-        onClear
+        onClear,
+        disabled
       },
       fieldValueManager,
       valueManager,
@@ -407,7 +408,8 @@ export const useField = params => {
   });
   return _extends({
     placeholder,
-    autoComplete: 'off'
+    autoComplete: 'off',
+    disabled: Boolean(disabled)
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,
     inputMode,
@@ -422,6 +424,6 @@ export const useField = params => {
     onClear: handleClearValue,
     error: inputError,
     ref: handleRef,
-    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly)
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

package/internals/hooks/useField/useField.types.d.ts

@@ -105,6 +105,11 @@ export interface UseFieldInternalProps<TValue, TDate, TSection extends FieldSect
      * @default false
      */
     clearable?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
 }
 export interface FieldRef<TSection extends FieldSection> {
     /**
@@ -134,6 +139,7 @@ export interface UseFieldForwardedProps {
     error?: boolean;
     onClear?: React.MouseEventHandler;
     clearable?: boolean;
+    disabled?: boolean;
 }
 export type UseFieldResponse<TForwardedProps extends UseFieldForwardedProps> = Omit<TForwardedProps, keyof UseFieldForwardedProps> & Required<UseFieldForwardedProps> & Pick<React.HTMLAttributes<HTMLInputElement>, 'autoCorrect' | 'inputMode' | 'placeholder'> & {
     ref: React.Ref<HTMLInputElement>;

package/internals/utils/date-time-utils.d.ts

@@ -1,6 +1,17 @@
 import { DateOrTimeView, MuiPickersAdapter } from '../../models';
+import { DateOrTimeViewWithMeridiem } from '../models';
+import { DesktopOnlyTimePickerProps } from '../models/props/clock';
+import { DefaultizedProps } from '../models/helpers';
 export declare const resolveDateTimeFormat: (utils: MuiPickersAdapter<any>, { views, format, ...other }: {
     format?: string | undefined;
     views: readonly DateOrTimeView[];
     ampm: boolean;
 }) => string;
+interface DefaultizedTimeViewsProps<TDate, TView = DateOrTimeView> extends DefaultizedProps<DesktopOnlyTimePickerProps<TDate>, 'ampm'> {
+    views: readonly TView[];
+}
+interface DefaultizedTimeViewsResponse<TDate, TView = DateOrTimeViewWithMeridiem> extends Required<Pick<DefaultizedTimeViewsProps<TDate, TView>, 'thresholdToRenderTimeInASingleColumn' | 'timeSteps' | 'views'>> {
+    shouldRenderTimeInASingleColumn: boolean;
+}
+export declare function resolveTimeViewsResponse<TDate, InTView extends DateOrTimeView = DateOrTimeView, OutTView extends DateOrTimeViewWithMeridiem = DateOrTimeViewWithMeridiem>({ thresholdToRenderTimeInASingleColumn: inThreshold, ampm, timeSteps: inTimeSteps, views, }: DefaultizedTimeViewsProps<TDate, InTView>): DefaultizedTimeViewsResponse<TDate, OutTView>;
+export {};

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["views", "format"];
-import { resolveTimeFormat, isTimeView } from './time-utils';
+import { resolveTimeFormat, isTimeView, isInternalTimeView } from './time-utils';
 import { resolveDateFormat } from './date-utils';
 export const resolveDateTimeFormat = (utils, _ref) => {
   let {
@@ -38,4 +38,34 @@ export const resolveDateTimeFormat = (utils, _ref) => {
     views: dateViews
   }, other), false);
   return `${dateFormat} ${timeFormat}`;
-};
+};
+const resolveViews = (ampm, views, shouldUseSingleColumn) => {
+  if (shouldUseSingleColumn) {
+    return views.filter(view => !isInternalTimeView(view) || view === 'hours');
+  }
+  return ampm ? [...views, 'meridiem'] : views;
+};
+const resolveShouldRenderTimeInASingleColumn = (timeSteps, threshold) => {
+  var _timeSteps$hours, _timeSteps$minutes;
+  return 24 * 60 / (((_timeSteps$hours = timeSteps.hours) != null ? _timeSteps$hours : 1) * ((_timeSteps$minutes = timeSteps.minutes) != null ? _timeSteps$minutes : 5)) <= threshold;
+};
+export function resolveTimeViewsResponse({
+  thresholdToRenderTimeInASingleColumn: inThreshold,
+  ampm,
+  timeSteps: inTimeSteps,
+  views
+}) {
+  const thresholdToRenderTimeInASingleColumn = inThreshold != null ? inThreshold : 24;
+  const timeSteps = _extends({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, inTimeSteps);
+  const shouldRenderTimeInASingleColumn = resolveShouldRenderTimeInASingleColumn(timeSteps, thresholdToRenderTimeInASingleColumn);
+  return {
+    thresholdToRenderTimeInASingleColumn,
+    timeSteps,
+    shouldRenderTimeInASingleColumn,
+    views: resolveViews(ampm, views, shouldRenderTimeInASingleColumn)
+  };
+}

package/legacy/AdapterDayjs/AdapterDayjs.js

@@ -309,14 +309,16 @@ export var AdapterDayjs = /*#__PURE__*/_createClass(function AdapterDayjs() {
     return parsedValue.locale(_this.locale);
   };
   this.getTimezone = function (value) {
-    if (_this.hasUTCPlugin() && value.isUTC()) {
-      return 'UTC';
-    }
     if (_this.hasTimezonePlugin()) {
       var _value$$x;
       // @ts-ignore
       var 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/legacy/AdapterMoment/AdapterMoment.js

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

package/legacy/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";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -64,7 +65,8 @@ var DateCalendarRoot = styled(PickerViewRoot, {
   }
 })({
   display: 'flex',
-  flexDirection: 'column'
+  flexDirection: 'column',
+  height: VIEW_HEIGHT
 });
 var DateCalendarViewTransitionContainer = styled(PickersFadeTransitionGroup, {
   name: 'MuiDateCalendar',