@mui/x-date-pickers 6.16.0 → 6.16.1

package/CHANGELOG.md

@@ -3,6 +3,66 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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 +73,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/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/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/index.js

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

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

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

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

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;

package/legacy/internals/hooks/useField/useField.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear"];
+var _excluded = ["onClick", "onKeyDown", "onFocus", "onBlur", "onMouseUp", "onPaste", "error", "clearable", "onClear", "disabled"];
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -44,6 +44,7 @@ export var useField = function useField(params) {
     error = _params$forwardedProp.error,
     clearable = _params$forwardedProp.clearable,
     onClear = _params$forwardedProp.onClear,
+    disabled = _params$forwardedProp.disabled,
     otherForwardedProps = _objectWithoutProperties(_params$forwardedProp, _excluded),
     fieldValueManager = params.fieldValueManager,
     valueManager = params.valueManager,
@@ -429,7 +430,8 @@ export var useField = function useField(params) {
   });
   return _extends({
     placeholder: placeholder,
-    autoComplete: 'off'
+    autoComplete: 'off',
+    disabled: Boolean(disabled)
   }, otherForwardedProps, {
     value: shouldShowPlaceholder ? '' : valueStr,
     inputMode: inputMode,
@@ -444,6 +446,6 @@ export var useField = function useField(params) {
     onClear: handleClearValue,
     error: inputError,
     ref: handleRef,
-    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly)
+    clearable: Boolean(clearable && !areAllSectionsEmpty && !readOnly && !disabled)
   });
 };

package/modern/DateCalendar/DateCalendar.js

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

package/modern/DateCalendar/DayCalendar.js

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