@mui/x-date-pickers-pro 9.0.2 → 9.0.4

package/CHANGELOG.md

@@ -1,5 +1,228 @@
 # Changelog
 
+## 9.0.4
+
+_Apr 28, 2026_
+
+We'd like to extend a big thank you to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- Fix Pickers previous (v9.0.3) release ensuring the latest `@mui/x-internals` version usage
+
+The following team members contributed to this release:
+@alexfauquette, @JCQuintas, @LukasTy, @mj12albert
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@9.0.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.4`.
+
+#### `@mui/x-data-grid-premium@9.0.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.4`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@9.0.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.4`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.4`
+
+- [charts] Exclude hidden series and items from keyboard navigation (alt approach) (#22221) @JCQuintas
+- [charts] Fix line interaction with `area` and `conectNulls` (#22227) @alexfauquette
+- [charts] Implement the continuous case of `getAxisIndex` for rotation axis (#22230) @alexfauquette
+
+#### `@mui/x-charts-pro@9.0.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.4`.
+
+#### `@mui/x-charts-premium@9.0.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.4` plus:
+
+- [charts-premium] Add `showMark` and `shape` properties to radial line (#22226) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.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.4`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.4`
+
+Internal changes.
+
+#### `@mui/x-scheduler-premium@9.0.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-scheduler@9.0.4`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.4`
+
+Internal changes.
+
+### Docs
+
+- [docs] Update WCAG links (#22234) @mj12albert
+
+### Core
+
+- [code-infra] Avoid overriding `renovate` `ignoredPaths` (#22228) @LukasTy
+
+## 9.0.3
+
+_Apr 27, 2026_
+
+We'd like to extend a big thank you to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- ⌨️ Keyboard support for creating events in the Scheduler
+
+Special thanks go out to these community members for their valuable contributions:
+@supunsathsara, @ZAKIURREHMAN
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @arminmeh, @brijeshb42, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @oliviertassinari, @rita-codes, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.3`
+
+- [DataGrid] Fix `:first-child` SSR warning when `MuiDataGrid.styleOverrides` is set (#22081) @siriwatknp
+- [DataGrid] Fix row reordering when filter hides rows (#22096) @siriwatknp
+- [DataGrid] Remove unused `LayoutDataGridLegacy` class (#22009) @romgrk
+- [DataGrid] Remove unused code, clean up grid-related utilities and deprecate `GridPanelHeader` (#22112) @sai6855
+- [DataGrid] Fix columns cutting off after resizing (#22088) @ZAKIURREHMAN
+
+#### `@mui/x-data-grid-pro@9.0.3` [![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.3`.
+
+#### `@mui/x-data-grid-premium@9.0.3` [![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.3`, plus:
+
+- [DataGridPremium] Fix row grouping model updates not being reflected (#22122) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.0.3`
+
+- [pickers] Fix `DateRangeCalendar` drag with `AdapterDayjs` plain-constructor values (#22165) @LukasTy
+- [pickers] Fix disabled state not overriding error border color (#21169) @supunsathsara
+- [pickers] Forward `data-*` and `aria-*` attributes to the root (#22147) @LukasTy
+- [pickers] Support `K` and `k` hour format tokens (#22108) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.3` [![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.3`, plus:
+
+- [DateRangeCalendar] Ensure date dragging triggers regardless of trigger element (#21868) @michelengelen
+
+### Charts
+
+#### `@mui/x-charts@9.0.3`
+
+- [charts] Centralize WebGL clear/render cycle (context-based) (#22127) @JCQuintas
+- [charts] Fix closest series detection for line charts (#22168) @alexfauquette
+- [charts] Fix radius grid lines when axis uses point scale (#22134) @alexfauquette
+- [charts] Use cubic solver for berzier intersection (#22152) @alexfauquette
+
+#### `@mui/x-charts-pro@9.0.3` [![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.3`, plus:
+
+- [charts-pro] Fix wheel zoom clamping with custom `minStart`/`maxEnd` (#22159) @JCQuintas
+
+#### `@mui/x-charts-premium@9.0.3` [![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.3`, plus:
+
+- [charts] Create a `'radialLine'` series type (#22066) @alexfauquette
+- [charts] Plot radial line (#22133) @alexfauquette
+- [charts] Remove `HeatmapWebGLRenderer` indirection (#22169) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.2` [![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.2`.
+
+### Scheduler
+
+#### Breaking changes
+
+- The `views` of `EventTimelinePremium` have been renamed to `presets`, with names that describe the header layout. The props `view`/`defaultView`/`views`/`onViewChange` are now `preset`/`defaultPreset`/`presets`/`onPresetChange`, and the type `EventTimelinePremiumView` is now `EventTimelinePremiumPreset`.
+
+| Old      | New            |
+| :------- | :------------- |
+| `time`   | `dayAndHour`   |
+| `days`   | `day`          |
+| `weeks`  | `dayAndWeek`   |
+| `months` | `monthAndYear` |
+| `years`  | `year`         |
+
+CSS variables (`--time-cell-width`, etc.) and headless store state (`state.view`, `setView`) follow the same rename. The `presets` array is now sorted internally against a canonical zoom order.
+
+#### `@mui/x-scheduler@9.0.0-alpha.3`
+
+- [scheduler] Allow creating events via keyboard - EventCalendar (#21967) @rita-codes
+- [scheduler] Prefix element IDs with a unique Scheduler instance ID (#22109) @rita-codes
+
+#### `@mui/x-scheduler-premium@9.0.0-alpha.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-alpha.3`.
+
+- [scheduler] Allow creating events via keyboard - `EventTimeline` (#22119) @rita-codes
+- [scheduler] Rename `EventTimeline` `views` to ordered presets (#22130) @rita-codes
+
+### Docs
+
+- [docs] Cleanup generated llm md files for chat (#22163) @brijeshb42
+- [docs] Fix `highlightScope` description (#22154) @alexfauquette
+- [docs] Remove obsolete v7 deprecation warning for `dayOfWeekFormatter` (#22111) @LukasTy
+- [docs] Use mui.com for broken links checker known targets (#22129) @JCQuintas
+- [docs] Document picker behavior inside MUI `Dialog` and provide recommended solutions (#22144) @michelengelen
+- [docs] Improve v9 license key version mismatch error guidance (#22180) @aemartos
+
+### Core
+
+- [code-infra] Reduce concurrency for package build to 5 (#22115) @Janpot
+- [code-infra] Rename `docsx` alias to `docs` (#22155) @brijeshb42
+- [docs-infra] Remove monorepo dependency (#22025) @brijeshb42
+- [docs-infra] Use latest published packages (#22086) @brijeshb42
+- [test] Refactor Pickers tests to async user-event (#22043) @LukasTy
+- [test] Remove redundant explicit `unmount()` calls from Pickers tests (#22118) @LukasTy
+
+### Miscellaneous
+
+- [infra] Update `.gitignore` to exclude `.claude/worktrees` (#22145) @michelengelen
+- [infra] Enable branch tracking when creating release branch (#22177) @michelengelen
+- [license] Add MIT license to `x-virtualizer` package (#22164) @michelengelen
+- [website] Fix outdated MUI logos (#22117) @oliviertassinari
+- [internal] Try avoiding store update when virtualization is disabled (#22093) @arminmeh
+
 ## 9.0.2
 
 <!-- generated comparing v9.0.1..master -->

package/DateRangeCalendar/DateRangeCalendar.js

@@ -37,8 +37,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["value", "defaultValue", "referenceDate", "onChange", "className", "classes", "disableFuture", "disablePast", "minDate", "maxDate", "shouldDisableDate", "reduceAnimations", "onMonthChange", "rangePosition", "defaultRangePosition", "onRangePositionChange", "calendars", "currentMonthCalendarPosition", "slots", "slotProps", "loading", "renderLoading", "disableHighlightToday", "focusedView", "onFocusedViewChange", "readOnly", "disabled", "showDaysOutsideCurrentMonth", "dayOfWeekFormatter", "disableAutoMonthSwitching", "autoFocus", "fixedWeekNumber", "disableDragEditing", "displayWeekNumber", "timezone", "availableRangePositions", "views", "view", "openTo", "onViewChange"],
   _excluded2 = ["isDragging", "rangeDragDay", "draggingDatePosition"];
 const packageInfo = {
-  releaseDate: "MTc3NjIxMTIwMDAwMA==",
-  version: "9.0.2",
+  releaseDate: "MTc3NzMzNDQwMDAwMA==",
+  version: "9.0.4",
   name: 'x-date-pickers-pro'
 };
 const DateRangeCalendarRoot = (0, _styles.styled)('div', {

package/DateRangeCalendar/DateRangeCalendar.mjs

@@ -30,8 +30,8 @@ import { PickersRangeCalendarHeader } from "../PickersRangeCalendarHeader/index.
 import { useNullablePickerRangePositionContext } from "../internals/hooks/useNullablePickerRangePositionContext.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const packageInfo = {
-  releaseDate: "MTc3NjIxMTIwMDAwMA==",
-  version: "9.0.2",
+  releaseDate: "MTc3NzMzNDQwMDAwMA==",
+  version: "9.0.4",
   name: 'x-date-pickers-pro'
 };
 const DateRangeCalendarRoot = styled('div', {

package/DateRangeCalendar/useDragRange.js

@@ -10,30 +10,91 @@ exports.useDragRange = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _domUtils = require("@mui/x-internals/domUtils");
 var _dateUtils = require("../internals/utils/date-utils");
+const isEnabledButtonElement = element => (0, _domUtils.isHTMLElement)(element) && element.tagName === 'BUTTON' && !element.disabled;
+/**
+ * Finds the closest ancestor element (or the element itself) that has the specified data attribute.
+ * This is needed because drag/touch events can target child elements (e.g., text spans)
+ * inside the button, which don't have the data attributes directly.
+ *
+ * @param element The element to start searching from.
+ * @param dataAttribute The data attribute name — must be a single lowercase word
+ *   (e.g., 'timestamp', 'position') because `dataset[attr]` uses camelCase
+ *   while `.closest()` uses kebab-case, and these only align for single-word names.
+ */
+const getClosestElementWithDataAttribute = (element, dataAttribute) => {
+  if (!element) {
+    return null;
+  }
+  return element.dataset[dataAttribute] != null ? element : element.closest(`[data-${dataAttribute}]`);
+};
 const resolveDateFromTarget = (target, adapter, timezone) => {
-  const timestampString = target.dataset.timestamp;
+  if (!(0, _domUtils.isHTMLElement)(target)) {
+    return null;
+  }
+  const element = getClosestElementWithDataAttribute(target, 'timestamp');
+  const timestampString = element?.dataset.timestamp;
   if (!timestampString) {
     return null;
   }
-  const timestamp = +timestampString;
+  const timestamp = Number(timestampString);
   return adapter.date(new Date(timestamp).toISOString(), timezone);
 };
 const isSameAsDraggingDate = event => {
-  const timestampString = event.target.dataset.timestamp;
-  return timestampString === event.dataTransfer.getData('draggingDate');
+  const target = (0, _domUtils.getTarget)(event.nativeEvent);
+  if (!(0, _domUtils.isHTMLElement)(target)) {
+    return false;
+  }
+  const element = getClosestElementWithDataAttribute(target, 'timestamp');
+  return element?.dataset.timestamp === event.dataTransfer.getData('draggingDate');
 };
+
+/**
+ * Resolves a button element from a given element.
+ * Searches both upward (ancestors) and downward (children) since:
+ * - Touch events may target child elements inside the button (e.g., TouchRipple)
+ * - `elementFromPoint` may return wrapper divs containing the button
+ */
 const resolveButtonElement = element => {
-  if (element) {
-    if (element instanceof HTMLButtonElement && !element.disabled) {
-      return element;
+  if (!element) {
+    return null;
+  }
+
+  // Check if element itself is a valid button
+  if (isEnabledButtonElement(element)) {
+    return element;
+  }
+
+  // Search upward - element could be a child of the button (e.g., text span, TouchRipple)
+  const closestButton = element.closest('button');
+  if (isEnabledButtonElement(closestButton)) {
+    return closestButton;
+  }
+
+  // Search downward (breadth-first, max 3 levels) - element could be a wrapper containing the button.
+  // Day cells have shallow DOM, so a small depth limit keeps this efficient.
+  const queue = Array.from(element.children).map(el => ({
+    el,
+    depth: 1
+  }));
+  const maxDepth = 3;
+  while (queue.length > 0) {
+    const {
+      el: current,
+      depth
+    } = queue.shift();
+    if (isEnabledButtonElement(current)) {
+      return current;
     }
-    if (element.children.length) {
-      return resolveButtonElement(element.children[0]);
+    if (depth < maxDepth) {
+      queue.push(...Array.from(current.children).map(el => ({
+        el,
+        depth: depth + 1
+      })));
     }
-    return null;
   }
-  return element;
+  return null;
 };
 const resolveElementFromTouch = (event, ignoreTouchTarget) => {
   // don't parse multi-touch result
@@ -76,7 +137,7 @@ const useDragRangeEvents = ({
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   const handleDragStart = (0, _useEventCallback.default)(event => {
-    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
+    const newDate = resolveDateFromTarget((0, _domUtils.getTarget)(event.nativeEvent), adapter, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -87,11 +148,14 @@ const useDragRangeEvents = ({
     setRangeDragDay(newDate);
     event.dataTransfer.effectAllowed = 'move';
     setIsDragging(true);
-    const buttonDataset = event.target.dataset;
-    if (buttonDataset.timestamp) {
+    // Use currentTarget (the element the handler is attached to) rather than target
+    // because we need the button's dataset, not a potential child element's dataset.
+    const element = getClosestElementWithDataAttribute(event.currentTarget, 'timestamp');
+    const buttonDataset = element?.dataset;
+    if (buttonDataset?.timestamp) {
       event.dataTransfer.setData('draggingDate', buttonDataset.timestamp);
     }
-    if (buttonDataset.position) {
+    if (buttonDataset?.position) {
       onDatePositionChange(buttonDataset.position);
     }
   });
@@ -113,7 +177,7 @@ const useDragRangeEvents = ({
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, adapter, timezone));
+    setRangeDragDay(resolveDateFromTarget((0, _domUtils.getTarget)(event.nativeEvent), adapter, timezone));
   });
   const handleTouchMove = (0, _useEventCallback.default)(event => {
     const target = resolveElementFromTouch(event);
@@ -133,9 +197,12 @@ const useDragRangeEvents = ({
 
     // on mobile we should only initialize dragging state after move is detected
     setIsDragging(true);
-    const button = event.target;
-    const buttonDataset = button.dataset;
-    if (buttonDataset.position) {
+
+    // Use currentTarget (the element the handler is attached to) rather than target
+    // because we need the button's dataset, not a potential child element's dataset.
+    const element = getClosestElementWithDataAttribute(event.currentTarget, 'position');
+    const buttonDataset = element?.dataset;
+    if (buttonDataset?.position) {
       onDatePositionChange(buttonDataset.position);
     }
   });
@@ -194,7 +261,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
+    const newDate = resolveDateFromTarget((0, _domUtils.getTarget)(event.nativeEvent), adapter, timezone);
     if (newDate) {
       onDrop(newDate);
     }

package/DateRangeCalendar/useDragRange.mjs

@@ -3,30 +3,91 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
+import { getTarget, isHTMLElement } from '@mui/x-internals/domUtils';
 import { isEndOfRange, isStartOfRange } from "../internals/utils/date-utils.mjs";
+const isEnabledButtonElement = element => isHTMLElement(element) && element.tagName === 'BUTTON' && !element.disabled;
+/**
+ * Finds the closest ancestor element (or the element itself) that has the specified data attribute.
+ * This is needed because drag/touch events can target child elements (e.g., text spans)
+ * inside the button, which don't have the data attributes directly.
+ *
+ * @param element The element to start searching from.
+ * @param dataAttribute The data attribute name — must be a single lowercase word
+ *   (e.g., 'timestamp', 'position') because `dataset[attr]` uses camelCase
+ *   while `.closest()` uses kebab-case, and these only align for single-word names.
+ */
+const getClosestElementWithDataAttribute = (element, dataAttribute) => {
+  if (!element) {
+    return null;
+  }
+  return element.dataset[dataAttribute] != null ? element : element.closest(`[data-${dataAttribute}]`);
+};
 const resolveDateFromTarget = (target, adapter, timezone) => {
-  const timestampString = target.dataset.timestamp;
+  if (!isHTMLElement(target)) {
+    return null;
+  }
+  const element = getClosestElementWithDataAttribute(target, 'timestamp');
+  const timestampString = element?.dataset.timestamp;
   if (!timestampString) {
     return null;
   }
-  const timestamp = +timestampString;
+  const timestamp = Number(timestampString);
   return adapter.date(new Date(timestamp).toISOString(), timezone);
 };
 const isSameAsDraggingDate = event => {
-  const timestampString = event.target.dataset.timestamp;
-  return timestampString === event.dataTransfer.getData('draggingDate');
+  const target = getTarget(event.nativeEvent);
+  if (!isHTMLElement(target)) {
+    return false;
+  }
+  const element = getClosestElementWithDataAttribute(target, 'timestamp');
+  return element?.dataset.timestamp === event.dataTransfer.getData('draggingDate');
 };
+
+/**
+ * Resolves a button element from a given element.
+ * Searches both upward (ancestors) and downward (children) since:
+ * - Touch events may target child elements inside the button (e.g., TouchRipple)
+ * - `elementFromPoint` may return wrapper divs containing the button
+ */
 const resolveButtonElement = element => {
-  if (element) {
-    if (element instanceof HTMLButtonElement && !element.disabled) {
-      return element;
+  if (!element) {
+    return null;
+  }
+
+  // Check if element itself is a valid button
+  if (isEnabledButtonElement(element)) {
+    return element;
+  }
+
+  // Search upward - element could be a child of the button (e.g., text span, TouchRipple)
+  const closestButton = element.closest('button');
+  if (isEnabledButtonElement(closestButton)) {
+    return closestButton;
+  }
+
+  // Search downward (breadth-first, max 3 levels) - element could be a wrapper containing the button.
+  // Day cells have shallow DOM, so a small depth limit keeps this efficient.
+  const queue = Array.from(element.children).map(el => ({
+    el,
+    depth: 1
+  }));
+  const maxDepth = 3;
+  while (queue.length > 0) {
+    const {
+      el: current,
+      depth
+    } = queue.shift();
+    if (isEnabledButtonElement(current)) {
+      return current;
     }
-    if (element.children.length) {
-      return resolveButtonElement(element.children[0]);
+    if (depth < maxDepth) {
+      queue.push(...Array.from(current.children).map(el => ({
+        el,
+        depth: depth + 1
+      })));
     }
-    return null;
   }
-  return element;
+  return null;
 };
 const resolveElementFromTouch = (event, ignoreTouchTarget) => {
   // don't parse multi-touch result
@@ -69,7 +130,7 @@ const useDragRangeEvents = ({
     return shouldInitDragging && (isSelectedStartDate || isSelectedEndDate);
   };
   const handleDragStart = useEventCallback(event => {
-    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
+    const newDate = resolveDateFromTarget(getTarget(event.nativeEvent), adapter, timezone);
     if (!isElementDraggable(newDate)) {
       return;
     }
@@ -80,11 +141,14 @@ const useDragRangeEvents = ({
     setRangeDragDay(newDate);
     event.dataTransfer.effectAllowed = 'move';
     setIsDragging(true);
-    const buttonDataset = event.target.dataset;
-    if (buttonDataset.timestamp) {
+    // Use currentTarget (the element the handler is attached to) rather than target
+    // because we need the button's dataset, not a potential child element's dataset.
+    const element = getClosestElementWithDataAttribute(event.currentTarget, 'timestamp');
+    const buttonDataset = element?.dataset;
+    if (buttonDataset?.timestamp) {
       event.dataTransfer.setData('draggingDate', buttonDataset.timestamp);
     }
-    if (buttonDataset.position) {
+    if (buttonDataset?.position) {
       onDatePositionChange(buttonDataset.position);
     }
   });
@@ -106,7 +170,7 @@ const useDragRangeEvents = ({
     event.preventDefault();
     event.stopPropagation();
     event.dataTransfer.dropEffect = 'move';
-    setRangeDragDay(resolveDateFromTarget(event.target, adapter, timezone));
+    setRangeDragDay(resolveDateFromTarget(getTarget(event.nativeEvent), adapter, timezone));
   });
   const handleTouchMove = useEventCallback(event => {
     const target = resolveElementFromTouch(event);
@@ -126,9 +190,12 @@ const useDragRangeEvents = ({
 
     // on mobile we should only initialize dragging state after move is detected
     setIsDragging(true);
-    const button = event.target;
-    const buttonDataset = button.dataset;
-    if (buttonDataset.position) {
+
+    // Use currentTarget (the element the handler is attached to) rather than target
+    // because we need the button's dataset, not a potential child element's dataset.
+    const element = getClosestElementWithDataAttribute(event.currentTarget, 'position');
+    const buttonDataset = element?.dataset;
+    if (buttonDataset?.position) {
       onDatePositionChange(buttonDataset.position);
     }
   });
@@ -187,7 +254,7 @@ const useDragRangeEvents = ({
     if (isSameAsDraggingDate(event)) {
       return;
     }
-    const newDate = resolveDateFromTarget(event.target, adapter, timezone);
+    const newDate = resolveDateFromTarget(getTarget(event.nativeEvent), adapter, timezone);
     if (newDate) {
       onDrop(newDate);
     }

package/DateRangePickerDay/DateRangePickerDay.js

@@ -322,8 +322,8 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
     name: 'MuiDateRangePickerDay'
   });
   (0, _internals.useLicenseVerifier)({
-    releaseDate: "MTc3NjIxMTIwMDAwMA==",
-    version: "9.0.2",
+    releaseDate: "MTc3NzMzNDQwMDAwMA==",
+    version: "9.0.4",
     name: 'x-date-pickers-pro'
   });
   const adapter = (0, _hooks.usePickerAdapter)();

package/DateRangePickerDay/DateRangePickerDay.mjs

@@ -315,8 +315,8 @@ const DateRangePickerDayRaw = /*#__PURE__*/React.forwardRef(function DateRangePi
     name: 'MuiDateRangePickerDay'
   });
   useLicenseVerifier({
-    releaseDate: "MTc3NjIxMTIwMDAwMA==",
-    version: "9.0.2",
+    releaseDate: "MTc3NzMzNDQwMDAwMA==",
+    version: "9.0.4",
     name: 'x-date-pickers-pro'
   });
   const adapter = usePickerAdapter();

package/MultiInputDateRangeField/MultiInputDateRangeField.js

@@ -31,7 +31,7 @@ MultiInputDateRangeField.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * If `true`, the field is focused during the first mount.
    * @default false
    */
   autoFocus: _propTypes.default.bool,

package/MultiInputDateRangeField/MultiInputDateRangeField.mjs

@@ -27,7 +27,7 @@ MultiInputDateRangeField.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * If `true`, the field is focused during the first mount.
    * @default false
    */
   autoFocus: PropTypes.bool,

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.js

@@ -36,7 +36,7 @@ MultiInputDateTimeRangeField.propTypes = {
    */
   ampm: _propTypes.default.bool,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * If `true`, the field is focused during the first mount.
    * @default false
    */
   autoFocus: _propTypes.default.bool,

package/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.mjs

@@ -32,7 +32,7 @@ MultiInputDateTimeRangeField.propTypes = {
    */
   ampm: PropTypes.bool,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * If `true`, the field is focused during the first mount.
    * @default false
    */
   autoFocus: PropTypes.bool,

package/MultiInputTimeRangeField/MultiInputTimeRangeField.js

@@ -37,7 +37,7 @@ MultiInputTimeRangeField.propTypes = {
    */
   ampm: _propTypes.default.bool,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * If `true`, the field is focused during the first mount.
    * @default false
    */
   autoFocus: _propTypes.default.bool,

package/MultiInputTimeRangeField/MultiInputTimeRangeField.mjs

@@ -33,7 +33,7 @@ MultiInputTimeRangeField.propTypes = {
    */
   ampm: PropTypes.bool,
   /**
-   * If `true`, the `input` element is focused during the first mount.
+   * If `true`, the field is focused during the first mount.
    * @default false
    */
   autoFocus: PropTypes.bool,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v9.0.2
+ * @mui/x-date-pickers-pro v9.0.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers-pro v9.0.2
+ * @mui/x-date-pickers-pro v9.0.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.js

@@ -26,8 +26,8 @@ const useDesktopRangePicker = _ref => {
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   (0, _internals.useLicenseVerifier)({
-    releaseDate: "MTc3NjIxMTIwMDAwMA==",
-    version: "9.0.2",
+    releaseDate: "MTc3NzMzNDQwMDAwMA==",
+    version: "9.0.4",
     name: 'x-date-pickers-pro'
   });
   const {
@@ -64,6 +64,7 @@ const useDesktopRangePicker = _ref => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: slotProps?.field,
+      externalForwardedProps: (0, _internals2.extractRootForwardedProps)(props),
       ownerState,
       additionalProps: {
         'data-active-range-position': providerProps.contextValue.open ? rangePositionResponse.rangePosition : undefined

package/internals/hooks/useDesktopRangePicker/useDesktopRangePicker.mjs

@@ -6,7 +6,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useLicenseVerifier } from '@mui/x-license/internals';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickerPopper, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, PickerPopper, PickerProvider, extractRootForwardedProps } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.mjs";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.mjs";
 import { getRangeFieldType } from "../../utils/date-fields-utils.mjs";
@@ -19,8 +19,8 @@ export const useDesktopRangePicker = _ref => {
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   useLicenseVerifier({
-    releaseDate: "MTc3NjIxMTIwMDAwMA==",
-    version: "9.0.2",
+    releaseDate: "MTc3NzMzNDQwMDAwMA==",
+    version: "9.0.4",
     name: 'x-date-pickers-pro'
   });
   const {
@@ -57,6 +57,7 @@ export const useDesktopRangePicker = _ref => {
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: slotProps?.field,
+      externalForwardedProps: extractRootForwardedProps(props),
       ownerState,
       additionalProps: {
         'data-active-range-position': providerProps.contextValue.open ? rangePositionResponse.rangePosition : undefined

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.js

@@ -28,8 +28,8 @@ const useMobileRangePicker = _ref => {
     } = _ref,
     pickerParams = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   (0, _internals.useLicenseVerifier)({
-    releaseDate: "MTc3NjIxMTIwMDAwMA==",
-    version: "9.0.2",
+    releaseDate: "MTc3NzMzNDQwMDAwMA==",
+    version: "9.0.4",
     name: 'x-date-pickers-pro'
   });
   const {
@@ -66,6 +66,7 @@ const useMobileRangePicker = _ref => {
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: (0, _internals2.extractRootForwardedProps)(props),
       additionalProps: (0, _extends2.default)({}, isSingleInput && isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useMobileRangePicker/useMobileRangePicker.mjs

@@ -7,7 +7,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import { useLicenseVerifier } from '@mui/x-license/internals';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, PickersModalDialog, PickerProvider } from '@mui/x-date-pickers/internals';
+import { usePicker, PickersModalDialog, PickerProvider, extractRootForwardedProps } from '@mui/x-date-pickers/internals';
 import { usePickerTranslations } from '@mui/x-date-pickers/hooks';
 import { useRangePosition } from "../useRangePosition.mjs";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.mjs";
@@ -21,8 +21,8 @@ export const useMobileRangePicker = _ref => {
     } = _ref,
     pickerParams = _objectWithoutPropertiesLoose(_ref, _excluded);
   useLicenseVerifier({
-    releaseDate: "MTc3NjIxMTIwMDAwMA==",
-    version: "9.0.2",
+    releaseDate: "MTc3NzMzNDQwMDAwMA==",
+    version: "9.0.4",
     name: 'x-date-pickers-pro'
   });
   const {
@@ -59,6 +59,7 @@ export const useMobileRangePicker = _ref => {
   const _useSlotProps = useSlotProps({
       elementType: Field,
       externalSlotProps: innerSlotProps?.field,
+      externalForwardedProps: extractRootForwardedProps(props),
       additionalProps: _extends({}, isSingleInput && isToolbarHidden && {
         id: labelId
       }),

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.js

@@ -64,7 +64,7 @@ const useStaticRangePicker = _ref => {
   const renderPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePickerRangePositionContext.PickerRangePositionContext.Provider, {
     value: rangePositionResponse,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.PickerProvider, (0, _extends2.default)({}, providerProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, slotProps?.layout, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Layout, (0, _extends2.default)({}, (0, _internals.extractRootForwardedProps)(props), slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         sx: (0, _internals.mergeSx)(providerProps.contextValue.rootSx, slotProps?.layout?.sx),

package/internals/hooks/useStaticRangePicker/useStaticRangePicker.mjs

@@ -6,7 +6,7 @@ const _excluded = ["props", "steps"];
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { PickersLayout } from '@mui/x-date-pickers/PickersLayout';
-import { usePicker, DIALOG_WIDTH, PickerProvider, mergeSx } from '@mui/x-date-pickers/internals';
+import { usePicker, DIALOG_WIDTH, PickerProvider, extractRootForwardedProps, mergeSx } from '@mui/x-date-pickers/internals';
 import { useRangePosition } from "../useRangePosition.mjs";
 import { PickerRangePositionContext } from "../../../hooks/usePickerRangePositionContext.mjs";
 import { createRangePickerStepNavigation } from "../../utils/createRangePickerStepNavigation.mjs";
@@ -58,7 +58,7 @@ export const useStaticRangePicker = _ref => {
   const renderPicker = () => /*#__PURE__*/_jsx(PickerRangePositionContext.Provider, {
     value: rangePositionResponse,
     children: /*#__PURE__*/_jsx(PickerProvider, _extends({}, providerProps, {
-      children: /*#__PURE__*/_jsx(Layout, _extends({}, slotProps?.layout, {
+      children: /*#__PURE__*/_jsx(Layout, _extends({}, extractRootForwardedProps(props), slotProps?.layout, {
         slots: slots,
         slotProps: slotProps,
         sx: mergeSx(providerProps.contextValue.rootSx, slotProps?.layout?.sx),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers-pro",
-  "version": "9.0.2",
+  "version": "9.0.4",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Date and Time Picker components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -30,14 +30,14 @@
     "directory": "packages/x-date-pickers-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "@mui/utils": "9.0.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-date-pickers": "^9.0.2",
-    "@mui/x-license": "^9.0.2",
-    "@mui/x-internals": "^9.0.0"
+    "@mui/x-date-pickers": "^9.0.4",
+    "@mui/x-internals": "^9.0.4",
+    "@mui/x-license": "^9.0.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",