@mui/x-charts 7.3.2 → 7.5.0

package/CHANGELOG.md

@@ -3,6 +3,144 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v7.5.0
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add support for checkbox selection on the Tree View components
+- 🌍 Improve Norwegian (nb-NO) and Spanish (es-ES) locales on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.5.0`
+
+- [DataGrid] Fix `rowModesModel` controlled prop (#13056) @Janpot
+- [DataGrid] Reduce bundle size with error messages (#12992) @oliviertassinari
+- [l10n] Improve Norwegian (nb-NO) locale (#13106) @oliverlaidma
+- [l10n] Improve Spanish (es-ES) locale (#13133) @Jucabel
+
+#### `@mui/x-data-grid-pro@7.5.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@7.5.0`.
+
+#### `@mui/x-data-grid-premium@7.5.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@7.5.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.5.0`
+
+- [fields] Allow empty `textField` slot placeholder value (#13148) @arthurbalduini
+- [pickers] Fix `AdapterMomentJalaali` regression (#13144) @LukasTy
+- [pickers] Fix field focusing when switching to view without a renderer (#13112) @LukasTy
+- [pickers] Reuse `AdapterDateFnsBase` in Jalali adapters (#13075) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.5.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@7.5.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.5.0`
+
+- [charts] Tooltip with `trigger=axis` now follow touch on mobile (#13043) @wzdorowa
+- [charts] Allow `series.label` property to receive a function with the "location" it is going to be displayed on (#12830) @JCQuintas
+- [charts] Improve TypeScript performance (#13137) @alexfauquette
+- [charts] Fix area order when overlapping (#13121) @alexfauquette
+- [charts] Improve `useSlotProps` types (#13141) @alexfauquette
+- [charts] Fix using the theme's font in the Overlay (#13107) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.5.0`
+
+- [TreeView] Add support for checkbox selection (#11452) @flaviendelangle
+- [TreeView] Remove unused code (#12917) @flaviendelangle
+
+### Docs
+
+- [docs] Document missing Charts API's (#12875) @alexfauquette
+
+### Core
+
+- [core] Avoid root level `@mui/x-date-pickers` imports (#13120) @LukasTy
+- [core] Refactor ESLint config to disallow root level imports (#13130) @LukasTy
+- [core] Simplify Danger's config (#13062) @oliviertassinari
+- [core] Shift aliasing from babel to webpack (#13051) @Janpot
+- [core] Reuse the `SectionTitle` component in the doc (#13139) @alexfauquette
+
+## 7.4.0
+
+_May 10, 2024_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add optional `id` attribute on shortcut items of the Date and Time Pickers
+- 🎁 Add support for `date-fns-jalali` v3 in the Date and Time Pickers
+- 🚀 Support rounded corners on `BarChart`
+- 🌍 Add accessibility page to TreeView docs
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.4.0`
+
+- [DataGrid] Fix error when focus moves from column header to `svg` element (#13028) @oukunan
+- [DataGrid] Fix error on column groups change (#12965) @romgrk
+
+#### `@mui/x-data-grid-pro@7.4.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@7.4.0`.
+
+#### `@mui/x-data-grid-premium@7.4.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@7.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.4.0`
+
+- [fields] Fix regression preventing form submit on "Enter" click (#13065) @LukasTy
+- [pickers] Add `AdapterDateFnsJalaliV3` adapter (#12891) @smmoosavi
+- [pickers] Add optional `id` attribute on shortcut items (#12976) @noraleonte
+
+#### `@mui/x-date-pickers-pro@7.4.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@7.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.4.0`
+
+- [charts] Add `ChartsGrid` to `themeAugmentation` (#13026) @noraleonte
+- [charts] Support rounded corners on `BarChart` (#12834) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.4.0`
+
+- [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle
+
+### Docs
+
+- [docs] Add accessibility page to TreeView docs (#12845) @noraleonte
+- [docs] Fix Charts styling typos (#13061) @oliviertassinari
+- [docs] Fix legal link to EULA free trial (#13013) @oliviertassinari
+- [docs] Update interface name in pinned columns docs (#13070) @cherniavskii
+
+### Core
+
+- [core] Improve release process docs (#12977) @JCQuintas
+- [core] Prepare React 19 (#12991) @oliviertassinari
+- [docs-infra] Fix Netlify PR preview path (#12993) @oliviertassinari
+- [infra] Automation: Add release PR reviewers (#12982) @michelengelen
+
 ## 7.3.2
 
 _May 2, 2024_
@@ -17,8 +155,6 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
 - 🐞 Bugfixes
 - 📚 Documentation improvements
 
-<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
-
 ### Data Grid
 
 #### `@mui/x-data-grid@7.3.2`
@@ -3281,6 +3417,28 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.12
+
+_May 17, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.19.12`
+
+- [pickers] Fix `AdapterMomentJalaali` regression (#13150) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.19.12` [![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@6.19.12`.
+
+### Docs
+
+- [docs] Use MUI X v6 in Codesandbox and Stackblitz demos (#12838) @cherniavskii
+
 ## 6.19.11
 
 _Apr 18, 2024_

package/ChartContainer/ChartContainer.js

@@ -136,6 +136,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -144,11 +149,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -189,6 +189,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -197,11 +202,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,

package/ChartsGrid/ChartsGrid.js

@@ -21,15 +21,22 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const GridRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsGrid',
   slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  overridesResolver: (props, styles) => [{
+    [`&.${_chartsGridClasses.chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${_chartsGridClasses.chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+const GridLine = (0, _styles.styled)('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
 })(({
   theme
 }) => ({
-  [`& .${_chartsGridClasses.chartsGridClasses.line}`]: {
-    stroke: (theme.vars || theme).palette.divider,
-    shapeRendering: 'crispEdges',
-    strokeWidth: 1
-  }
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
 }));
 const useUtilityClasses = ({
   classes
@@ -51,18 +58,22 @@ const useUtilityClasses = ({
  * - [ChartsGrid API](https://mui.com/x/api/charts/charts-axis/)
  */
 function ChartsGrid(props) {
+  const themeProps = (0, _styles.useThemeProps)({
+    props,
+    name: 'MuiChartsGrid'
+  });
   const {
       vertical,
       horizontal
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    } = themeProps,
+    other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
   const {
     xAxis,
     xAxisIds,
     yAxis,
     yAxisIds
   } = React.useContext(_CartesianContextProvider.CartesianContext);
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(themeProps);
   const horizontalAxisId = yAxisIds[0];
   const verticalAxisId = xAxisIds[0];
   const {
@@ -90,7 +101,7 @@ function ChartsGrid(props) {
     children: [vertical && xTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLine, {
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       x1: offset,
@@ -99,7 +110,7 @@ function ChartsGrid(props) {
     }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
       formattedValue,
       offset
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("line", {
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridLine, {
       y1: offset,
       y2: offset,
       x1: xScale.range()[0],

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsLoadingOverlay = ChartsLoadingOverlay;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledText = (0, _styles.styled)('text')(({
   theme
-}) => ({
+}) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',
   fill: theme.palette.text.primary,
   shapeRendering: 'crispEdges',
@@ -38,6 +38,6 @@ function ChartsLoadingOverlay(props) {
     x: left + width / 2,
     y: top + height / 2
   }, other, {
-    children: message ?? 'Loading data ...'
+    children: message ?? 'Loading data…'
   }));
 }

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsNoDataOverlay = ChartsNoDataOverlay;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledText = (0, _styles.styled)('text')(({
   theme
-}) => ({
+}) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',
   fill: theme.palette.text.primary,
   shapeRendering: 'crispEdges',

package/ChartsOverlay/ChartsOverlay.d.ts

@@ -27,9 +27,18 @@ export interface ChartsOverlaySlotProps {
 export interface ChartsOverlayProps {
     /**
      * If `true`, a loading overlay is displayed.
+     * @default false
      */
     loading?: boolean;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
     slots?: ChartsOverlaySlots;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
     slotProps?: ChartsOverlaySlotProps;
 }
 export declare function ChartsOverlay(props: ChartsOverlayProps): React.JSX.Element | null;

package/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -11,6 +11,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _utils = require("./utils");
+var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -59,6 +60,7 @@ function DefaultChartsAxisTooltipContent(props) {
           if (formattedValue == null) {
             return null;
           }
+          const formattedLabel = (0, _getLabel.getLabel)(label, 'tooltip');
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
             className: classes.row,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
@@ -69,8 +71,8 @@ function DefaultChartsAxisTooltipContent(props) {
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
               className: (0, _clsx.default)(classes.labelCell, classes.cell),
-              children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                children: label
+              children: formattedLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: formattedLabel
               }) : null
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
               className: (0, _clsx.default)(classes.valueCell, classes.cell),

package/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultChartsItemTooltipContent = DefaultChartsItemTooltipContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
+var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -28,12 +30,14 @@ function DefaultChartsItemTooltipContent(props) {
     color
   } = series.type === 'pie' ? {
     color: getColor(itemData.dataIndex),
-    displayedLabel: series.data[itemData.dataIndex].label
+    displayedLabel: (0, _getLabel.getLabel)(series.data[itemData.dataIndex].label, 'tooltip')
   } : {
     color: getColor(itemData.dataIndex) ?? series.color,
-    displayedLabel: series.label
+    displayedLabel: (0, _getLabel.getLabel)(series.label, 'tooltip')
   };
-  const value = series.data[itemData.dataIndex];
+  const value = series.type === 'pie' ? (0, _extends2.default)({}, series.data[itemData.dataIndex], {
+    label: (0, _getLabel.getLabel)(series.data[itemData.dataIndex].label, 'tooltip')
+  }) : series.data[itemData.dataIndex];
   const formattedValue = series.valueFormatter?.(value, {
     dataIndex: itemData.dataIndex
   });

package/ChartsTooltip/utils.js

@@ -66,20 +66,25 @@ function useMouseTracker() {
     if (element === null) {
       return () => {};
     }
-    const handleMouseOut = () => {
+    const handleOut = () => {
       setMousePosition(null);
     };
-    const handleMouseMove = event => {
+    const handleMove = event => {
+      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
       setMousePosition({
-        x: event.clientX,
-        y: event.clientY
+        x: target.clientX,
+        y: target.clientY
       });
     };
-    element.addEventListener('mouseout', handleMouseOut);
-    element.addEventListener('mousemove', handleMouseMove);
+    element.addEventListener('mouseout', handleOut);
+    element.addEventListener('mousemove', handleMove);
+    element.addEventListener('touchend', handleOut);
+    element.addEventListener('touchmove', handleMove);
     return () => {
-      element.removeEventListener('mouseout', handleMouseOut);
-      element.removeEventListener('mousemove', handleMouseMove);
+      element.removeEventListener('mouseout', handleOut);
+      element.removeEventListener('mousemove', handleMove);
+      element.addEventListener('touchend', handleOut);
+      element.addEventListener('touchmove', handleMove);
     };
   }, [svgRef]);
   return mousePosition;

package/ChartsXAxis/ChartsXAxis.js

@@ -176,8 +176,7 @@ function ChartsXAxis(inProps) {
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
         fontSize: tickFontSize ?? 12
-      }, tickLabelStyle),
-      className: classes.tickLabel
+      }, tickLabelStyle)
     },
     className: classes.tickLabel,
     ownerState: {}

package/ChartsYAxis/ChartsYAxis.js

@@ -129,9 +129,9 @@ function ChartsYAxis(inProps) {
         fontSize: tickFontSize,
         textAnchor: position === 'right' ? 'start' : 'end',
         dominantBaseline: 'central'
-      }, tickLabelStyle),
-      className: classes.tickLabel
+      }, tickLabelStyle)
     },
+    className: classes.tickLabel,
     ownerState: {}
   });
   const axisLabelProps = (0, _utils.useSlotProps)({

package/LineChart/AreaElement.d.ts

@@ -31,7 +31,7 @@ export interface AreaElementSlots {
 export interface AreaElementSlotProps {
     area?: AnimatedAreaProps;
 }
-export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.ComponentPropsWithoutRef<'path'>, 'color' | 'id'> {
+export interface AreaElementProps extends Omit<AreaElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedAreaProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;
     highlightScope?: Partial<HighlightScope>;
     /**

package/LineChart/AreaElement.js

@@ -85,17 +85,17 @@ function AreaElement(props) {
   const areaProps = (0, _utils.useSlotProps)({
     elementType: Area,
     externalSlotProps: slotProps?.area,
-    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+    additionalProps: (0, _extends2.default)({}, getInteractionItemProps({
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, areaProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, other, areaProps));
 }
 process.env.NODE_ENV !== "production" ? AreaElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/AreaPlot.js

@@ -42,7 +42,8 @@ const useAggregatedData = () => {
   return stackingGroups.flatMap(({
     ids: groupIds
   }) => {
-    return groupIds.flatMap(seriesId => {
+    return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
+    .map(seriesId => {
       const {
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
@@ -101,7 +102,7 @@ function AreaPlot(props) {
   const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: completedData.reverse().map(({
+    children: completedData.map(({
       d,
       seriesId,
       color,

package/LineChart/LineChart.js

@@ -214,6 +214,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: _propTypes.default.bool,
   /**
@@ -313,6 +314,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -321,11 +327,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,
@@ -366,6 +367,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     classes: _propTypes.default.object,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
       min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -374,11 +380,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
       type: _propTypes.default.oneOf(['piecewise']).isRequired
-    }), _propTypes.default.shape({
-      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-      type: _propTypes.default.oneOf(['ordinal']).isRequired,
-      unknownColor: _propTypes.default.string,
-      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
     })]),
     data: _propTypes.default.array,
     dataKey: _propTypes.default.string,

package/LineChart/LineElement.d.ts

@@ -31,7 +31,7 @@ export interface LineElementSlots {
 export interface LineElementSlotProps {
     line?: AnimatedLineProps;
 }
-export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.ComponentPropsWithoutRef<'path'>, 'color' | 'id'> {
+export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
     d: string;
     highlightScope?: Partial<HighlightScope>;
     /**

package/LineChart/LineElement.js

@@ -85,17 +85,17 @@ function LineElement(props) {
   const lineProps = (0, _utils.useSlotProps)({
     elementType: Line,
     externalSlotProps: slotProps?.line,
-    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+    additionalProps: (0, _extends2.default)({}, getInteractionItemProps({
       type: 'line',
       seriesId: id
     }), {
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, lineProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, other, lineProps));
 }
 process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   // ----------------------------- Warning --------------------------------

package/LineChart/LineHighlightElement.d.ts

@@ -14,7 +14,7 @@ interface LineHighlightElementOwnerState {
 }
 export declare function getHighlightElementUtilityClass(slot: string): string;
 export declare const lineHighlightElementClasses: LineHighlightElementClasses;
-export type LineHighlightElementProps = LineHighlightElementOwnerState & Omit<React.ComponentPropsWithoutRef<'circle'>, 'id'> & {};
+export type LineHighlightElementProps = LineHighlightElementOwnerState & Omit<React.SVGProps<SVGCircleElement>, 'ref' | 'id'>;
 /**
  * Demos:
  *

package/LineChart/MarkElement.d.ts

@@ -19,7 +19,7 @@ interface MarkElementOwnerState {
 }
 export declare function getMarkElementUtilityClass(slot: string): string;
 export declare const markElementClasses: MarkElementClasses;
-export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & {
+export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
     /**
      * If `true`, animations are skipped.
      * @default false