@mui/x-charts 8.11.1 → 8.11.2

package/CHANGELOG.md

@@ -5,6 +5,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.2
+
+_Sep 10, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ludvigeriksson, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @brijeshb42, @flaviendelangle, @Janpot, @LukasTy, @MBilalShafi, @noraleonte, @rita-codes, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.2`
+
+- [DataGrid] Allow opting out of the exclude row selection model (#19423) @MBilalShafi
+- [DataGrid] Fix column dropdown menu text alignment for the "Unpin" menu item (#19462) @MBilalShafi
+- [DataGrid] Fix indeterminate state for "Select all" checkbox with exclude model (#19466) @MBilalShafi
+- [DataGrid] Fix styled API arguments error (#19460) @MBilalShafi
+- [DataGrid] Fix `stringify()` for theme objects (#19427) @romgrk
+
+#### `@mui/x-data-grid-pro@8.11.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-data-grid@8.11.2`.
+
+#### `@mui/x-data-grid-premium@8.11.2` [![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@8.11.2`, plus:
+
+- [DataGridPremium] Fallback to the regular reorder method for plain data (#19467) @MBilalShafi
+- [DataGridPremium] Fix showing `0` as total aggregation value when aggregation position is set to `null` for row groups (#19515) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.2`
+
+- [pickers] Gracefully handle `textField.slotProps` (#18980) @LukasTy
+- [pickers] Improve hour and minute placement in Date Time Picker (#19227) @MBilalShafi
+- [pickers] Use `calendarState.currentMonth` in Month Calendar when available (#19073) @LukasTy
+- [pickers] Improve invalid value pasting into a section (#19357) @sai6855
+- [fields] Remove redundant `id` and `aria-labelledby` attributes from spinbuttons (#19523) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.11.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-date-pickers@8.11.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.2`
+
+- [charts] Fix highlight regression (#19486) @alexfauquette
+- [charts] Improve code reuse in `ChartsXAxis` and `ChartsYAxis` (#19198) @bernardobelchior
+- [charts] Simplify params in `getRange` and `createDateFormatter` (#19517) @bernardobelchior
+- [charts] Handle domain edge cases with `filterMode: 'discard'` (#19199) @bernardobelchior
+- [l10n] Add Swedish (sv-SE) locale (#19489) @ludvigeriksson
+
+#### `@mui/x-charts-pro@8.11.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-charts@8.11.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.2`
+
+- [TreeView] Do not mutate `props.items` in the `getItemTree()` method (#19483) @flaviendelangle
+- [TreeView] Expose a new hook to apply selection propagation on the selected items (#19402) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.11.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@8.11.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add recipe for save and manage filters from the panel (#19361) @siriwatknp
+
+### Core
+
+- [code-infra] Remove log when restarting dev server (#19490) @bernardobelchior
+- [code-infra] Store test results in CI (#19507) @Janpot
+
+### Miscellaneous
+
+- [infra] Set nodejs versions of various CIs to 22.18 (#19503) @brijeshb42
+- [test] Split infinitive @romgrk
+
 ## 8.11.1
 
 _Sep 4, 2025_

package/ChartsXAxis/ChartsGroupedXAxisTicks.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartsXAxisProps } from "../models/axis.js";
+interface ChartsGroupedXAxisProps extends ChartsXAxisProps {}
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsGroupedXAxisTicks(inProps: ChartsGroupedXAxisProps): React.JSX.Element;
+export { ChartsGroupedXAxisTicks };

package/ChartsXAxis/{ChartsGroupedXAxis.js → ChartsGroupedXAxisTicks.js}

@@ -6,15 +6,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsGroupedXAxis = ChartsGroupedXAxis;
+exports.ChartsGroupedXAxisTicks = ChartsGroupedXAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useDrawingArea = require("../hooks/useDrawingArea");
 var _isBandScale = require("../internals/isBandScale");
 var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _utilities = require("./utilities");
 var _useTicksGrouped = require("../hooks/useTicksGrouped");
-var _useAxisProps = require("./useAxisProps");
+var _useAxisTicksProps = require("./useAxisTicksProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_GROUPING_CONFIG = {
   tickSize: 6
@@ -27,58 +26,36 @@ const getGroupingConfig = (groups, groupIndex, tickSize) => {
     tickSize: config.tickSize ?? calculatedTickSize
   });
 };
-
 /**
  * @ignore - internal component.
  */
-function ChartsGroupedXAxis(inProps) {
+function ChartsGroupedXAxisTicks(inProps) {
   const {
     xScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
-    axisTickLabelProps,
-    axisLabelProps
-  } = (0, _useAxisProps.useAxisProps)(inProps);
+    axisTickLabelProps
+  } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
   if (!(0, _isBandScale.isBandScale)(xScale)) {
     throw new Error('MUI X Charts: ChartsGroupedXAxis only supports the `band` and `point` scale types.');
   }
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize,
     valueFormatter,
     slotProps,
     tickInterval,
     tickPlacement,
-    tickLabelPlacement,
-    sx,
-    offset,
-    height: axisHeight
+    tickLabelPlacement
   } = defaultizedProps;
   const groups = defaultizedProps.groups;
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = (0, _useChartContext.useChartContext)();
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSign * axisHeight
-  };
   const xTicks = (0, _useTicksGrouped.useTicksGrouped)({
     scale: xScale,
     tickNumber,
@@ -89,23 +66,8 @@ function ChartsGroupedXAxis(inProps) {
     direction: 'x',
     groups
   });
-
-  // Skip axis rendering if no data is available
-  // - The domain is an empty array for band/point scales.
-  // - The domains contains Infinity for continuous scales.
-  // - The position is set to 'none'.
-  if (skipAxisRendering) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      x1: left,
-      x2: left + width,
-      className: classes.line
-    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: xTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -133,11 +95,6 @@ function ChartsGroupedXAxis(inProps) {
           text: tickLabel
         }))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      className: classes.label,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
+    })
   });
 }

package/ChartsXAxis/ChartsSingleXAxisTicks.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ChartsXAxisProps } from "../models/axis.js";
+interface ChartsSingleXAxisProps extends ChartsXAxisProps {
+  axisLabelHeight: number;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsSingleXAxisTicks(inProps: ChartsSingleXAxisProps): React.JSX.Element;
+export { ChartsSingleXAxisTicks };

package/ChartsXAxis/{ChartsSingleXAxis.js → ChartsSingleXAxisTicks.js}

@@ -6,11 +6,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsSingleXAxis = ChartsSingleXAxis;
+exports.ChartsSingleXAxisTicks = ChartsSingleXAxisTicks;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useIsHydrated = require("../hooks/useIsHydrated");
-var _domUtils = require("../internals/domUtils");
 var _useTicks = require("../hooks/useTicks");
 var _useMounted = require("../hooks/useMounted");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -18,33 +18,30 @@ var _useChartContext = require("../context/ChartProvider/useChartContext");
 var _shortenLabels = require("./shortenLabels");
 var _getVisibleLabels = require("./getVisibleLabels");
 var _utilities = require("./utilities");
-var _useAxisProps = require("./useAxisProps");
+var _useAxisTicksProps = require("./useAxisTicksProps");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
- */function ChartsSingleXAxis(inProps) {
+ */
+function ChartsSingleXAxisTicks(inProps) {
+  const {
+    axisLabelHeight
+  } = inProps;
   const {
     xScale,
     defaultizedProps,
     tickNumber,
     positionSign,
-    skipAxisRendering,
     classes,
-    Line,
     Tick,
     TickLabel,
-    Label,
     axisTickLabelProps,
-    axisLabelProps,
-    reverse,
-    isRtl
-  } = (0, _useAxisProps.useAxisProps)(inProps);
+    reverse
+  } = (0, _useAxisTicksProps.useAxisTicksProps)(inProps);
+  const isRtl = (0, _RtlProvider.useRtl)();
   const isMounted = (0, _useMounted.useMounted)();
   const {
-    position,
-    disableLine,
     disableTicks,
-    label,
     tickSize: tickSizeProp,
     valueFormatter,
     slotProps,
@@ -53,17 +50,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     tickPlacement,
     tickLabelPlacement,
     tickLabelMinGap,
-    sx,
-    offset,
     height: axisHeight
   } = defaultizedProps;
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const {
-    left,
-    top,
-    width,
-    height
-  } = drawingArea;
   const {
     instance
   } = (0, _useChartContext.useChartContext)();
@@ -87,31 +76,11 @@ var _jsxRuntime = require("react/jsx-runtime");
     isXInside: instance.isXInside
   });
 
-  // Skip axis rendering if no data is available
-  // - The domain is an empty array for band/point scales.
-  // - The domains contains Infinity for continuous scales.
-  // - The position is set to 'none'.
-  if (skipAxisRendering) {
-    return null;
-  }
-  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
-  const labelRefPoint = {
-    x: left + width / 2,
-    y: positionSign * axisHeight
-  };
-
   /* If there's an axis title, the tick labels have less space to render  */
-  const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
+  const tickLabelsMaxHeight = Math.max(0, axisHeight - (axisLabelHeight > 0 ? axisLabelHeight + _utilities.AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - _utilities.TICK_LABEL_GAP);
   const tickLabels = isHydrated ? (0, _shortenLabels.shortenLabels)(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_utilities.XAxisRoot, {
-    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
-    className: classes.root,
-    sx: sx,
-    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
-      x1: left,
-      x2: left + width,
-      className: classes.line
-    }, slotProps?.axisLine)), xTicks.map((item, index) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: xTicks.map((item, index) => {
       const {
         offset: tickOffset,
         labelOffset
@@ -134,11 +103,6 @@ var _jsxRuntime = require("react/jsx-runtime");
           text: tickLabel
         }))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-      className: classes.label,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
-        text: label
-      }))
-    })]
+    })
   });
 }

package/ChartsXAxis/ChartsXAxis.js

@@ -12,8 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _warning = require("@mui/x-internals/warning");
 var _useAxis = require("../hooks/useAxis");
-var _ChartsSingleXAxis = require("./ChartsSingleXAxis");
-var _ChartsGroupedXAxis = require("./ChartsGroupedXAxis");
+var _ChartsXAxisImpl = require("./ChartsXAxisImpl");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -33,10 +32,9 @@ var _jsxRuntime = require("react/jsx-runtime");
     (0, _warning.warnOnce)(`MUI X Charts: No axis found. The axisId "${inProps.axisId}" is probably invalid.`);
     return null;
   }
-  if ('groups' in axis && Array.isArray(axis.groups)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxis.ChartsGroupedXAxis, (0, _extends2.default)({}, inProps));
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxis.ChartsSingleXAxis, (0, _extends2.default)({}, inProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxisImpl.ChartsXAxisImpl, (0, _extends2.default)({}, inProps, {
+    axis: axis
+  }));
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ChartsXAxis/ChartsXAxisImpl.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { AxisScaleConfig, ChartsXAxisProps, ComputedAxis } from "../models/axis.js";
+interface ChartsXAxisImplProps extends Omit<ChartsXAxisProps, 'axis'> {
+  axis: ComputedAxis<keyof AxisScaleConfig, any, ChartsXAxisProps>;
+}
+/**
+ * @ignore - internal component. Use `ChartsXAxis` instead.
+ */
+export declare function ChartsXAxisImpl({
+  axis,
+  ...inProps
+}: ChartsXAxisImplProps): React.JSX.Element | null;
+export {};

package/ChartsXAxis/ChartsXAxisImpl.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsXAxisImpl = ChartsXAxisImpl;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _styles = require("@mui/material/styles");
+var _ChartsSingleXAxisTicks = require("./ChartsSingleXAxisTicks");
+var _ChartsGroupedXAxisTicks = require("./ChartsGroupedXAxisTicks");
+var _ChartsText = require("../ChartsText");
+var _isBandScale = require("../internals/isBandScale");
+var _isInfinity = require("../internals/isInfinity");
+var _utilities = require("./utilities");
+var _hooks = require("../hooks");
+var _domUtils = require("../internals/domUtils");
+var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axis"],
+  _excluded2 = ["scale", "tickNumber", "reverse"];
+const XAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
+  name: 'MuiChartsXAxis',
+  slot: 'Root'
+})({});
+/**
+ * @ignore - internal component. Use `ChartsXAxis` instead.
+ */
+function ChartsXAxisImpl(_ref) {
+  let {
+      axis
+    } = _ref,
+    inProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const {
+      scale: xScale
+    } = axis,
+    settings = (0, _objectWithoutPropertiesLoose2.default)(axis, _excluded2);
+
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, settings, inProps),
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  const {
+    position,
+    labelStyle,
+    offset,
+    slots,
+    slotProps,
+    sx,
+    disableLine,
+    label,
+    height: axisHeight
+  } = defaultizedProps;
+  const theme = (0, _styles.useTheme)();
+  const classes = (0, _utilities.useUtilityClasses)(defaultizedProps);
+  const {
+    left,
+    top,
+    width,
+    height
+  } = (0, _hooks.useDrawingArea)();
+  const positionSign = position === 'bottom' ? 1 : -1;
+  const Line = slots?.axisLine ?? 'line';
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisLabelProps = (0, _useSlotProps.default)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      style: (0, _extends2.default)({}, theme.typography.body1, {
+        lineHeight: 1,
+        fontSize: 14,
+        textAnchor: 'middle',
+        dominantBaseline: position === 'bottom' ? 'text-after-edge' : 'text-before-edge'
+      }, labelStyle)
+    },
+    ownerState: {}
+  });
+  if (position === 'none') {
+    return null;
+  }
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const domain = xScale.domain();
+  const isScaleBand = (0, _isBandScale.isBandScale)(xScale);
+  const skipTickRendering = isScaleBand && domain.length === 0 || !isScaleBand && domain.some(_isInfinity.isInfinity);
+  let children = null;
+  if (!skipTickRendering) {
+    children = 'groups' in axis && Array.isArray(axis.groups) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGroupedXAxisTicks.ChartsGroupedXAxisTicks, (0, _extends2.default)({}, inProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSingleXAxisTicks.ChartsSingleXAxisTicks, (0, _extends2.default)({}, inProps, {
+      axisLabelHeight: labelHeight
+    }));
+  }
+  const labelRefPoint = {
+    x: left + width / 2,
+    y: positionSign * axisHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(XAxisRoot, {
+    transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
+    className: classes.root,
+    sx: sx,
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
+      x1: left,
+      x2: left + width,
+      className: classes.line
+    }, slotProps?.axisLine)), children, label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
+  });
+}