@mui/x-charts 7.0.0-beta.7 → 7.1.0

package/esm/PieChart/PieArcPlot.js

@@ -10,7 +10,6 @@ import { defaultTransitionConfig } from './dataTransform/transition';
 import { useTransformData } from './dataTransform/useTransformData';
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
-  var _slots$pieArc;
   const {
       slots,
       slotProps,
@@ -46,7 +45,7 @@ function PieArcPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const Arc = (_slots$pieArc = slots == null ? void 0 : slots.pieArc) != null ? _slots$pieArc : PieArc;
+  const Arc = slots?.pieArc ?? PieArc;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: transition((_ref, item, _, index) => {
       let {
@@ -79,7 +78,7 @@ function PieArcPlot(props) {
             dataIndex: index
           }, item);
         })
-      }, slotProps == null ? void 0 : slotProps.pieArc));
+      }, slotProps?.pieArc));
     })
   }));
 }

package/esm/PieChart/PieChart.js

@@ -78,7 +78,7 @@ function PieChart(props) {
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis != null ? xAxis : [{
+    xAxis: xAxis ?? [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'point',
       data: [...new Array(Math.max(...series.map(s => s.data.length)))].map((_, index) => index)
@@ -86,7 +86,7 @@ function PieChart(props) {
     yAxis: yAxis,
     colors: colors,
     sx: sx,
-    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [/*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,

package/esm/PieChart/PiePlot.js

@@ -53,10 +53,10 @@ function PiePlot(props) {
         faded,
         highlightScope
       } = series[seriesId];
-      const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
-      const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
-      const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
-      const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
+      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
+      const cx = getPercentageValue(cxParam ?? '50%', width);
+      const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcPlot, {
@@ -89,16 +89,16 @@ function PiePlot(props) {
         cy: cyParam,
         highlightScope
       } = series[seriesId];
-      const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : availableRadius, availableRadius);
-      const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : 0, availableRadius);
+      const outerRadius = getPercentageValue(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = getPercentageValue(innerRadiusParam ?? 0, availableRadius);
       const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : getPercentageValue(arcLabelRadiusParam, availableRadius);
-      const cx = getPercentageValue(cxParam != null ? cxParam : '50%', width);
-      const cy = getPercentageValue(cyParam != null ? cyParam : '50%', height);
+      const cx = getPercentageValue(cxParam ?? '50%', width);
+      const cy = getPercentageValue(cyParam ?? '50%', height);
       return /*#__PURE__*/_jsx("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/_jsx(PieArcLabelPlot, {
           innerRadius: innerRadius,
-          outerRadius: outerRadius != null ? outerRadius : availableRadius,
+          outerRadius: outerRadius ?? availableRadius,
           arcLabelRadius: arcLabelRadius,
           cornerRadius: cornerRadius,
           paddingAngle: paddingAngle,

package/esm/PieChart/dataTransform/useTransformData.js

@@ -35,7 +35,6 @@ export function useTransformData(series) {
     };
   }, [highlightScope, highlightedItem, seriesId]);
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
-    var _attributesOverride$p, _attributesOverride$i, _attributesOverride$o, _attributesOverride$c, _ref, _attributesOverride$a;
     const {
       isHighlighted,
       isFaded
@@ -43,11 +42,11 @@ export function useTransformData(series) {
     const attributesOverride = _extends({
       additionalRadius: 0
     }, isFaded && faded || isHighlighted && highlighted || {});
-    const paddingAngle = Math.max(0, Math.PI * ((_attributesOverride$p = attributesOverride.paddingAngle) != null ? _attributesOverride$p : basePaddingAngle) / 180);
-    const innerRadius = Math.max(0, (_attributesOverride$i = attributesOverride.innerRadius) != null ? _attributesOverride$i : baseInnerRadius);
-    const outerRadius = Math.max(0, (_attributesOverride$o = attributesOverride.outerRadius) != null ? _attributesOverride$o : baseOuterRadius + attributesOverride.additionalRadius);
-    const cornerRadius = (_attributesOverride$c = attributesOverride.cornerRadius) != null ? _attributesOverride$c : baseCornerRadius;
-    const arcLabelRadius = (_ref = (_attributesOverride$a = attributesOverride.arcLabelRadius) != null ? _attributesOverride$a : baseArcLabelRadius) != null ? _ref : (innerRadius + outerRadius) / 2;
+    const paddingAngle = Math.max(0, Math.PI * (attributesOverride.paddingAngle ?? basePaddingAngle) / 180);
+    const innerRadius = Math.max(0, attributesOverride.innerRadius ?? baseInnerRadius);
+    const outerRadius = Math.max(0, attributesOverride.outerRadius ?? baseOuterRadius + attributesOverride.additionalRadius);
+    const cornerRadius = attributesOverride.cornerRadius ?? baseCornerRadius;
+    const arcLabelRadius = attributesOverride.arcLabelRadius ?? baseArcLabelRadius ?? (innerRadius + outerRadius) / 2;
     return _extends({}, item, attributesOverride, {
       isFaded,
       isHighlighted,

package/esm/PieChart/formatter.js

@@ -22,22 +22,15 @@ const formatter = params => {
   } = params;
   const defaultizedSeries = {};
   seriesOrder.forEach(seriesId => {
-    var _series$seriesId$star, _series$seriesId$endA, _series$seriesId$padd, _series$seriesId$sort;
-    const arcs = d3Pie().startAngle(2 * Math.PI * ((_series$seriesId$star = series[seriesId].startAngle) != null ? _series$seriesId$star : 0) / 360).endAngle(2 * Math.PI * ((_series$seriesId$endA = series[seriesId].endAngle) != null ? _series$seriesId$endA : 360) / 360).padAngle(2 * Math.PI * ((_series$seriesId$padd = series[seriesId].paddingAngle) != null ? _series$seriesId$padd : 0) / 360).sortValues(getSortingComparator((_series$seriesId$sort = series[seriesId].sortingValues) != null ? _series$seriesId$sort : 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
+    const arcs = d3Pie().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
     defaultizedSeries[seriesId] = _extends({
       valueFormatter: item => item.value.toLocaleString()
     }, series[seriesId], {
-      data: series[seriesId].data.map((item, index) => {
-        var _item$id;
-        return _extends({}, item, {
-          id: (_item$id = item.id) != null ? _item$id : `auto-generated-pie-id-${seriesId}-${index}`
-        }, arcs[index]);
-      }).map(item => {
-        var _series$seriesId$valu, _series$seriesId$valu2, _series$seriesId;
-        return _extends({}, item, {
-          formattedValue: (_series$seriesId$valu = (_series$seriesId$valu2 = (_series$seriesId = series[seriesId]).valueFormatter) == null ? void 0 : _series$seriesId$valu2.call(_series$seriesId, item)) != null ? _series$seriesId$valu : item.value.toLocaleString()
-        });
-      })
+      data: series[seriesId].data.map((item, index) => _extends({}, item, {
+        id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
+      }, arcs[index])).map(item => _extends({}, item, {
+        formattedValue: series[seriesId].valueFormatter?.(item) ?? item.value.toLocaleString()
+      }))
     });
   });
   return {

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -12,24 +12,21 @@ const ResizableContainer = styled('div', {
   slot: 'Container'
 })(({
   ownerState
-}) => {
-  var _ownerState$width, _ownerState$height;
-  return {
-    width: (_ownerState$width = ownerState.width) != null ? _ownerState$width : '100%',
-    height: (_ownerState$height = ownerState.height) != null ? _ownerState$height : '100%',
-    display: 'flex',
-    position: 'relative',
-    flexGrow: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden',
-    '&>svg': {
-      width: '100%',
-      height: '100%'
-    }
-  };
-});
+}) => ({
+  width: ownerState.width ?? '100%',
+  height: ownerState.height ?? '100%',
+  display: 'flex',
+  position: 'relative',
+  flexGrow: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  '&>svg': {
+    width: '100%',
+    height: '100%'
+  }
+}));
 const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
       width: inWidth,

package/esm/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -9,7 +9,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
 
   // Adaptation of the `computeSizeAndPublishResizeEvent` from the grid.
   const computeSize = React.useCallback(() => {
-    const mainEl = rootRef == null ? void 0 : rootRef.current;
+    const mainEl = rootRef?.current;
     if (!mainEl) {
       return;
     }
@@ -62,5 +62,5 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
       displayError.current = false;
     }
   }
-  return [rootRef, inWidth != null ? inWidth : width, inHeight != null ? inHeight : height];
+  return [rootRef, inWidth ?? width, inHeight ?? height];
 };

package/esm/ScatterChart/ScatterPlot.js

@@ -16,7 +16,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [ScatterPlot API](https://mui.com/x/api/charts/scatter-plot/)
  */
 function ScatterPlot(props) {
-  var _slots$scatter;
   const {
     slots,
     slotProps,
@@ -39,7 +38,7 @@ function ScatterPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  const ScatterItems = (_slots$scatter = slots == null ? void 0 : slots.scatter) != null ? _slots$scatter : Scatter;
+  const ScatterItems = slots?.scatter ?? Scatter;
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesOrder.map(seriesId => {
       const {
@@ -49,16 +48,16 @@ function ScatterPlot(props) {
         markerSize,
         color
       } = series[seriesId];
-      const xScale = xAxis[xAxisKey != null ? xAxisKey : defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey != null ? yAxisKey : defaultYAxisId].scale;
+      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,
         color: color,
-        markerSize: markerSize != null ? markerSize : 4,
+        markerSize: markerSize ?? 4,
         series: series[seriesId],
         onItemClick: onItemClick
-      }, slotProps == null ? void 0 : slotProps.scatter), id);
+      }, slotProps?.scatter), id);
     })
   });
 }

package/esm/SparkLineChart/SparkLineChart.js

@@ -76,7 +76,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     }, xAxis)],
     colors: colors,
     sx: sx,
-    disableAxisListener: (!showTooltip || (tooltip == null ? void 0 : tooltip.trigger) !== 'axis') && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none',
+    disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
       skipAnimation: true,
       slots: slots,

package/esm/context/CartesianContextProvider.js

@@ -43,7 +43,7 @@ function CartesianContextProvider(props) {
   } = props;
   const formattedSeries = React.useContext(SeriesContext);
   const drawingArea = React.useContext(DrawingContext);
-  const xAxis = React.useMemo(() => inXAxis == null ? void 0 : inXAxis.map(axisConfig => {
+  const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;
     if (dataKey === undefined || axisConfig.data !== undefined) {
       return axisConfig;
@@ -55,7 +55,7 @@ function CartesianContextProvider(props) {
       data: dataset.map(d => d[dataKey])
     });
   }), [inXAxis, dataset]);
-  const yAxis = React.useMemo(() => inYAxis == null ? void 0 : inYAxis.map(axisConfig => {
+  const yAxis = React.useMemo(() => inYAxis?.map(axisConfig => {
     const dataKey = axisConfig.dataKey;
     if (dataKey === undefined || axisConfig.data !== undefined) {
       return axisConfig;
@@ -68,11 +68,9 @@ function CartesianContextProvider(props) {
     });
   }), [inYAxis, dataset]);
   const value = React.useMemo(() => {
-    var _xAxis$map, _yAxis$map;
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
-      var _ref, _formattedSeries$char;
       const getter = getters[chartType];
-      const series = (_ref = (_formattedSeries$char = formattedSeries[chartType]) == null ? void 0 : _formattedSeries$char.series) != null ? _ref : {};
+      const series = formattedSeries[chartType]?.series ?? {};
       const [minChartTypeData, maxChartTypeData] = getter({
         series,
         axis,
@@ -91,9 +89,9 @@ function CartesianContextProvider(props) {
       const charTypes = Object.keys(getters);
       return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis), [null, null]);
     };
-    const allXAxis = [...((_xAxis$map = xAxis == null ? void 0 : xAxis.map((axis, index) => _extends({
-      id: `deaultized-x-axis-${index}`
-    }, axis))) != null ? _xAxis$map : []),
+    const allXAxis = [...(xAxis?.map((axis, index) => _extends({
+      id: `defaultized-x-axis-${index}`
+    }, axis)) ?? []),
     // Allows to specify an axis with id=DEFAULT_X_AXIS_KEY
     ...(xAxis === undefined || xAxis.findIndex(({
       id
@@ -103,14 +101,12 @@ function CartesianContextProvider(props) {
     }] : [])];
     const completedXAxis = {};
     allXAxis.forEach((axis, axisIndex) => {
-      var _axis$scaleType, _axis$min, _axis$max, _axis$min2, _axis$max2;
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, xExtremumGetters, isDefaultAxis);
       const range = axis.reverse ? [drawingArea.left + drawingArea.width, drawingArea.left] : [drawingArea.left, drawingArea.left + drawingArea.width];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati, _axis$barGapRatio;
-        const categoryGapRatio = (_axis$categoryGapRati = axis.categoryGapRatio) != null ? _axis$categoryGapRati : DEFAULT_CATEGORY_GAP_RATIO;
-        const barGapRatio = (_axis$barGapRatio = axis.barGapRatio) != null ? _axis$barGapRatio : DEFAULT_BAR_GAP_RATIO;
+        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
+        const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
         completedXAxis[axis.id] = _extends({
           categoryGapRatio,
           barGapRatio
@@ -129,24 +125,24 @@ function CartesianContextProvider(props) {
         // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
         return;
       }
-      const scaleType = (_axis$scaleType = axis.scaleType) != null ? _axis$scaleType : 'linear';
-      const extremums = [(_axis$min = axis.min) != null ? _axis$min : minData, (_axis$max = axis.max) != null ? _axis$max : maxData];
+      const scaleType = axis.scaleType ?? 'linear';
+      const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
-      const domain = [(_axis$min2 = axis.min) != null ? _axis$min2 : niceDomain[0], (_axis$max2 = axis.max) != null ? _axis$max2 : niceDomain[1]];
+      const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedXAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),
         tickNumber
       });
     });
-    const allYAxis = [...((_yAxis$map = yAxis == null ? void 0 : yAxis.map((axis, index) => _extends({
-      id: `deaultized-y-axis-${index}`
-    }, axis))) != null ? _yAxis$map : []), ...(yAxis === undefined || yAxis.findIndex(({
+    const allYAxis = [...(yAxis?.map((axis, index) => _extends({
+      id: `defaultized-y-axis-${index}`
+    }, axis)) ?? []), ...(yAxis === undefined || yAxis.findIndex(({
       id
     }) => id === DEFAULT_Y_AXIS_KEY) === -1 ? [{
       id: DEFAULT_Y_AXIS_KEY,
@@ -154,13 +150,11 @@ function CartesianContextProvider(props) {
     }] : [])];
     const completedYAxis = {};
     allYAxis.forEach((axis, axisIndex) => {
-      var _axis$scaleType2, _axis$min3, _axis$max3, _axis$min4, _axis$max4;
       const isDefaultAxis = axisIndex === 0;
       const [minData, maxData] = getAxisExtremum(axis, yExtremumGetters, isDefaultAxis);
       const range = axis.reverse ? [drawingArea.top, drawingArea.top + drawingArea.height] : [drawingArea.top + drawingArea.height, drawingArea.top];
       if (isBandScaleConfig(axis)) {
-        var _axis$categoryGapRati2;
-        const categoryGapRatio = (_axis$categoryGapRati2 = axis.categoryGapRatio) != null ? _axis$categoryGapRati2 : DEFAULT_CATEGORY_GAP_RATIO;
+        const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
         completedYAxis[axis.id] = _extends({
           categoryGapRatio,
           barGapRatio: 0
@@ -179,15 +173,15 @@ function CartesianContextProvider(props) {
         // Could be merged with the two previous "if conditions" but then TS does not get that `axis.scaleType` can't be `band` or `point`.
         return;
       }
-      const scaleType = (_axis$scaleType2 = axis.scaleType) != null ? _axis$scaleType2 : 'linear';
-      const extremums = [(_axis$min3 = axis.min) != null ? _axis$min3 : minData, (_axis$max3 = axis.max) != null ? _axis$max3 : maxData];
+      const scaleType = axis.scaleType ?? 'linear';
+      const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const tickNumber = getTickNumber(_extends({}, axis, {
         range,
         domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(tickNumber);
       const niceDomain = niceScale.domain();
-      const domain = [(_axis$min4 = axis.min) != null ? _axis$min4 : niceDomain[0], (_axis$max4 = axis.max) != null ? _axis$max4 : niceDomain[1]];
+      const domain = [axis.min ?? niceDomain[0], axis.max ?? niceDomain[1]];
       completedYAxis[axis.id] = _extends({}, axis, {
         scaleType,
         scale: niceScale.domain(domain),

package/esm/context/DrawingProvider.js

@@ -36,7 +36,7 @@ export function DrawingProvider(props) {
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
   const value = React.useMemo(() => _extends({
-    chartId: chartId != null ? chartId : ''
+    chartId: chartId ?? ''
   }, drawingArea), [chartId, drawingArea]);
   return /*#__PURE__*/_jsx(SvgContext.Provider, {
     value: svgRef,

package/esm/context/SeriesContextProvider.js

@@ -31,7 +31,6 @@ const formatSeries = (series, colors, dataset) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
-    var _seriesGroups$type;
     const {
       id = `auto-generated-id-${seriesIndex}`,
       type
@@ -42,7 +41,7 @@ const formatSeries = (series, colors, dataset) => {
         seriesOrder: []
       };
     }
-    if (((_seriesGroups$type = seriesGroups[type]) == null ? void 0 : _seriesGroups$type.series[id]) !== undefined) {
+    if (seriesGroups[type]?.series[id] !== undefined) {
       throw new Error(`MUI X Charts: series' id "${id}" is not unique.`);
     }
     seriesGroups[type].series[id] = _extends({
@@ -54,8 +53,7 @@ const formatSeries = (series, colors, dataset) => {
   // Apply formater on a type group
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
-      var _seriesTypeFormatter$, _seriesTypeFormatter$2;
-      formattedSeries[type] = (_seriesTypeFormatter$ = (_seriesTypeFormatter$2 = seriesTypeFormatter[type]) == null ? void 0 : _seriesTypeFormatter$2.call(seriesTypeFormatter, seriesGroups[type], dataset)) != null ? _seriesTypeFormatter$ : seriesGroups[type];
+      formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];
     }
   });
   return formattedSeries;

package/esm/hooks/useAxisEvents.js

@@ -54,7 +54,7 @@ export const useAxisEvents = disableAxisListener => {
           };
         }
         const valueAsNumber = getAsANumber(value);
-        const closestIndex = axisData == null ? void 0 : axisData.findIndex((pointValue, index) => {
+        const closestIndex = axisData?.findIndex((pointValue, index) => {
           const v = getAsANumber(pointValue);
           if (v > valueAsNumber) {
             if (index === 0 || Math.abs(valueAsNumber - v) <= Math.abs(valueAsNumber - getAsANumber(axisData[index - 1]))) {

package/esm/hooks/useInteractionItemProps.js

@@ -41,7 +41,7 @@ export const useInteractionItemProps = (scope, skip) => {
   return getInteractionItemProps;
 };
 export const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
-  if (!(highlightScope != null && highlightScope.highlighted) || highlightScope.highlighted === 'none' || selectedItem === null) {
+  if (!highlightScope?.highlighted || highlightScope.highlighted === 'none' || selectedItem === null) {
     return false;
   }
   const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;
@@ -54,7 +54,7 @@ export const getIsHighlighted = (selectedItem, currentItem, highlightScope) => {
   return selectedItem.dataIndex !== undefined && selectedItem.dataIndex === currentItem.dataIndex;
 };
 export const getIsFaded = (selectedItem, currentItem, highlightScope) => {
-  if (!(highlightScope != null && highlightScope.faded) || highlightScope.faded === 'none' || selectedItem === null) {
+  if (!highlightScope?.faded || highlightScope.faded === 'none' || selectedItem === null) {
     return false;
   }
   const isSeriesSelected = selectedItem.type === currentItem.type && selectedItem.seriesId === currentItem.seriesId;

package/esm/hooks/useScale.js

@@ -18,7 +18,7 @@ export function useXScale(identifier) {
     xAxis,
     xAxisIds
   } = React.useContext(CartesianContext);
-  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier != null ? identifier : 0];
+  const id = typeof identifier === 'string' ? identifier : xAxisIds[identifier ?? 0];
   return xAxis[id].scale;
 }
 export function useYScale(identifier) {
@@ -26,6 +26,6 @@ export function useYScale(identifier) {
     yAxis,
     yAxisIds
   } = React.useContext(CartesianContext);
-  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier != null ? identifier : 0];
+  const id = typeof identifier === 'string' ? identifier : yAxisIds[identifier ?? 0];
   return yAxis[id].scale;
 }

package/esm/hooks/useTicks.js

@@ -10,7 +10,7 @@ export function getTickNumber(params) {
   } = params;
   const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
   const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
-  const defaultizedTickNumber = tickNumber != null ? tickNumber : Math.floor(Math.abs(range[1] - range[0]) / 50);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
   return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 const offsetRatio = {
@@ -34,17 +34,14 @@ export function useTicks(options) {
       const domain = scale.domain();
       if (scale.bandwidth() > 0) {
         // scale type = 'band'
-        return [...domain.map(value => {
-          var _valueFormatter;
-          return {
-            value,
-            formattedValue: (_valueFormatter = valueFormatter == null ? void 0 : valueFormatter(value, {
-              location: 'tick'
-            })) != null ? _valueFormatter : `${value}`,
-            offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
-            labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
-          };
-        }), ...(tickPlacement === 'extremities' ? [{
+        return [...domain.map(value => ({
+          value,
+          formattedValue: valueFormatter?.(value, {
+            location: 'tick'
+          }) ?? `${value}`,
+          offset: scale(value) - (scale.step() - scale.bandwidth()) / 2 + offsetRatio[tickPlacement] * scale.step(),
+          labelOffset: tickLabelPlacement === 'tick' ? 0 : scale.step() * (offsetRatio[tickLabelPlacement] - offsetRatio[tickPlacement])
+        })), ...(tickPlacement === 'extremities' ? [{
           formattedValue: undefined,
           offset: scale.range()[1],
           labelOffset: 0
@@ -53,29 +50,23 @@ export function useTicks(options) {
 
       // scale type = 'point'
       const filteredDomain = typeof tickInterval === 'function' && domain.filter(tickInterval) || typeof tickInterval === 'object' && tickInterval || domain;
-      return filteredDomain.map(value => {
-        var _valueFormatter2;
-        return {
-          value,
-          formattedValue: (_valueFormatter2 = valueFormatter == null ? void 0 : valueFormatter(value, {
-            location: 'tick'
-          })) != null ? _valueFormatter2 : `${value}`,
-          offset: scale(value),
-          labelOffset: 0
-        };
-      });
-    }
-    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
-    return ticks.map(value => {
-      var _valueFormatter3;
-      return {
+      return filteredDomain.map(value => ({
         value,
-        formattedValue: (_valueFormatter3 = valueFormatter == null ? void 0 : valueFormatter(value, {
+        formattedValue: valueFormatter?.(value, {
           location: 'tick'
-        })) != null ? _valueFormatter3 : scale.tickFormat(tickNumber)(value),
+        }) ?? `${value}`,
         offset: scale(value),
         labelOffset: 0
-      };
-    });
+      }));
+    }
+    const ticks = typeof tickInterval === 'object' ? tickInterval : scale.ticks(tickNumber);
+    return ticks.map(value => ({
+      value,
+      formattedValue: valueFormatter?.(value, {
+        location: 'tick'
+      }) ?? scale.tickFormat(tickNumber)(value),
+      offset: scale(value),
+      labelOffset: 0
+    }));
   }, [scale, tickInterval, tickNumber, valueFormatter, tickPlacement, tickLabelPlacement]);
 }

package/esm/internals/defaultizeValueFormatter.js

@@ -2,9 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 function defaultizeValueFormatter(series, defaultValueFormatter) {
   const defaultizedSeries = {};
   Object.keys(series).forEach(seriesId => {
-    var _series$seriesId$valu;
     defaultizedSeries[seriesId] = _extends({}, series[seriesId], {
-      valueFormatter: (_series$seriesId$valu = series[seriesId].valueFormatter) != null ? _series$seriesId$valu : defaultValueFormatter
+      valueFormatter: series[seriesId].valueFormatter ?? defaultValueFormatter
     });
   });
   return defaultizedSeries;

package/esm/internals/stackSeries.js

@@ -74,12 +74,11 @@ export const getStackingGroups = params => {
         stackingOffset: StackOffset.none
       });
     } else if (stackIndex[stack] === undefined) {
-      var _ref, _ref2;
       stackIndex[stack] = stackingGroups.length;
       stackingGroups.push({
         ids: [id],
-        stackingOrder: StackOrder[(_ref = stackOrder != null ? stackOrder : defaultStrategy == null ? void 0 : defaultStrategy.stackOrder) != null ? _ref : 'none'],
-        stackingOffset: StackOffset[(_ref2 = stackOffset != null ? stackOffset : defaultStrategy == null ? void 0 : defaultStrategy.stackOffset) != null ? _ref2 : 'diverging']
+        stackingOrder: StackOrder[stackOrder ?? defaultStrategy?.stackOrder ?? 'none'],
+        stackingOffset: StackOffset[stackOffset ?? defaultStrategy?.stackOffset ?? 'diverging']
       });
     } else {
       stackingGroups[stackIndex[stack]].ids.push(id);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.7
+ * @mui/x-charts v7.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -11,7 +11,7 @@ function DefaultChartsItemTooltipContent(props) {
     sx,
     classes
   } = props;
-  if (itemData.dataIndex === undefined) {
+  if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
     return null;
   }
   const {

package/modern/context/CartesianContextProvider.js

@@ -90,7 +90,7 @@ function CartesianContextProvider(props) {
       return charTypes.reduce((acc, charType) => axisExtremumCallback(acc, charType, axis, getters, isDefaultAxis), [null, null]);
     };
     const allXAxis = [...(xAxis?.map((axis, index) => _extends({
-      id: `deaultized-x-axis-${index}`
+      id: `defaultized-x-axis-${index}`
     }, axis)) ?? []),
     // Allows to specify an axis with id=DEFAULT_X_AXIS_KEY
     ...(xAxis === undefined || xAxis.findIndex(({
@@ -141,7 +141,7 @@ function CartesianContextProvider(props) {
       });
     });
     const allYAxis = [...(yAxis?.map((axis, index) => _extends({
-      id: `deaultized-y-axis-${index}`
+      id: `defaultized-y-axis-${index}`
     }, axis)) ?? []), ...(yAxis === undefined || yAxis.findIndex(({
       id
     }) => id === DEFAULT_Y_AXIS_KEY) === -1 ? [{

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-beta.7
+ * @mui/x-charts v7.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "7.0.0-beta.7",
+  "version": "7.1.0",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@mui/base": "^5.0.0-beta.36",
-    "@mui/system": "^5.15.9",
-    "@mui/utils": "^5.15.9",
+    "@mui/base": "^5.0.0-beta.40",
+    "@mui/system": "^5.15.14",
+    "@mui/utils": "^5.15.14",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.1.0",
@@ -45,7 +45,7 @@
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.0",
+    "@mui/material": "^5.15.14",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },