@mui/x-date-pickers 7.22.2 → 8.0.0-alpha.0

package/node/MobileDatePicker/MobileDatePicker.js

@@ -14,7 +14,7 @@ var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveC
 var _utils = require("@mui/utils");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
 var _shared = require("../DatePicker/shared");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _DateField = require("../DateField");
@@ -33,7 +33,7 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileDatePicker API](https://mui.com/x/api/date-pickers/mobile-date-picker/)
  */
 const MobileDatePicker = exports.MobileDatePicker = /*#__PURE__*/React.forwardRef(function MobileDatePicker(inProps, ref) {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date pickers
@@ -96,9 +96,9 @@ MobileDatePicker.propTypes = {
   closeOnSelect: _propTypes.default.bool,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
@@ -107,7 +107,8 @@ MobileDatePicker.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -136,7 +137,7 @@ MobileDatePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -226,8 +227,7 @@ MobileDatePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -248,8 +248,7 @@ MobileDatePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -267,6 +266,11 @@ MobileDatePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -299,22 +303,19 @@ MobileDatePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: _propTypes.default.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.func,

package/node/MobileDateTimePicker/MobileDateTimePicker.js

@@ -15,7 +15,7 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _DateTimeField = require("../DateTimeField");
 var _shared = require("../DateTimePicker/shared");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
@@ -34,7 +34,7 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = exports.MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all date time pickers
@@ -116,9 +116,9 @@ MobileDateTimePicker.propTypes = {
   closeOnSelect: _propTypes.default.bool,
   /**
    * Formats the day of week displayed in the calendar header.
-   * @param {TDate} date The date of the day of week provided by the adapter.
+   * @param {PickerValidDate} date The date of the day of week provided by the adapter.
    * @returns {string} The name to display.
-   * @default (date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
+   * @default (date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()
    */
   dayOfWeekFormatter: _propTypes.default.func,
   /**
@@ -127,7 +127,8 @@ MobileDateTimePicker.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -161,7 +162,7 @@ MobileDateTimePicker.propTypes = {
    */
   displayWeekNumber: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -274,8 +275,7 @@ MobileDateTimePicker.propTypes = {
   onError: _propTypes.default.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: _propTypes.default.func,
   /**
@@ -296,8 +296,7 @@ MobileDateTimePicker.propTypes = {
   onViewChange: _propTypes.default.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: _propTypes.default.func,
   /**
@@ -315,6 +314,11 @@ MobileDateTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -347,30 +351,26 @@ MobileDateTimePicker.propTypes = {
    *
    * Warning: This function can be called multiple times (for example when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.
    *
-   * @template TDate
-   * @param {TDate} day The date to test.
+   * @param {PickerValidDate} day The date to test.
    * @returns {boolean} If `true` the date will be disabled.
    */
   shouldDisableDate: _propTypes.default.func,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: _propTypes.default.func,
   /**
    * Disable specific year.
-   * @template TDate
-   * @param {TDate} year The year to test.
+   * @param {PickerValidDate} year The year to test.
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: _propTypes.default.func,

package/node/MobileTimePicker/MobileTimePicker.js

@@ -15,7 +15,7 @@ var _utils = require("@mui/utils");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _TimeField = require("../TimeField");
 var _shared = require("../TimePicker/shared");
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _validation = require("../validation");
 var _useMobilePicker = require("../internals/hooks/useMobilePicker");
@@ -33,7 +33,7 @@ var _getPickersLocalization = require("../locales/utils/getPickersLocalization")
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = exports.MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
 
   // Props with the default values common to all time pickers
@@ -113,7 +113,8 @@ MobileTimePicker.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -138,7 +139,7 @@ MobileTimePicker.propTypes = {
    */
   disablePast: _propTypes.default.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.any,
   /**
@@ -246,6 +247,11 @@ MobileTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * If `true`, disable heavy animations.
@@ -269,8 +275,7 @@ MobileTimePicker.propTypes = {
   selectedSections: _propTypes.default.oneOfType([_propTypes.default.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), _propTypes.default.number]),
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/node/MonthCalendar/MonthCalendar.js

@@ -24,12 +24,10 @@ var _valueManagers = require("../internals/utils/valueManagers");
 var _getDefaultReferenceDate = require("../internals/utils/getDefaultReferenceDate");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _dimensions = require("../internals/constants/dimensions");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -76,6 +74,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
       className,
+      classes: classesProp,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -107,12 +106,15 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
-    onChange: onChange,
+    onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
   const now = (0, _useUtils.useNow)(timezone);
   const isRtl = (0, _RtlProvider.useRtl)();
   const utils = (0, _useUtils.useUtils)();
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const referenceDate = React.useMemo(() => _valueManagers.singleItemValueManager.getInitialReferenceValue({
     value,
     utils,
@@ -122,8 +124,7 @@ const MonthCalendar = exports.MonthCalendar = /*#__PURE__*/React.forwardRef(func
     granularity: _getDefaultReferenceDate.SECTION_TYPE_GRANULARITY.month
   }), [] // eslint-disable-line react-hooks/exhaustive-deps
   );
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const todayMonth = React.useMemo(() => utils.getMonth(now), [utils, now]);
   const selectedMonth = React.useMemo(() => {
     if (value != null) {
@@ -260,7 +261,9 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true` picker is disabled
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
    */
   disabled: _propTypes.default.bool,
   /**
@@ -297,14 +300,15 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
   monthsPerRow: _propTypes.default.oneOf([3, 4]),
   /**
    * Callback fired when the value changes.
-   * @template TDate
-   * @param {TDate} value The new value.
+   * @param {PickerValidDate} value The new value.
    */
   onChange: _propTypes.default.func,
   onFocusedViewChange: _propTypes.default.func,
   onMonthFocus: _propTypes.default.func,
   /**
-   * If `true` picker is readonly
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
    */
   readOnly: _propTypes.default.bool,
   /**
@@ -314,8 +318,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
   referenceDate: _propTypes.default.object,
   /**
    * Disable specific month.
-   * @template TDate
-   * @param {TDate} month The month to test.
+   * @param {PickerValidDate} month The month to test.
    * @returns {boolean} If `true`, the month will be disabled.
    */
   shouldDisableMonth: _propTypes.default.func,

package/node/MonthCalendar/PickersMonth.js

@@ -15,17 +15,13 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _pickersMonthClasses = require("./pickersMonthClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    selected,
-    classes
-  } = ownerState;
+const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
-    monthButton: ['monthButton', disabled && 'disabled', selected && 'selected']
+    monthButton: ['monthButton', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
   };
   return (0, _composeClasses.default)(slots, _pickersMonthClasses.getPickersMonthUtilityClass, classes);
 };
@@ -101,9 +97,10 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
   const {
       autoFocus,
       className,
+      classes: classesProp,
       children,
-      disabled,
-      selected,
+      disabled = false,
+      selected = false,
       value,
       tabIndex,
       onClick,
@@ -120,7 +117,14 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ref = React.useRef(null);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isMonthDisabled: disabled,
+    isMonthSelected: selected
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // We can't forward the `autoFocus` to the button because it is a native button, not a MUI Button
   (0, _useEnhancedEffect.default)(() => {
@@ -148,12 +152,12 @@ const PickersMonth = exports.PickersMonth = /*#__PURE__*/React.memo(function Pic
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
-    ownerState: props,
+    ownerState,
     className: classes.monthButton
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersMonthRoot, (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: props
+    ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthButton, (0, _extends2.default)({}, monthButtonProps))
   }));

package/node/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -16,7 +16,7 @@ var _RtlProvider = require("@mui/system/RtlProvider");
 var _styles = require("@mui/material/styles");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _timeUtils = require("../internals/utils/time-utils");
 var _useViews = require("../internals/hooks/useViews");
@@ -111,7 +111,7 @@ const MultiSectionDigitalClock = exports.MultiSectionDigitalClock = /*#__PURE__*
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
   const timeSteps = React.useMemo(() => (0, _extends2.default)({
     hours: 1,
@@ -375,7 +375,8 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
    */
   defaultValue: _propTypes.default.object,
   /**
-   * If `true`, the picker views and text field are disabled.
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
    * @default false
    */
   disabled: _propTypes.default.bool,
@@ -442,7 +443,8 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
    */
   openTo: _propTypes.default.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
-   * If `true`, the picker views and text field are read-only.
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
    * @default false
    */
   readOnly: _propTypes.default.bool,
@@ -453,8 +455,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   referenceDate: _propTypes.default.object,
   /**
    * Disable specific time.
-   * @template TDate
-   * @param {TDate} value The value to check.
+   * @param {PickerValidDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */

package/node/PickersActionBar/PickersActionBar.js

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onAccept", "onClear", "onCancel", "onSetToday", "actions"];
 /**
@@ -35,7 +35,7 @@ function PickersActionBar(props) {
       actions
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   if (actions == null || actions.length === 0) {
     return null;
   }

package/node/PickersCalendarHeader/PickersCalendarHeader.js

@@ -17,7 +17,7 @@ var _styles = require("@mui/material/styles");
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
-var _usePickersTranslations = require("../hooks/usePickersTranslations");
+var _usePickerTranslations = require("../hooks/usePickerTranslations");
 var _useUtils = require("../internals/hooks/useUtils");
 var _PickersFadeTransitionGroup = require("../DateCalendar/PickersFadeTransitionGroup");
 var _icons = require("../icons");
@@ -117,7 +117,7 @@ const PickersCalendarHeaderSwitchViewIcon = (0, _styles.styled)(_icons.ArrowDrop
  * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
  */
 const PickersCalendarHeader = exports.PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
-  const translations = (0, _usePickersTranslations.usePickersTranslations)();
+  const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const utils = (0, _useUtils.useUtils)();
   const props = (0, _styles.useThemeProps)({
     props: inProps,

package/node/PickersLayout/PickersLayout.js

@@ -152,6 +152,11 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
+  /**
+   * If `true`, the component is disabled.
+   * When disabled, the value cannot be changed and no interaction is possible.
+   * @default false
+   */
   disabled: _propTypes.default.bool,
   isLandscape: _propTypes.default.bool.isRequired,
   /**
@@ -173,6 +178,11 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: _propTypes.default.oneOf(['landscape', 'portrait']),
+  /**
+   * If `true`, the component is read-only.
+   * When read-only, the value cannot be changed but the user can interact with the interface.
+   * @default false
+   */
   readOnly: _propTypes.default.bool,
   /**
    * The props used for each component slot.

package/node/PickersLayout/usePickerLayout.js

@@ -14,13 +14,13 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _PickersActionBar = require("../PickersActionBar");
 var _pickersLayoutClasses = require("./pickersLayoutClasses");
 var _PickersShortcuts = require("../PickersShortcuts");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     isLandscape
   } = ownerState;
   const slots = {
@@ -35,6 +35,9 @@ const useUtilityClasses = ownerState => {
   return (0, _composeClasses.default)(slots, _pickersLayoutClasses.getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = props => {
+  const {
+    ownerState: pickersOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     wrapperVariant,
     onAccept,
@@ -53,13 +56,18 @@ const usePickerLayout = props => {
     readOnly,
     children,
     slots,
-    slotProps
+    slotProps,
+    classes: classesProp
     // TODO: Remove this "as" hack. It get introduced to mark `value` prop in PickersLayoutProps as not required.
     // The true type should be
-    // - For pickers value: TDate | null
-    // - For range pickers value: [TDate | null, TDate | null]
+    // - For pickers value: PickerValidDate | null
+    // - For range pickers value: [PickerValidDate | null, PickerValidDate | null]
   } = props;
-  const classes = useUtilityClasses(props);
+  const ownerState = (0, _extends2.default)({}, pickersOwnerState, {
+    wrapperVariant,
+    isLandscape
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar
   const ActionBar = slots?.actionBar ?? _PickersActionBar.PickersActionBar;
@@ -74,9 +82,7 @@ const usePickerLayout = props => {
       actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
-    ownerState: (0, _extends2.default)({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const actionBar = /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionBar, (0, _extends2.default)({}, actionBarProps));
 
@@ -96,9 +102,7 @@ const usePickerLayout = props => {
       readOnly
     },
     className: classes.toolbar,
-    ownerState: (0, _extends2.default)({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, toolbarProps)) : null;
 
@@ -124,12 +128,7 @@ const usePickerLayout = props => {
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
-    ownerState: {
-      isValid,
-      isLandscape,
-      onChange: onSelectShortcut,
-      wrapperVariant
-    }
+    ownerState
   });
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Shortcuts, (0, _extends2.default)({}, shortcutsProps)) : null;
   return {