@mui/x-charts 9.11.1 → 9.12.0

package/BarChart/BarChart.js

@@ -140,6 +140,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes /* remove-proptypes *
   experimentalFeatures: _propTypes.default.shape({
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/BarChart/BarChart.mjs

@@ -133,6 +133,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes /* remove-proptypes *
   experimentalFeatures: PropTypes.shape({
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/CHANGELOG.md

@@ -1,5 +1,131 @@
 # Changelog
 
+## 9.12.0
+
+_Aug 21, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support [Formulas](https://mui.com/x/react-data-grid/formulas/) on the Data Grid: cells in opted-in columns can hold spreadsheet-like formulas (`=SUM(RANGE(…))`, `=price * quantity`) evaluated by a built-in engine, with a formula editor and [Formula Bar](https://mui.com/x/react-data-grid/components/formula-bar/), autocomplete, reference highlighting, optional A1 notation, fill-handle reference adjustment, custom functions, and live formula Excel export
+- ♿️ Improve the accessibility of Data Grid cells and picker day cells
+- 🗓️ Enable multi-resource event creation and editing in the Scheduler
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @mustafajw07
+
+The following team members contributed to this release:
+@brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @silviuaavram
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.12.0`
+
+- [DataGrid] Expose `apiRef` on `GridCallbackDetails` for selector access in callbacks (#22973) @michelengelen
+- [DataGrid] Fix header height not updating when `headerFilters` or `columnGroupingModel` change (#23059) @MBilalShafi
+- [DataGrid] Fix unhandled rejection when unmounting mid-autosize (#23319) @JCQuintas
+- [DataGrid] Label the blank `singleSelect` filter option (#23294) @JCQuintas
+- [DataGrid] Stop sending incomplete filter items to the data source (#23303) @JCQuintas
+- [DataGrid] Support the `rowheader` attribute for grid cells (#23340) @silviuaavram
+
+#### `@mui/x-data-grid-pro@9.12.0` [![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.12.0`, plus:
+
+- [DataGridPro] Honor `hasNextPage` in infinite lazy loading (#23048) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.12.0` [![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.12.0`, plus:
+
+- [DataGridPremium] Formula support (#22807) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@9.12.0`
+
+- [fields] Keep the selected section on blank space clicks (#23318) @LukasTy
+- [pickers] Associate the day cells with their week day column header (#23339) @LukasTy
+- [pickers] Keep the `gridcell` role and the column index on filler cells (#23326) @Anexus5919
+
+#### `@mui/x-date-pickers-pro@9.12.0` [![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.12.0`, plus:
+
+- [DateRangeCalendar] Round the range highlight at the month grid edges (#23297) @JCQuintas
+- [DateRangePicker] Keep the range highlight opaque for disabled days (#23317) @JCQuintas
+
+### Charts
+
+#### `@mui/x-charts@9.12.0`
+
+- [charts] Add a demo for label on grid row (#23333) @noraleonte
+- [charts] Fix React 18 `propTypes` warnings and stray-pointer test flakiness (#23384) @LukasTy
+- [charts] Focus the clicked item for keyboard navigation (#23247) @JCQuintas
+
+#### `@mui/x-charts-pro@9.12.0` [![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.12.0`.
+
+#### `@mui/x-charts-premium@9.12.0` [![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.12.0`, plus:
+
+- [charts-premium] Add `onItemClick` to the radial charts (#23253) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.12.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.12.0` [![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.12.0`.
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-beta.10`
+
+- [scheduler] Add `onEventEditingStart` to let consumers open their own edit UI (#23361) @rita-codes
+- [scheduler] Fix keyboard and focus issues around the "+N more" popover (#23312) @rita-codes
+- [scheduler] Honor `viewConfig` hour limits in the compact day and week views (#23316) @rita-codes
+- [scheduler] Share timeline event layout data (#23366) @flaviendelangle
+- [scheduler] enable multi-resource event creation and editing (#23313) @mustafajw07
+
+#### `@mui/x-scheduler-premium@9.0.0-beta.10` [![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-beta.10`, plus:
+
+- [scheduler-premium] Allow to control the min and max hour in the Event Timeline (#23212) @rita-codes
+- [scheduler-premium] Dependencies - Create, select and delete via terminals (#23200) @rita-codes
+
+### Codemod
+
+#### `@mui/x-codemod@9.12.0`
+
+Internal changes.
+
+### Docs
+
+- [docs][charts] Document line mark size customization (#23370) @JCQuintas
+- [docs] Add recipe for constraining the `make-child` drop action by item type (#22940) @michelengelen
+- [docs] Redirect the renamed Event Timeline views page (#23324) @brijeshb42
+- [docs] Remove unused `adapter-dependencies.json` (#23328) @LukasTy
+
+### Core
+
+- [code-infra] Add release skill (#23308) @brijeshb42
+- [code-infra] Fix changelog categorization of docs and `DateRangeCalendar` tags (#23385) @JCQuintas
+- [code-infra] Sync mui-release skill (#23330) @brijeshb42
+
+### Miscellaneous
+
+- [core] Declare the missing `react-dom` peer dependencies (#23381) @LukasTy
+- [test] Fix act warnings in the data source filter tests (#23360) @JCQuintas
+- [virtualizer] Add inverse-sticky layout (#23053) @romgrk
+
 ## 9.11.1
 
 _Aug 6, 2026_

package/ChartsContainer/ChartsContainer.js

@@ -111,6 +111,13 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes /* remove-prop
   experimentalFeatures: _propTypes.default.shape({
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsContainer/ChartsContainer.mjs

@@ -104,6 +104,13 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes /* remove-prop
   experimentalFeatures: PropTypes.shape({
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsContainer/useChartsContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartsContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "focusItemOnClick", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 const useChartsContainerProps = props => {
   const _ref = props,
     {
@@ -50,6 +50,7 @@ const useChartsContainerProps = props => {
       slots,
       slotProps,
       disableKeyboardNavigation,
+      focusItemOnClick,
       brushConfig,
       onHiddenItemsChange,
       hiddenItems,
@@ -92,6 +93,7 @@ const useChartsContainerProps = props => {
     seriesConfig,
     experimentalFeatures,
     disableKeyboardNavigation,
+    focusItemOnClick,
     brushConfig,
     onHiddenItemsChange,
     hiddenItems,

package/ChartsContainer/useChartsContainerProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "focusItemOnClick", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.mjs";
 export const useChartsContainerProps = props => {
   const _ref = props,
@@ -44,6 +44,7 @@ export const useChartsContainerProps = props => {
       slots,
       slotProps,
       disableKeyboardNavigation,
+      focusItemOnClick,
       brushConfig,
       onHiddenItemsChange,
       hiddenItems,
@@ -86,6 +87,7 @@ export const useChartsContainerProps = props => {
     seriesConfig,
     experimentalFeatures,
     disableKeyboardNavigation,
+    focusItemOnClick,
     brushConfig,
     onHiddenItemsChange,
     hiddenItems,

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -110,21 +110,14 @@ process.env.NODE_ENV !== "production" ? DefaultContent.propTypes /* remove-propt
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  item: _propTypes.default.shape({
+  item: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     color: _propTypes.default.string.isRequired,
     formattedLabel: _propTypes.default.string,
     formattedValue: _propTypes.default.string.isRequired,
     markShape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
     markType: _propTypes.default.oneOfType([_propTypes.default.oneOf(['circle', 'line', 'line+mark', 'square']), _propTypes.default.func]),
     seriesId: _propTypes.default.string.isRequired,
-    value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-      colorValue: _propTypes.default.any,
-      id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-      sizeValue: _propTypes.default.any,
-      x: _propTypes.default.number.isRequired,
-      y: _propTypes.default.number.isRequired,
-      z: _propTypes.default.any
-    })])
+    value: _propTypes.default.any
   }).isRequired
 } : void 0;
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes /* remove-proptypes */ = {

package/ChartsTooltip/ChartsAxisTooltipContent.mjs

@@ -104,21 +104,14 @@ process.env.NODE_ENV !== "production" ? DefaultContent.propTypes /* remove-propt
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  item: PropTypes.shape({
+  item: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     color: PropTypes.string.isRequired,
     formattedLabel: PropTypes.string,
     formattedValue: PropTypes.string.isRequired,
     markShape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),
     markType: PropTypes.oneOfType([PropTypes.oneOf(['circle', 'line', 'line+mark', 'square']), PropTypes.func]),
     seriesId: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-      colorValue: PropTypes.any,
-      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      sizeValue: PropTypes.any,
-      x: PropTypes.number.isRequired,
-      y: PropTypes.number.isRequired,
-      z: PropTypes.any
-    })])
+    value: PropTypes.any
   }).isRequired
 } : void 0;
 process.env.NODE_ENV !== "production" ? ChartsAxisTooltipContent.propTypes /* remove-proptypes */ = {

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -180,13 +180,13 @@ process.env.NODE_ENV !== "production" ? DefaultSingleValueContent.propTypes /* r
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-  item: _propTypes.default.shape({
+  item: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     color: _propTypes.default.string.isRequired,
     formattedValue: _propTypes.default.any.isRequired,
     identifier: _propTypes.default.shape({
       dataIndex: _propTypes.default.number,
       seriesId: _propTypes.default.string.isRequired,
-      type: _propTypes.default.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
+      type: _propTypes.default.string.isRequired
     }).isRequired,
     label: _propTypes.default.string,
     markShape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),

package/ChartsTooltip/ChartsItemTooltipContent.mjs

@@ -173,13 +173,13 @@ process.env.NODE_ENV !== "production" ? DefaultSingleValueContent.propTypes /* r
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  item: PropTypes.shape({
+  item: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     color: PropTypes.string.isRequired,
     formattedValue: PropTypes.any.isRequired,
     identifier: PropTypes.shape({
       dataIndex: PropTypes.number,
       seriesId: PropTypes.string.isRequired,
-      type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).isRequired
+      type: PropTypes.string.isRequired
     }).isRequired,
     label: PropTypes.string,
     markShape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']),

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -181,6 +181,10 @@ function ChartsTooltipContainer(inProps) {
       toJSON: () => ''
     })
   }), [positionRef]);
+
+  // `anchorEl` is only set once the portal below is mounted. Rendering the popper
+  // without an anchor makes Popper warn about an invalid `anchorEl`.
+  const tooltipAnchorEl = itemPosition ? anchorEl : pointerAnchorEl;
   const isMouse = pointerType === 'mouse' || isFineMainPointer;
   const isTouch = pointerType === 'touch' || !isFineMainPointer;
   const modifiers = React.useMemo(() => [{
@@ -226,14 +230,14 @@ function ChartsTooltipContainer(inProps) {
         height: 1
       }
     }), chartsLayerContainerRef.current), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-      children: isOpen && /*#__PURE__*/(0, _react.createElement)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
+      children: isOpen && tooltipAnchorEl && /*#__PURE__*/(0, _react.createElement)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
         // The key is here to make sure the tooltip uses the new anchor immediately.
         key: itemPosition ? 'charts-anchored' : 'charts-pointer',
         className: classes?.root,
         open: isOpen,
         placement: other.placement ?? position ?? (!isTooltipNodeAnchored && isMouse ? 'right-start' : 'top'),
         popperRef: popperRef,
-        anchorEl: itemPosition ? anchorEl : pointerAnchorEl,
+        anchorEl: tooltipAnchorEl,
         modifiers: modifiers,
         container: other.container ?? chartsLayerContainerRef.current,
         popperOptions: (0, _extends2.default)({}, other.popperOptions, {

package/ChartsTooltip/ChartsTooltipContainer.mjs

@@ -174,6 +174,10 @@ function ChartsTooltipContainer(inProps) {
       toJSON: () => ''
     })
   }), [positionRef]);
+
+  // `anchorEl` is only set once the portal below is mounted. Rendering the popper
+  // without an anchor makes Popper warn about an invalid `anchorEl`.
+  const tooltipAnchorEl = itemPosition ? anchorEl : pointerAnchorEl;
   const isMouse = pointerType === 'mouse' || isFineMainPointer;
   const isTouch = pointerType === 'touch' || !isFineMainPointer;
   const modifiers = React.useMemo(() => [{
@@ -219,14 +223,14 @@ function ChartsTooltipContainer(inProps) {
         height: 1
       }
     }), chartsLayerContainerRef.current), /*#__PURE__*/_jsx(NoSsr, {
-      children: isOpen && /*#__PURE__*/_createElement(ChartsTooltipRoot, _extends({}, other, {
+      children: isOpen && tooltipAnchorEl && /*#__PURE__*/_createElement(ChartsTooltipRoot, _extends({}, other, {
         // The key is here to make sure the tooltip uses the new anchor immediately.
         key: itemPosition ? 'charts-anchored' : 'charts-pointer',
         className: classes?.root,
         open: isOpen,
         placement: other.placement ?? position ?? (!isTooltipNodeAnchored && isMouse ? 'right-start' : 'top'),
         popperRef: popperRef,
-        anchorEl: itemPosition ? anchorEl : pointerAnchorEl,
+        anchorEl: tooltipAnchorEl,
         modifiers: modifiers,
         container: other.container ?? chartsLayerContainerRef.current,
         popperOptions: _extends({}, other.popperOptions, {

package/LineChart/CircleMarkElement.js

@@ -102,10 +102,6 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
    */
   dataIndex: _propTypes.default.number.isRequired,
   seriesId: _propTypes.default.string.isRequired,
-  /**
-   * The shape of the marker.
-   */
-  shape: _propTypes.default.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/LineChart/CircleMarkElement.mjs

@@ -95,10 +95,6 @@ process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
    */
   dataIndex: PropTypes.number.isRequired,
   seriesId: PropTypes.string.isRequired,
-  /**
-   * The shape of the marker.
-   */
-  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
   /**
    * If `true`, animations are skipped.
    * @default false

package/LineChart/LineChart.js

@@ -148,6 +148,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
     enablePositionBasedPointerInteraction: _propTypes.default.bool,
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/LineChart/LineChart.mjs

@@ -141,6 +141,13 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes /* remove-proptypes
     enablePositionBasedPointerInteraction: PropTypes.bool,
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/PieChart/PieChart.js

@@ -143,6 +143,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
   experimentalFeatures: _propTypes.default.shape({
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/PieChart/PieChart.mjs

@@ -136,6 +136,13 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes /* remove-proptypes *
   experimentalFeatures: PropTypes.shape({
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/RadarChart/RadarAxis/RadarAxis.utils.d.mts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
-  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
+  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarAxis/RadarAxis.utils.d.ts

@@ -5,11 +5,11 @@ interface GetLabelAttributesParams extends Required<Pick<RadarAxisProps, 'labelO
   angle: number;
 }
 export declare function getLabelAttributes(params: GetLabelAttributesParams): {
-  transform?: undefined;
   x: number;
   y: number;
   textAnchor: "end" | "inherit" | "middle" | "start" | undefined;
   dominantBaseline: "alphabetic" | "auto" | "central" | "hanging" | "ideographic" | "inherit" | "mathematical" | "middle" | "no-change" | "reset-size" | "text-after-edge" | "text-before-edge" | "use-script" | undefined;
+  transform?: undefined;
 } | {
   x: number;
   y: number;

package/RadarChart/RadarChart.js

@@ -105,6 +105,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   experimentalFeatures: _propTypes.default.shape({
     keyboardActivation: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/RadarChart/RadarChart.mjs

@@ -98,6 +98,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes /* remove-proptypes
   experimentalFeatures: PropTypes.shape({
     keyboardActivation: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/RadarChart/useRadarChartProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _RadarChart = require("./RadarChart.plugins");
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "focusItemOnClick", "experimentalFeatures", "className"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -41,6 +41,7 @@ const useRadarChartProps = props => {
       onAreaClick,
       onMarkClick,
       disableKeyboardNavigation,
+      focusItemOnClick,
       experimentalFeatures,
       className
     } = props,
@@ -59,6 +60,7 @@ const useRadarChartProps = props => {
     skipAnimation,
     onAxisClick,
     disableKeyboardNavigation,
+    focusItemOnClick,
     experimentalFeatures,
     plugins: _RadarChart.RADAR_PLUGINS
   };

package/RadarChart/useRadarChartProps.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "experimentalFeatures", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "focusItemOnClick", "experimentalFeatures", "className"];
 import { RADAR_PLUGINS } from "./RadarChart.plugins.mjs";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -35,6 +35,7 @@ export const useRadarChartProps = props => {
       onAreaClick,
       onMarkClick,
       disableKeyboardNavigation,
+      focusItemOnClick,
       experimentalFeatures,
       className
     } = props,
@@ -53,6 +54,7 @@ export const useRadarChartProps = props => {
     skipAnimation,
     onAxisClick,
     disableKeyboardNavigation,
+    focusItemOnClick,
     experimentalFeatures,
     plugins: RADAR_PLUGINS
   };

package/ScatterChart/ScatterChart.js

@@ -152,6 +152,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
     keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/ScatterChart/ScatterChart.mjs

@@ -145,6 +145,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
     keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/SparkLineChart/SparkLineChart.js

@@ -259,6 +259,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
     keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/SparkLineChart/SparkLineChart.mjs

@@ -252,6 +252,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
     keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */