@mui/x-date-pickers 7.22.3 → 8.0.0-alpha.1

package/modern/MobileDateTimePicker/MobileDateTimePicker.js

@@ -8,7 +8,7 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { DateTimeField } from "../DateTimeField/index.js";
 import { useDateTimePickerDefaultizedProps } from "../DateTimePicker/shared.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateDateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
@@ -27,7 +27,7 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [MobileDateTimePicker API](https://mui.com/x/api/date-pickers/mobile-date-time-picker/)
  */
 const MobileDateTimePicker = /*#__PURE__*/React.forwardRef(function MobileDateTimePicker(inProps, ref) {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all date time pickers
@@ -109,9 +109,9 @@ MobileDateTimePicker.propTypes = {
   closeOnSelect: PropTypes.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.func,
   /**
@@ -120,7 +120,8 @@ MobileDateTimePicker.propTypes = {
    */
   defaultValue: PropTypes.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.bool,
@@ -154,7 +155,7 @@ MobileDateTimePicker.propTypes = {
    */
   displayWeekNumber: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -267,8 +268,7 @@ MobileDateTimePicker.propTypes = {
   onError: PropTypes.func,
   /**
    * Callback fired on month change.
-   * @template TDate
-   * @param {TDate} month The new month.
+   * @param {PickerValidDate} month The new month.
    */
   onMonthChange: PropTypes.func,
   /**
@@ -289,8 +289,7 @@ MobileDateTimePicker.propTypes = {
   onViewChange: PropTypes.func,
   /**
    * Callback fired on year change.
-   * @template TDate
-   * @param {TDate} year The new year.
+   * @param {PickerValidDate} year The new year.
    */
   onYearChange: PropTypes.func,
   /**
@@ -308,6 +307,11 @@ MobileDateTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.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.bool,
   /**
    * If `true`, disable heavy animations.
@@ -340,30 +344,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.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.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.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.func,

package/modern/MobileTimePicker/MobileTimePicker.js

@@ -8,7 +8,7 @@ import { refType } from '@mui/utils';
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { TimeField } from "../TimeField/index.js";
 import { useTimePickerDefaultizedProps } from "../TimePicker/shared.js";
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { extractValidationProps, validateTime } from "../validation/index.js";
 import { useMobilePicker } from "../internals/hooks/useMobilePicker/index.js";
@@ -26,7 +26,7 @@ import { buildGetOpenDialogAriaText } from "../locales/utils/getPickersLocalizat
  * - [MobileTimePicker API](https://mui.com/x/api/date-pickers/mobile-time-picker/)
  */
 const MobileTimePicker = /*#__PURE__*/React.forwardRef(function MobileTimePicker(inProps, ref) {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const utils = useUtils();
 
   // Props with the default values common to all time pickers
@@ -106,7 +106,8 @@ MobileTimePicker.propTypes = {
    */
   defaultValue: PropTypes.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.bool,
@@ -131,7 +132,7 @@ MobileTimePicker.propTypes = {
    */
   disablePast: PropTypes.bool,
   /**
-   * @default false
+   * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.any,
   /**
@@ -239,6 +240,11 @@ MobileTimePicker.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.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.bool,
   /**
    * If `true`, disable heavy animations.
@@ -262,8 +268,7 @@ MobileTimePicker.propTypes = {
   selectedSections: PropTypes.oneOfType([PropTypes.oneOf(['all', 'day', 'empty', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'weekDay', 'year']), PropTypes.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/modern/MonthCalendar/MonthCalendar.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-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 _excluded = ["className", "classes", "value", "defaultValue", "referenceDate", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onChange", "shouldDisableMonth", "readOnly", "disableHighlightToday", "autoFocus", "onMonthFocus", "hasFocus", "onFocusedViewChange", "monthsPerRow", "timezone", "gridLabelId", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -17,11 +17,9 @@ import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { SECTION_TYPE_GRANULARITY } from "../internals/utils/getDefaultReferenceDate.js";
 import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
 import { DIALOG_WIDTH } from "../internals/constants/dimensions.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root']
   };
@@ -68,6 +66,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
   const props = useMonthCalendarDefaultizedProps(inProps, 'MuiMonthCalendar');
   const {
       className,
+      classes: classesProp,
       value: valueProp,
       defaultValue,
       referenceDate: referenceDateProp,
@@ -99,12 +98,16 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
-    onChange: onChange,
+    referenceDate: referenceDateProp,
+    onChange,
     valueManager: singleItemValueManager
   });
   const now = useNow(timezone);
   const isRtl = useRtl();
   const utils = useUtils();
+  const {
+    ownerState
+  } = usePickerPrivateContext();
   const referenceDate = React.useMemo(() => singleItemValueManager.getInitialReferenceValue({
     value,
     utils,
@@ -114,8 +117,7 @@ export const MonthCalendar = /*#__PURE__*/React.forwardRef(function MonthCalenda
     granularity: 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) {
@@ -252,7 +254,9 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
    */
   defaultValue: PropTypes.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.bool,
   /**
@@ -289,14 +293,15 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
   monthsPerRow: PropTypes.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.func,
   onFocusedViewChange: PropTypes.func,
   onMonthFocus: PropTypes.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.bool,
   /**
@@ -306,8 +311,7 @@ process.env.NODE_ENV !== "production" ? MonthCalendar.propTypes = {
   referenceDate: PropTypes.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.func,

package/modern/MonthCalendar/PickersMonth.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "className", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
+const _excluded = ["autoFocus", "className", "classes", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow", "slots", "slotProps"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, alpha, useThemeProps } from '@mui/material/styles';
@@ -8,16 +8,12 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getPickersMonthUtilityClass, pickersMonthClasses } from "./pickersMonthClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    disabled,
-    selected,
-    classes
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
-    monthButton: ['monthButton', disabled && 'disabled', selected && 'selected']
+    monthButton: ['monthButton', ownerState.isMonthDisabled && 'disabled', ownerState.isMonthSelected && 'selected']
   };
   return composeClasses(slots, getPickersMonthUtilityClass, classes);
 };
@@ -93,9 +89,10 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
   const {
       autoFocus,
       className,
+      classes: classesProp,
       children,
-      disabled,
-      selected,
+      disabled = false,
+      selected = false,
       value,
       tabIndex,
       onClick,
@@ -112,7 +109,14 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ref = React.useRef(null);
-  const classes = useUtilityClasses(props);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, 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
   useEnhancedEffect(() => {
@@ -140,12 +144,12 @@ export const PickersMonth = /*#__PURE__*/React.memo(function PickersMonth(inProp
       onFocus: event => onFocus(event, value),
       onBlur: event => onBlur(event, value)
     },
-    ownerState: props,
+    ownerState,
     className: classes.monthButton
   });
   return /*#__PURE__*/_jsx(PickersMonthRoot, _extends({
     className: clsx(classes.root, className),
-    ownerState: props
+    ownerState: ownerState
   }, other, {
     children: /*#__PURE__*/_jsx(MonthButton, _extends({}, monthButtonProps))
   }));

package/modern/MultiSectionDigitalClock/MultiSectionDigitalClock.js

@@ -10,7 +10,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEventCallback from '@mui/utils/useEventCallback';
 import composeClasses from '@mui/utils/composeClasses';
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils, useNow } from "../internals/hooks/useUtils.js";
 import { convertValueToMeridiem, createIsAfterIgnoreDatePart } from "../internals/utils/time-utils.js";
 import { useViews } from "../internals/hooks/useViews.js";
@@ -101,10 +101,11 @@ export const MultiSectionDigitalClock = /*#__PURE__*/React.forwardRef(function M
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: singleItemValueManager
   });
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const now = useNow(timezone);
   const timeSteps = React.useMemo(() => _extends({
     hours: 1,
@@ -368,7 +369,8 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
    */
   defaultValue: PropTypes.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.bool,
@@ -435,7 +437,8 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
    */
   openTo: PropTypes.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.bool,
@@ -446,8 +449,7 @@ process.env.NODE_ENV !== "production" ? MultiSectionDigitalClock.propTypes = {
   referenceDate: PropTypes.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/modern/PickersActionBar/PickersActionBar.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import DialogActions from '@mui/material/DialogActions';
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -28,7 +28,7 @@ function PickersActionBar(props) {
       actions
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   if (actions == null || actions.length === 0) {
     return null;
   }

package/modern/PickersCalendarHeader/PickersCalendarHeader.js

@@ -12,7 +12,7 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import IconButton from '@mui/material/IconButton';
-import { usePickersTranslations } from "../hooks/usePickersTranslations.js";
+import { usePickerTranslations } from "../hooks/usePickerTranslations.js";
 import { useUtils } from "../internals/hooks/useUtils.js";
 import { PickersFadeTransitionGroup } from "../DateCalendar/PickersFadeTransitionGroup.js";
 import { ArrowDropDownIcon } from "../icons/index.js";
@@ -110,7 +110,7 @@ const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
  * - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
  */
 const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
-  const translations = usePickersTranslations();
+  const translations = usePickerTranslations();
   const utils = useUtils();
   const props = useThemeProps({
     props: inProps,

package/modern/PickersLayout/PickersLayout.js

@@ -145,7 +145,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    */
   classes: PropTypes.object,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   isLandscape: PropTypes.bool.isRequired,
   /**
    * `true` if the application is in right-to-left direction.
@@ -166,7 +165,6 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
    * Force rendering in particular orientation.
    */
   orientation: PropTypes.oneOf(['landscape', 'portrait']),
-  readOnly: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}

package/modern/PickersLayout/usePickerLayout.js

@@ -7,13 +7,13 @@ import composeClasses from '@mui/utils/composeClasses';
 import { PickersActionBar } from "../PickersActionBar/index.js";
 import { getPickersLayoutUtilityClass } from "./pickersLayoutClasses.js";
 import { PickersShortcuts } from "../PickersShortcuts/index.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function toolbarHasView(toolbarProps) {
   return toolbarProps.view !== null;
 }
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    classes,
     isLandscape
   } = ownerState;
   const slots = {
@@ -28,6 +28,9 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getPickersLayoutUtilityClass, classes);
 };
 const usePickerLayout = props => {
+  const {
+    ownerState: pickersOwnerState
+  } = usePickerPrivateContext();
   const {
     wrapperVariant,
     onAccept,
@@ -42,17 +45,20 @@ const usePickerLayout = props => {
     onSelectShortcut,
     isValid,
     isLandscape,
-    disabled,
-    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 = _extends({}, pickersOwnerState, {
+    wrapperVariant,
+    isLandscape
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
 
   // Action bar
   const ActionBar = slots?.actionBar ?? PickersActionBar;
@@ -67,9 +73,7 @@ const usePickerLayout = props => {
       actions: wrapperVariant === 'desktop' ? [] : ['cancel', 'accept']
     },
     className: classes.actionBar,
-    ownerState: _extends({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const actionBar = /*#__PURE__*/_jsx(ActionBar, _extends({}, actionBarProps));
 
@@ -84,14 +88,10 @@ const usePickerLayout = props => {
       value,
       view,
       onViewChange,
-      views,
-      disabled,
-      readOnly
+      views
     },
     className: classes.toolbar,
-    ownerState: _extends({}, props, {
-      wrapperVariant
-    })
+    ownerState
   });
   const toolbar = toolbarHasView(toolbarProps) && !!Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, toolbarProps)) : null;
 
@@ -117,12 +117,7 @@ const usePickerLayout = props => {
       onChange: onSelectShortcut
     },
     className: classes.shortcuts,
-    ownerState: {
-      isValid,
-      isLandscape,
-      onChange: onSelectShortcut,
-      wrapperVariant
-    }
+    ownerState
   });
   const shortcuts = view && !!Shortcuts ? /*#__PURE__*/_jsx(Shortcuts, _extends({}, shortcutsProps)) : null;
   return {

package/modern/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFormControl } from '@mui/material/FormControl';
@@ -194,7 +194,9 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       readOnly,
       inputProps,
       inputRef,
-      sectionListRef
+      sectionListRef,
+      onFocus,
+      onBlur
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootRef = React.useRef(null);
@@ -206,13 +208,12 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
   const handleInputFocus = event => {
-    // Fix a bug with IE11 where the focus/blur events are triggered
-    // while the component is disabled.
-    if (muiFormControl.disabled) {
-      event.stopPropagation();
-      return;
-    }
     muiFormControl.onFocus?.(event);
+    onFocus?.(event);
+  };
+  const handleInputBlur = event => {
+    muiFormControl.onBlur?.(event);
+    onBlur?.(event);
   };
   React.useEffect(() => {
     if (muiFormControl) {
@@ -254,7 +255,7 @@ const PickersInputBase = /*#__PURE__*/React.forwardRef(function PickersInputBase
       tabIndex: tabIndex,
       className: classes.sectionsContainer,
       onFocus: handleInputFocus,
-      onBlur: muiFormControl.onBlur,
+      onBlur: handleInputBlur,
       onInput: onInput,
       onPaste: onPaste,
       onKeyDown: onKeyDown,

package/modern/PickersTextField/PickersTextField.js

@@ -105,8 +105,6 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
     className: clsx(classes.root, className),
     ref: handleRootRef,
     focused: focused,
-    onFocus: onFocus,
-    onBlur: onBlur,
     disabled: disabled,
     variant: variant,
     error: error,
@@ -128,6 +126,8 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onKeyUp: onKeyUp,
       onInput: onInput,
       onPaste: onPaste,
+      onFocus: onFocus,
+      onBlur: onBlur,
       endAdornment: endAdornment,
       startAdornment: startAdornment,
       tabIndex: tabIndex,