@mui/x-charts 7.0.0-beta.6 → 7.0.0

package/esm/LineChart/MarkPlot.js

@@ -22,7 +22,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [MarkPlot API](https://mui.com/x/api/charts/mark-plot/)
  */
 function MarkPlot(props) {
-  var _slots$mark;
   const {
       slots,
       slotProps,
@@ -35,7 +34,7 @@ function MarkPlot(props) {
   const {
     chartId
   } = React.useContext(DrawingContext);
-  const Mark = (_slots$mark = slots == null ? void 0 : slots.mark) != null ? _slots$mark : MarkElement;
+  const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
   }
@@ -90,7 +89,7 @@ function MarkPlot(props) {
 
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
-          children: xData == null ? void 0 : xData.map((x, index) => {
+          children: xData?.map((x, index) => {
             const value = data[index] == null ? null : stackedData[index][1];
             return {
               x: xScale(x),
@@ -147,7 +146,7 @@ function MarkPlot(props) {
                 seriesId,
                 dataIndex: index
               }))
-            }, slotProps == null ? void 0 : slotProps.mark), `${seriesId}-${index}`);
+            }, slotProps?.mark), `${seriesId}-${index}`);
           })
         }, seriesId);
       });

package/esm/LineChart/extremums.js

@@ -1,10 +1,9 @@
 export const getExtremumX = params => {
-  var _axis$data, _axis$data2;
   const {
     axis
   } = params;
-  const minX = Math.min(...((_axis$data = axis.data) != null ? _axis$data : []));
-  const maxX = Math.max(...((_axis$data2 = axis.data) != null ? _axis$data2 : []));
+  const minX = Math.min(...(axis.data ?? []));
+  const maxX = Math.max(...(axis.data ?? []));
   return [minX, maxX];
 };
 function getSeriesExtremums(getValues, stackedData) {

package/esm/LineChart/formatter.js

@@ -6,7 +6,6 @@ let warnedOnce = false;
 
 // For now it's a copy past of bar charts formatter, but maybe will diverge later
 const formatter = (params, dataset) => {
-  var _ref;
   const {
     seriesOrder,
     series
@@ -18,7 +17,7 @@ const formatter = (params, dataset) => {
   }));
 
   // Create a data set with format adapted to d3
-  const d3Dataset = (_ref = dataset) != null ? _ref : [];
+  const d3Dataset = dataset ?? [];
   seriesOrder.forEach(id => {
     const data = series[id].data;
     if (data !== undefined) {
@@ -47,10 +46,7 @@ const formatter = (params, dataset) => {
       // Use dataKey if needed and available
       const dataKey = series[id].dataKey;
       return series[id].data === undefined && dataKey !== undefined ? dataKey : id;
-    })).value((d, key) => {
-      var _d$key;
-      return (_d$key = d[key]) != null ? _d$key : 0;
-    }) // defaultize null value to 0
+    })).value((d, key) => d[key] ?? 0) // defaultize null value to 0
     .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;

package/esm/PieChart/PieArcLabelPlot.js

@@ -19,13 +19,11 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
     return null;
   }
   if (typeof arcLabel === 'string') {
-    var _item$arcLabel;
-    return (_item$arcLabel = item[arcLabel]) == null ? void 0 : _item$arcLabel.toString();
+    return item[arcLabel]?.toString();
   }
   return arcLabel(item);
 }
 function PieArcLabelPlot(props) {
-  var _slots$pieArcLabel;
   const {
       arcLabel,
       arcLabelMinAngle = 0,
@@ -64,7 +62,7 @@ function PieArcLabelPlot(props) {
   if (data.length === 0) {
     return null;
   }
-  const ArcLabel = (_slots$pieArcLabel = slots == null ? void 0 : slots.pieArcLabel) != null ? _slots$pieArcLabel : PieArcLabel;
+  const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: transition((_ref, item) => {
       let {
@@ -91,7 +89,7 @@ function PieArcLabelPlot(props) {
         isFaded: item.isFaded,
         isHighlighted: item.isHighlighted,
         formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps == null ? void 0 : slotProps.pieArcLabel));
+      }, slotProps?.pieArcLabel));
     })
   }));
 }

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

@@ -43,7 +43,8 @@ export const useAxisEvents = disableAxisListener => {
       }
       const {
         scale,
-        data: axisData
+        data: axisData,
+        reverse
       } = axisConfig;
       if (!isBandScale(scale)) {
         const value = scale.invert(mouseValue);
@@ -53,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]))) {
@@ -76,6 +77,13 @@ export const useAxisEvents = disableAxisListener => {
       if (dataIndex < 0 || dataIndex >= axisData.length) {
         return null;
       }
+      if (reverse) {
+        const reverseIndex = axisData.length - 1 - dataIndex;
+        return {
+          index: reverseIndex,
+          value: axisData[reverseIndex]
+        };
+      }
       return {
         index: dataIndex,
         value: axisData[dataIndex]

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;
 }