@mui/x-charts 7.4.0 → 7.5.0

package/BarChart/BarChart.js

@@ -214,6 +214,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   }),
   /**
    * If `true`, a loading overlay is displayed.
+   * @default false
    */
   loading: _propTypes.default.bool,
   /**
@@ -306,6 +307,11 @@ process.env.NODE_ENV !== "production" ? BarChart.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]),
@@ -314,11 +320,6 @@ process.env.NODE_ENV !== "production" ? BarChart.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,
@@ -359,6 +360,11 @@ process.env.NODE_ENV !== "production" ? BarChart.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]),
@@ -367,11 +373,6 @@ process.env.NODE_ENV !== "production" ? BarChart.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/BarChart/BarElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="@react-spring/shared" />
 import * as React from 'react';
+import { AnimatedProps } from '@react-spring/web';
 import { HighlightScope } from '../context/HighlightProvider';
 import { SeriesId } from '../models/seriesType/common';
 export interface BarElementClasses {
@@ -17,7 +18,7 @@ export interface BarElementOwnerState {
 }
 export declare function getBarElementUtilityClass(slot: string): string;
 export declare const barElementClasses: BarElementClasses;
-export declare const BarElementPath: import("@emotion/styled").StyledComponent<Pick<import("@react-spring/web").AnimatedProps<{
+export declare const BarElementPath: import("@emotion/styled").StyledComponent<Pick<AnimatedProps<{
     string?: string | number | undefined;
     end?: string | number | undefined;
     accumulate?: "none" | "sum" | undefined;
@@ -1352,9 +1353,13 @@ export declare const BarElementPath: import("@emotion/styled").StyledComponent<P
 }, "string" | "end" | "accumulate" | "local" | "color" | "clip" | "style" | "unicode" | "fill" | "stroke" | "x" | "y" | "clipPath" | "cursor" | "direction" | "display" | "filter" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "alphabetic" | "hanging" | "ideographic" | "mathematical" | "mask" | "offset" | "overflow" | "textDecoration" | "azimuth" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "additive" | "path" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "max" | "media" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "accentHeight" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "origin" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "yChannelSelector" | "z" | "zoomAndPan" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "scrollTop" | "scrollLeft"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: BarElementOwnerState;
 }, {}, {}>;
-interface BarProps extends Omit<React.ComponentPropsWithoutRef<'path'>, 'id' | 'color'> {
+interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'>, AnimatedProps<{
+    x?: string | number | undefined;
+    y?: string | number | undefined;
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+}> {
     highlightScope?: Partial<HighlightScope>;
-    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
     ownerState: BarElementOwnerState;
 }
 export interface BarElementSlots {
@@ -1362,12 +1367,12 @@ export interface BarElementSlots {
      * The component that renders the bar.
      * @default BarElementPath
      */
-    bar?: React.JSXElementConstructor<BarProps>;
+    bar?: React.ElementType<BarProps>;
 }
 export interface BarElementSlotProps {
     bar?: Partial<BarProps>;
 }
-export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.ComponentPropsWithoutRef<'path'>, 'id'> & {
+export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
     highlightScope?: Partial<HighlightScope>;
     /**
      * The props used for each component slot.

package/BarChart/BarElement.js

@@ -90,16 +90,17 @@ function BarElement(props) {
   const barProps = (0, _utils.useSlotProps)({
     elementType: Bar,
     externalSlotProps: slotProps?.bar,
-    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+    externalForwardedProps: other,
+    additionalProps: (0, _extends2.default)({}, getInteractionItemProps({
       type: 'bar',
       seriesId: id,
       dataIndex
     }), {
       style,
-      className: classes.root,
       onClick,
       cursor: onClick ? 'pointer' : 'unset'
     }),
+    className: classes.root,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, (0, _extends2.default)({}, barProps));

package/BarChart/legend.js

@@ -4,16 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _getLabel = require("../internals/getLabel");
 const legendGetter = params => {
   const {
     seriesOrder,
     series
   } = params;
-  const data = seriesOrder.map(seriesId => ({
-    color: series[seriesId].color,
-    label: series[seriesId].label,
-    id: seriesId
-  }));
-  return data.filter(item => item.label !== undefined);
+  return seriesOrder.reduce((acc, seriesId) => {
+    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
+    if (formattedLabel === undefined) {
+      return acc;
+    }
+    acc.push({
+      color: series[seriesId].color,
+      label: formattedLabel,
+      id: seriesId
+    });
+    return acc;
+  }, []);
 };
 var _default = exports.default = legendGetter;

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 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_
@@ -3346,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/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>;
     /**