@mui/x-date-pickers 9.0.0-alpha.3 → 9.0.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,128 @@
 # Changelog
 
+## 9.0.0-alpha.4
+
+_Mar 19, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes and internal improvements
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @LukasTy, @mapache-salvaje, @michelengelen, @noraleonte, @rita-codes, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-alpha.4`
+
+- [DataGrid] Mark charts integration as stable (#21764) @JCQuintas
+- [DataGrid] Move `elementOverrides` to constants and remove duplicates (#21618) @sai6855
+- [DataGrid] Migrate from deprecated Material UI APIs (#21682) @siriwatknp
+
+#### `@mui/x-data-grid-pro@9.0.0-alpha.4` [![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@9.0.0-alpha.4`.
+
+#### `@mui/x-data-grid-premium@9.0.0-alpha.4` [![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@9.0.0-alpha.4`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.0-alpha.4`
+
+- [pickers] Avoid stealing focus on click away (#13434) @LukasTy
+- [pickers] Promote `fieldRef` to stable and add `clearValue` method (#21655) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.0-alpha.4` [![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@9.0.0-alpha.4`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-alpha.4`
+
+- [charts] Add v9 chart series types and helper functions migration (#21009) @bernardobelchior
+- [charts] Extract event listener to the layer container (#21751) @alexfauquette
+- [charts] Fix WebGL print export canvas stretching (#21738) @JCQuintas
+- [charts] Improve deprecation warnings (#21760) @alexfauquette
+- [charts] Improve type safety in `identifierCleaner` (#21719) @bernardobelchior
+- [charts] Make `preferStrictDomainInLineCharts` the default (#21744) @JCQuintas
+- [charts] Move title and description to the layer container (#21757) @alexfauquette
+- [charts] Refactor `FunnelChart` classes structure (#21652) @JCQuintas
+- [charts] Refactor `Heatmap` classes structure (#21653) @JCQuintas
+- [charts] Refactor `RadarChart` classes structure (#21650) @JCQuintas
+- [charts] Refactor `SankeyChart` classes structure (#21654) @JCQuintas
+- [charts] Refactor legend getters to use utility functions (#21628) @sai6855
+- [charts] Remove deprecated `ChartContainer` and `ChartDataProvider` (#21777) @alexfauquette
+- [charts] Remove deprecated `itemId` from `SeriesLegendItemContext` (#21788) @alexfauquette
+- [charts] Remove deprecated `useMouseTracker()` (#21787) @alexfauquette
+- [charts] Remove deprecated classes (#21775) @alexfauquette
+- [charts] Remove deprecated props from PieArcLabel animation (#21789) @alexfauquette
+- [charts] Remove get*UtilityClass from public exports (#21769) @JCQuintas
+- [charts] Remove the deprecated `disableHover` property (#21785) @alexfauquette
+- [charts] Remove the deprecated `message` prop (#21784) @alexfauquette
+- [charts] Remove deprecated props about voronoi (#21796) @alexfauquette
+- [charts] Remove deprecated pieArcClasses (#21795) @alexfauquette
+- [charts] Rename `data-series-id` by `data-series` (#21761) @alexfauquette
+- [charts] Rename `voronoiMaxRadius`/`disableVoronoi` to `hitAreaRadius`/`disableHitArea` (#21750) @bernardobelchior
+- [charts] Update pt-PT locale (#21296) @bernardobelchior
+- [charts] Use different shape per series by default (#21713) @alexfauquette
+- [charts] Add className prop to Radar components (#21794) @JCQuintas
+- [charts] Add className prop to shared chart components (#21792) @JCQuintas
+- [charts] Add className prop to BarPlot (#21791) @JCQuintas
+- [charts] Portal tooltip into ChartsLayerContainer (#21801) @JCQuintas
+
+#### `@mui/x-charts-pro@9.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@9.0.0-alpha.4`, plus:
+
+- [charts-pro] Allow `brush` interaction to accept `requiredKeys/pointerMode` (#21716) @JCQuintas
+- [charts-pro] Remove deprecated `onAxisClick` for Heatmap (#21786) @alexfauquette
+
+#### `@mui/x-charts-premium@9.0.0-alpha.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.0.0-alpha.4`, plus:
+
+- [charts-premium] Add candlestick chart (#21129) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-alpha.4`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@9.0.0-alpha.4`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-alpha.4`
+
+Internal changes.
+
+### Docs
+
+- [docs-infra] Exclude `ServerSideLazyLoadingRevalidation` from argos (#21734) @sai6855
+- [docs] Update charts v9 migration guide to include premium package (#21743) @bernardobelchior
+- [docs] Update v9 migration guides to install next tag (#21741) @bernardobelchior
+- [docs] Revise the Pie chart docs (#21565) @mapache-salvaje
+- [docs] Revise the Bar Chart docs (#21482) @mapache-salvaje
+- [docs] Removed a `console.log` from an aggregation demo (#21698) @michelengelen
+
+### Core
+
+- [code-infra] Add pkg-pr-new as dev dependency (#21754) @Janpot
+- [code-infra] Prevent `combiner` to have default parameters (#21707) @JCQuintas
+- [code-infra] Remove CI coverage collection and upload to Codecov (#21671) @Janpot
+- [internal] Remove @bernardobelchior from Charts CODEOWNERS (#21776) @Copilot
+
+### Miscellaneous
+
+- [x-license] Fix process.env.MUI_VERSION not being replaced during build (#21727) @aemartos
+- [x-license] Add new watermark license status message (#21720) @aemartos
+
 ## 9.0.0-alpha.3
 
 _Mar 12, 2026_

package/DateField/DateField.js

@@ -108,6 +108,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -320,10 +324,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: _propTypes.default.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/DateField/DateField.mjs

@@ -101,6 +101,10 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -313,10 +317,6 @@ process.env.NODE_ENV !== "production" ? DateField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/DateTimeField/DateTimeField.js

@@ -118,6 +118,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -360,10 +364,6 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: _propTypes.default.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/DateTimeField/DateTimeField.mjs

@@ -111,6 +111,10 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -353,10 +357,6 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/DigitalClock/DigitalClock.js

@@ -111,6 +111,7 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
   const listRef = React.useRef(null);
+  const lastActiveRef = React.useRef(null);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -206,7 +207,8 @@ const DigitalClock = exports.DigitalClock = /*#__PURE__*/React.forwardRef(functi
       return;
     }
     const offsetTop = activeItem.offsetTop;
-    if (autoFocus || !!focusedView) {
+    if ((autoFocus || !!focusedView) && activeItem !== lastActiveRef.current) {
+      lastActiveRef.current = activeItem;
       activeItem.focus();
     }
 

package/DigitalClock/DigitalClock.mjs

@@ -104,6 +104,7 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
   const listRef = React.useRef(null);
+  const lastActiveRef = React.useRef(null);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiDigitalClock'
@@ -199,7 +200,8 @@ export const DigitalClock = /*#__PURE__*/React.forwardRef(function DigitalClock(
       return;
     }
     const offsetTop = activeItem.offsetTop;
-    if (autoFocus || !!focusedView) {
+    if ((autoFocus || !!focusedView) && activeItem !== lastActiveRef.current) {
+      lastActiveRef.current = activeItem;
       activeItem.focus();
     }
 

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -17,6 +17,7 @@ var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _multiSectionDigitalClockSectionClasses = require("./multiSectionDigitalClockSectionClasses");
 var _dimensions = require("../internals/constants/dimensions");
 var _utils = require("../internals/utils/utils");
@@ -100,6 +101,7 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
   const containerRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, containerRef);
   const previousActive = React.useRef(null);
+  const shouldRefocusOnNextRender = React.useRef(false);
   const props = (0, _styles.useThemeProps)({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -131,13 +133,21 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
-    if (active && autoFocus && activeItem) {
+    if (!activeItem) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    const isSameItemAsPrevious = previousActive.current === activeItem;
+    const isFocusInsideSection = !!activeElement && containerRef.current.contains(activeElement);
+    const shouldRefocusSameItem = isSameItemAsPrevious && shouldRefocusOnNextRender.current;
+    if (active && autoFocus && (!isSameItemAsPrevious || shouldRefocusSameItem) && (previousActive.current == null || shouldRefocusOnNextRender.current || isFocusInsideSection)) {
+      previousActive.current = activeItem;
+      shouldRefocusOnNextRender.current = false;
       activeItem.focus();
     }
-    if (!activeItem || previousActive.current === activeItem) {
+    if (isSameItemAsPrevious) {
       return;
     }
-    previousActive.current = activeItem;
     const offsetTop = activeItem.offsetTop;
     const itemHeight = activeItem.offsetHeight;
     const containerHeight = containerRef.current.clientHeight;
@@ -155,9 +165,35 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
     // Ensure we don't scroll past the top
     containerRef.current.scrollTop = Math.max(0, scrollPosition);
   });
+  const handleBlur = (0, _useEventCallback.default)(event => {
+    // Keep focus restoration only for in-picker keyboard navigation.
+    // Do not restore focus after leaving the picker, which would steal focus from external inputs.
+    const relatedTarget = event.relatedTarget;
+    const blurParent = relatedTarget?.parentElement;
+    const relatedTargetRole = relatedTarget?.getAttribute('role');
+    const shouldRefocus = blurParent?.nodeName === 'UL' && blurParent !== containerRef.current || relatedTargetRole === 'gridcell';
+    shouldRefocusOnNextRender.current = shouldRefocus;
+    if (previousActive.current && blurParent?.nodeName === 'UL' && blurParent !== containerRef.current) {
+      previousActive.current = null;
+    }
+  });
+
+  // Reset tracking when section becomes inactive
+  // so focus can be reapplied when user returns via keyboard
+  React.useEffect(() => {
+    if (!active) {
+      previousActive.current = null;
+    }
+  }, [active]);
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
-  const handleKeyDown = event => {
+  const handleKeyDown = (0, _useEventCallback.default)(event => {
     switch (event.key) {
+      case 'Tab':
+        {
+          // Preserve focus restoration when leaving the section with keyboard navigation.
+          shouldRefocusOnNextRender.current = true;
+          break;
+        }
       case 'PageUp':
         {
           const newIndex = (0, _utils.getFocusedListItemIndex)(containerRef.current) - 5;
@@ -183,15 +219,16 @@ const MultiSectionDigitalClockSection = exports.MultiSectionDigitalClockSection
           break;
         }
       default:
+        break;
     }
-  };
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiSectionDigitalClockSectionRoot, (0, _extends2.default)({
     ref: handleRef,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    autoFocusItem: autoFocus && active,
     role: "listbox",
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.mjs

@@ -11,6 +11,7 @@ import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { getMultiSectionDigitalClockSectionUtilityClass } from "./multiSectionDigitalClockSectionClasses.mjs";
 import { DIGITAL_CLOCK_VIEW_HEIGHT, MULTI_SECTION_CLOCK_SECTION_WIDTH } from "../internals/constants/dimensions.mjs";
 import { getFocusedListItemIndex } from "../internals/utils/utils.mjs";
@@ -93,6 +94,7 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
   const containerRef = React.useRef(null);
   const handleRef = useForkRef(ref, containerRef);
   const previousActive = React.useRef(null);
+  const shouldRefocusOnNextRender = React.useRef(false);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiMultiSectionDigitalClockSection'
@@ -124,13 +126,21 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
       return;
     }
     const activeItem = containerRef.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');
-    if (active && autoFocus && activeItem) {
+    if (!activeItem) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    const isSameItemAsPrevious = previousActive.current === activeItem;
+    const isFocusInsideSection = !!activeElement && containerRef.current.contains(activeElement);
+    const shouldRefocusSameItem = isSameItemAsPrevious && shouldRefocusOnNextRender.current;
+    if (active && autoFocus && (!isSameItemAsPrevious || shouldRefocusSameItem) && (previousActive.current == null || shouldRefocusOnNextRender.current || isFocusInsideSection)) {
+      previousActive.current = activeItem;
+      shouldRefocusOnNextRender.current = false;
       activeItem.focus();
     }
-    if (!activeItem || previousActive.current === activeItem) {
+    if (isSameItemAsPrevious) {
       return;
     }
-    previousActive.current = activeItem;
     const offsetTop = activeItem.offsetTop;
     const itemHeight = activeItem.offsetHeight;
     const containerHeight = containerRef.current.clientHeight;
@@ -148,9 +158,35 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
     // Ensure we don't scroll past the top
     containerRef.current.scrollTop = Math.max(0, scrollPosition);
   });
+  const handleBlur = useEventCallback(event => {
+    // Keep focus restoration only for in-picker keyboard navigation.
+    // Do not restore focus after leaving the picker, which would steal focus from external inputs.
+    const relatedTarget = event.relatedTarget;
+    const blurParent = relatedTarget?.parentElement;
+    const relatedTargetRole = relatedTarget?.getAttribute('role');
+    const shouldRefocus = blurParent?.nodeName === 'UL' && blurParent !== containerRef.current || relatedTargetRole === 'gridcell';
+    shouldRefocusOnNextRender.current = shouldRefocus;
+    if (previousActive.current && blurParent?.nodeName === 'UL' && blurParent !== containerRef.current) {
+      previousActive.current = null;
+    }
+  });
+
+  // Reset tracking when section becomes inactive
+  // so focus can be reapplied when user returns via keyboard
+  React.useEffect(() => {
+    if (!active) {
+      previousActive.current = null;
+    }
+  }, [active]);
   const focusedOptionIndex = items.findIndex(item => item.isFocused(item.value));
-  const handleKeyDown = event => {
+  const handleKeyDown = useEventCallback(event => {
     switch (event.key) {
+      case 'Tab':
+        {
+          // Preserve focus restoration when leaving the section with keyboard navigation.
+          shouldRefocusOnNextRender.current = true;
+          break;
+        }
       case 'PageUp':
         {
           const newIndex = getFocusedListItemIndex(containerRef.current) - 5;
@@ -176,15 +212,16 @@ export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(fun
           break;
         }
       default:
+        break;
     }
-  };
+  });
   return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
     ref: handleRef,
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    autoFocusItem: autoFocus && active,
     role: "listbox",
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur
   }, other, {
     children: items.map((option, index) => {
       const isItemDisabled = option.isDisabled?.(option.value);

package/TimeField/TimeField.js

@@ -118,6 +118,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: _propTypes.default.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -321,10 +325,6 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: _propTypes.default.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/TimeField/TimeField.mjs

@@ -111,6 +111,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default true
    */
   enableAccessibleFieldDOMStructure: PropTypes.bool,
+  /**
+   * The ref object used to imperatively interact with the field.
+   */
+  fieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `true`, the component is displayed in focused state.
    */
@@ -314,10 +318,6 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default The timezone of the `value` or `defaultValue` prop is defined, 'default' otherwise.
    */
   timezone: PropTypes.string,
-  /**
-   * The ref object used to imperatively interact with the field.
-   */
-  unstableFieldRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The selected value.
    * Used when the component is controlled.

package/hooks/useSplitFieldProps.d.mts

@@ -1,6 +1,6 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.mjs";
 import { PickerValueType } from "../models/common.mjs";
-declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "fieldRef", "startFieldRef", "endFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
 export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:

package/hooks/useSplitFieldProps.d.ts

@@ -1,6 +1,6 @@
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.js";
 import { PickerValueType } from "../models/common.js";
-declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef", "unstableStartFieldRef", "unstableEndFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
+declare const SHARED_FIELD_INTERNAL_PROP_NAMES: readonly ["value", "defaultValue", "referenceDate", "format", "formatDensity", "onChange", "timezone", "onError", "shouldRespectLeadingZeros", "selectedSections", "onSelectedSectionsChange", "fieldRef", "startFieldRef", "endFieldRef", "enableAccessibleFieldDOMStructure", "disabled", "readOnly", "dateSeparator", "autoFocus", "focused"];
 export type InternalPropNames<TValueType extends PickerValueType> = (typeof SHARED_FIELD_INTERNAL_PROP_NAMES)[number] | (TValueType extends 'date' | 'date-time' ? (typeof DATE_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'time' | 'date-time' ? (typeof TIME_VALIDATION_PROP_NAMES)[number] : never) | (TValueType extends 'date-time' ? (typeof DATE_TIME_VALIDATION_PROP_NAMES)[number] : never);
 /**
  * Split the props received by the field component into:

package/hooks/useSplitFieldProps.js

@@ -10,7 +10,7 @@ exports.useSplitFieldProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _extractValidationProps = require("../validation/extractValidationProps");
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'fieldRef', 'startFieldRef', 'endFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/hooks/useSplitFieldProps.mjs

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { DATE_TIME_VALIDATION_PROP_NAMES, DATE_VALIDATION_PROP_NAMES, TIME_VALIDATION_PROP_NAMES } from "../validation/extractValidationProps.mjs";
-const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'unstableFieldRef', 'unstableStartFieldRef', 'unstableEndFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
+const SHARED_FIELD_INTERNAL_PROP_NAMES = ['value', 'defaultValue', 'referenceDate', 'format', 'formatDensity', 'onChange', 'timezone', 'onError', 'shouldRespectLeadingZeros', 'selectedSections', 'onSelectedSectionsChange', 'fieldRef', 'startFieldRef', 'endFieldRef', 'enableAccessibleFieldDOMStructure', 'disabled', 'readOnly', 'dateSeparator', 'autoFocus', 'focused'];
 /**
  * Split the props received by the field component into:
  * - `internalProps` which are used by the various hooks called by the field component.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v9.0.0-alpha.3
+ * @mui/x-date-pickers v9.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v9.0.0-alpha.3
+ * @mui/x-date-pickers v9.0.0-alpha.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/PickerPopper/PickerPopper.js

@@ -21,6 +21,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
+var _isElementInteractive = require("../../utils/isElementInteractive");
 var _pickerPopperClasses = require("./pickerPopperClasses");
 var _utils = require("../../utils/utils");
 var _usePickerPrivateContext = require("../../hooks/usePickerPrivateContext");
@@ -213,6 +214,13 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 if (process.env.NODE_ENV !== "production") PickerPopperPaperWrapper.displayName = "PickerPopperPaperWrapper";
+const isEventTargetInteractive = eventTarget => {
+  const element = eventTarget instanceof HTMLElement ? eventTarget : null;
+  if (!element) {
+    return false;
+  }
+  return (0, _isElementInteractive.isElementInteractive)(element);
+};
 function PickerPopper(inProps) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -284,6 +292,14 @@ function PickerPopper(inProps) {
         dismissViews();
       });
     } else {
+      // Get all the targets of this event.
+      const eventTargets = event.composedPath();
+      // https://github.com/mui/mui-x/pull/13434
+      // Check if the click is on an interactive element.
+      // If it is, we don't want to refocus the last focused element.
+      if (eventTargets.some(isEventTargetInteractive)) {
+        lastFocusedElementRef.current = null;
+      }
       dismissViews();
     }
   });
@@ -330,8 +346,7 @@ function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: viewContainerRole === 'tooltip',
-      isEnabled: () => true
+      disableEnforceFocus: viewContainerRole === 'tooltip'
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, (0, _extends2.default)({}, TransitionProps, slotProps?.desktopTransition, {
         onExited: event => {

package/internals/components/PickerPopper/PickerPopper.mjs

@@ -15,6 +15,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, useThemeProps } from '@mui/material/styles';
+import { isElementInteractive } from "../../utils/isElementInteractive.mjs";
 import { getPickerPopperUtilityClass } from "./pickerPopperClasses.mjs";
 import { executeInTheNextEventLoopTick, getActiveElement } from "../../utils/utils.mjs";
 import { usePickerPrivateContext } from "../../hooks/usePickerPrivateContext.mjs";
@@ -206,6 +207,13 @@ const PickerPopperPaperWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 if (process.env.NODE_ENV !== "production") PickerPopperPaperWrapper.displayName = "PickerPopperPaperWrapper";
+const isEventTargetInteractive = eventTarget => {
+  const element = eventTarget instanceof HTMLElement ? eventTarget : null;
+  if (!element) {
+    return false;
+  }
+  return isElementInteractive(element);
+};
 export function PickerPopper(inProps) {
   const props = useThemeProps({
     props: inProps,
@@ -277,6 +285,14 @@ export function PickerPopper(inProps) {
         dismissViews();
       });
     } else {
+      // Get all the targets of this event.
+      const eventTargets = event.composedPath();
+      // https://github.com/mui/mui-x/pull/13434
+      // Check if the click is on an interactive element.
+      // If it is, we don't want to refocus the last focused element.
+      if (eventTargets.some(isEventTargetInteractive)) {
+        lastFocusedElementRef.current = null;
+      }
       dismissViews();
     }
   });
@@ -323,8 +339,7 @@ export function PickerPopper(inProps) {
       // which would force screen readers to read too old label
       ,
       disableRestoreFocus: true,
-      disableEnforceFocus: viewContainerRole === 'tooltip',
-      isEnabled: () => true
+      disableEnforceFocus: viewContainerRole === 'tooltip'
     }, slotProps?.desktopTrapFocus, {
       children: /*#__PURE__*/_jsx(Transition, _extends({}, TransitionProps, slotProps?.desktopTransition, {
         onExited: event => {