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

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -42,7 +42,7 @@ function ChartsAxisTooltipContent(props) {
   const relevantAxis = React.useMemo(() => {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
-  const Content = content != null ? content : DefaultChartsAxisTooltipContent;
+  const Content = content ?? DefaultChartsAxisTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,
     externalSlotProps: contentProps,

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -14,7 +14,7 @@ function ChartsItemTooltipContent(props) {
     contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
-  const Content = content != null ? content : DefaultChartsItemTooltipContent;
+  const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,
     externalSlotProps: contentProps,

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -49,7 +49,6 @@ const ChartsTooltipRoot = styled(Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props) {
-  var _slots$popper, _slots$itemContent, _slots$axisContent;
   const themeProps = useThemeProps({
     props,
     name: 'MuiChartsTooltip'
@@ -72,10 +71,10 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: themeProps.classes
   });
-  const PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
+  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({
     elementType: PopperComponent,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.popper,
+    externalSlotProps: slotProps?.popper,
     additionalProps: {
       open: popperOpen,
       placement: 'right-start',
@@ -90,16 +89,16 @@ function ChartsTooltip(props) {
     children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: (_slots$itemContent = slots == null ? void 0 : slots.itemContent) != null ? _slots$itemContent : itemContent,
-        contentProps: slotProps == null ? void 0 : slotProps.itemContent,
+        content: slots?.itemContent ?? itemContent,
+        contentProps: slotProps?.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: (_slots$axisContent = slots == null ? void 0 : slots.axisContent) != null ? _slots$axisContent : axisContent,
-        contentProps: slotProps == null ? void 0 : slotProps.axisContent,
+        content: slots?.axisContent ?? axisContent,
+        contentProps: slotProps?.axisContent,
         sx: {
           mx: 2
         },

package/esm/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -7,7 +7,6 @@ import { isCartesianSeries, utcFormatter } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
-  var _axis$valueFormatter;
   const {
     series,
     axis,
@@ -19,7 +18,7 @@ function DefaultChartsAxisTooltipContent(props) {
   if (dataIndex == null) {
     return null;
   }
-  const axisFormatter = (_axis$valueFormatter = axis.valueFormatter) != null ? _axis$valueFormatter : v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString();
+  const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,
@@ -44,9 +43,8 @@ function DefaultChartsAxisTooltipContent(props) {
           valueFormatter,
           data
         }) => {
-          var _data$dataIndex;
           // @ts-ignore
-          const formattedValue = valueFormatter((_data$dataIndex = data[dataIndex]) != null ? _data$dataIndex : null);
+          const formattedValue = valueFormatter(data[dataIndex] ?? null);
           if (formattedValue == null) {
             return null;
           }

package/esm/ChartsTooltip/DefaultChartsItemTooltipContent.js

@@ -5,14 +5,13 @@ import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltip
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsItemTooltipContent(props) {
-  var _series$valueFormatte;
   const {
     series,
     itemData,
     sx,
     classes
   } = props;
-  if (itemData.dataIndex === undefined) {
+  if (itemData.dataIndex === undefined || !series.data[itemData.dataIndex]) {
     return null;
   }
   const {
@@ -26,7 +25,7 @@ function DefaultChartsItemTooltipContent(props) {
     displayedLabel: series.label
   };
   const value = series.data[itemData.dataIndex];
-  const formattedValue = (_series$valueFormatte = series.valueFormatter) == null ? void 0 : _series$valueFormatte.call(series, value);
+  const formattedValue = series.valueFormatter?.(value);
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
     className: classes.root,

package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -10,7 +10,6 @@ import { getValueToPositionMapper } from '../hooks/useScale';
 import { getSVGPoint } from '../internals/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsVoronoiHandler(props) {
-  var _React$useContext$sca;
   const {
     voronoiMaxRadius,
     onItemClick
@@ -34,7 +33,7 @@ function ChartsVoronoiHandler(props) {
   const {
     series,
     seriesOrder
-  } = (_React$useContext$sca = React.useContext(SeriesContext).scatter) != null ? _React$useContext$sca : {};
+  } = React.useContext(SeriesContext).scatter ?? {};
   const voronoiRef = React.useRef({});
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
@@ -65,8 +64,8 @@ function ChartsVoronoiHandler(props) {
         xAxisKey,
         yAxisKey
       } = 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;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
       const seriesPoints = data.flatMap(({
@@ -89,7 +88,6 @@ function ChartsVoronoiHandler(props) {
 
     // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
     function getClosestPoint(event) {
-      var _voronoiRef$current$d;
       // Get mouse coordinate in global SVG space
       const svgPoint = getSVGPoint(svgRef.current, event);
       const outsideX = svgPoint.x < left || svgPoint.x > left + width;
@@ -100,7 +98,7 @@ function ChartsVoronoiHandler(props) {
       if (!voronoiRef.current.delauney) {
         return 'no-point-found';
       }
-      const closestPointIndex = (_voronoiRef$current$d = voronoiRef.current.delauney) == null ? void 0 : _voronoiRef$current$d.find(svgPoint.x, svgPoint.y);
+      const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y);
       if (closestPointIndex === undefined) {
         return 'no-point-found';
       }

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -72,7 +72,7 @@ function addLabelDimension(xTicks, {
       labelOffset,
       height
     } = item;
-    const distance = getMinXTranslation(width, height, style == null ? void 0 : style.angle);
+    const distance = getMinXTranslation(width, height, style?.angle);
     const textPosition = offset + labelOffset;
     const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
 
@@ -105,7 +105,6 @@ const defaultProps = {
  * - [ChartsXAxis API](https://mui.com/x/api/charts/charts-x-axis/)
  */
 function ChartsXAxis(inProps) {
-  var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   const props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsXAxis'
@@ -114,7 +113,7 @@ function ChartsXAxis(inProps) {
     xAxisIds
   } = React.useContext(CartesianContext);
   const _React$useContext = React.useContext(CartesianContext),
-    _ref = (_props$axisId = props.axisId) != null ? _props$axisId : xAxisIds[0],
+    _ref = props.axisId ?? xAxisIds[0],
     {
       xAxis: {
         [_ref]: {
@@ -157,18 +156,18 @@ function ChartsXAxis(inProps) {
   } = React.useContext(DrawingContext);
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const positionSign = position === 'bottom' ? 1 : -1;
-  const Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
-  const Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
-  const TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
-  const Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? ChartsText;
+  const Label = slots?.axisLabel ?? ChartsText;
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
-        fontSize: tickFontSize != null ? tickFontSize : 12
+        fontSize: tickFontSize ?? 12
       }, tickLabelStyle),
       className: classes.tickLabel
     },
@@ -195,10 +194,10 @@ function ChartsXAxis(inProps) {
   };
   const axisLabelProps = useSlotProps({
     elementType: Label,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
+    externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
-        fontSize: labelFontSize != null ? labelFontSize : 14,
+        fontSize: labelFontSize ?? 14,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto'
       }, labelStyle)
@@ -212,13 +211,13 @@ function ChartsXAxis(inProps) {
       x1: xScale.range()[0],
       x2: xScale.range()[1],
       className: classes.line
-    }, slotProps == null ? void 0 : slotProps.axisLine)), xTicksWithDimension.map(({
+    }, slotProps?.axisLine)), xTicksWithDimension.map(({
       formattedValue,
       offset,
       labelOffset,
       skipLabel
     }, index) => {
-      const xTickLabel = labelOffset != null ? labelOffset : 0;
+      const xTickLabel = labelOffset ?? 0;
       const yTickLabel = positionSign * (tickSize + 3);
       return /*#__PURE__*/_jsxs("g", {
         transform: `translate(${offset}, 0)`,
@@ -226,7 +225,7 @@ function ChartsXAxis(inProps) {
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           y2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel
         }, axisTickLabelProps, {

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -48,7 +48,6 @@ const defaultProps = {
  * - [ChartsYAxis API](https://mui.com/x/api/charts/charts-y-axis/)
  */
 function ChartsYAxis(inProps) {
-  var _props$axisId, _slots$axisLine, _slots$axisTick, _slots$axisTickLabel, _slots$axisLabel;
   const props = useThemeProps({
     props: _extends({}, defaultProps, inProps),
     name: 'MuiChartsYAxis'
@@ -57,7 +56,7 @@ function ChartsYAxis(inProps) {
     yAxisIds
   } = React.useContext(CartesianContext);
   const _React$useContext = React.useContext(CartesianContext),
-    _ref = (_props$axisId = props.axisId) != null ? _props$axisId : yAxisIds[0],
+    _ref = props.axisId ?? yAxisIds[0],
     {
       yAxis: {
         [_ref]: {
@@ -107,13 +106,13 @@ function ChartsYAxis(inProps) {
     x: positionSign * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  const Line = (_slots$axisLine = slots == null ? void 0 : slots.axisLine) != null ? _slots$axisLine : 'line';
-  const Tick = (_slots$axisTick = slots == null ? void 0 : slots.axisTick) != null ? _slots$axisTick : 'line';
-  const TickLabel = (_slots$axisTickLabel = slots == null ? void 0 : slots.axisTickLabel) != null ? _slots$axisTickLabel : ChartsText;
-  const Label = (_slots$axisLabel = slots == null ? void 0 : slots.axisLabel) != null ? _slots$axisLabel : ChartsText;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? ChartsText;
+  const Label = slots?.axisLabel ?? ChartsText;
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.axisTickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({
         fontSize: tickFontSize,
@@ -126,7 +125,7 @@ function ChartsYAxis(inProps) {
   });
   const axisLabelProps = useSlotProps({
     elementType: Label,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.axisLabel,
+    externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
       style: _extends({
         fontSize: labelFontSize,
@@ -144,7 +143,7 @@ function ChartsYAxis(inProps) {
       y1: yScale.range()[0],
       y2: yScale.range()[1],
       className: classes.line
-    }, slotProps == null ? void 0 : slotProps.axisLine)), yTicks.map(({
+    }, slotProps?.axisLine)), yTicks.map(({
       formattedValue,
       offset,
       labelOffset
@@ -157,7 +156,7 @@ function ChartsYAxis(inProps) {
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           x2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps == null ? void 0 : slotProps.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
           text: formattedValue.toString()

package/esm/Gauge/GaugeContainer.js

@@ -16,27 +16,24 @@ const ResizableContainer = styled('div', {
 })(({
   ownerState,
   theme
-}) => {
-  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%'
-    },
-    '& text': {
-      fill: (theme.vars || theme).palette.text.primary
-    }
-  };
-});
+}) => ({
+  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%'
+  },
+  '& text': {
+    fill: (theme.vars || theme).palette.text.primary
+  }
+}));
 const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,

package/esm/Gauge/GaugeProvider.js

@@ -57,9 +57,9 @@ export function GaugeProvider(props) {
     const usedHeight = maxRadius * (ratios.maxY - ratios.minY);
     cy = top + (height - usedHeight) / 2 + ratios.cy * usedHeight;
   }
-  const outerRadius = getPercentageValue(outerRadiusParam != null ? outerRadiusParam : maxRadius, maxRadius);
-  const innerRadius = getPercentageValue(innerRadiusParam != null ? innerRadiusParam : '80%', maxRadius);
-  const cornerRadius = getPercentageValue(cornerRadiusParam != null ? cornerRadiusParam : 0, outerRadius - innerRadius);
+  const outerRadius = getPercentageValue(outerRadiusParam ?? maxRadius, maxRadius);
+  const innerRadius = getPercentageValue(innerRadiusParam ?? '80%', maxRadius);
+  const cornerRadius = getPercentageValue(cornerRadiusParam ?? 0, outerRadius - innerRadius);
   const contextValue = React.useMemo(() => {
     const startAngleRad = Math.PI * startAngle / 180;
     const endAngleRad = Math.PI * endAngle / 180;

package/esm/LineChart/AreaElement.js

@@ -38,7 +38,6 @@ const useUtilityClasses = ownerState => {
  * - [AreaElement API](https://mui.com/x/api/charts/area-element/)
  */
 function AreaElement(props) {
-  var _slots$area;
   const {
       id,
       classes: innerClasses,
@@ -69,10 +68,10 @@ function AreaElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Area = (_slots$area = slots == null ? void 0 : slots.area) != null ? _slots$area : AnimatedArea;
+  const Area = slots?.area ?? AnimatedArea;
   const areaProps = useSlotProps({
     elementType: Area,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.area,
+    externalSlotProps: slotProps?.area,
     additionalProps: _extends({}, other, getInteractionItemProps({
       type: 'line',
       seriesId: id

package/esm/LineChart/AreaPlot.js

@@ -33,7 +33,6 @@ const useAggregatedData = () => {
     ids: groupIds
   }) => {
     return groupIds.flatMap(seriesId => {
-      var _xData$map;
       const {
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
@@ -54,10 +53,10 @@ const useAggregatedData = () => {
       }
       const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
       const curve = getCurveFactory(series[seriesId].curve);
-      const formattedData = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
+      const formattedData = xData?.map((x, index) => ({
         x,
         y: stackedData[index]
-      }))) != null ? _xData$map : [];
+      })) ?? [];
       const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
       const d = areaPath.curve(curve)(d3Data) || '';
       return _extends({}, series[seriesId], {

package/esm/LineChart/LineChart.js

@@ -69,21 +69,18 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     width: width,
     height: height,
     margin: margin,
-    xAxis: xAxis != null ? xAxis : [{
+    xAxis: xAxis ?? [{
       id: DEFAULT_X_AXIS_KEY,
       scaleType: 'point',
       data: Array.from({
-        length: Math.max(...series.map(s => {
-          var _ref, _s$data;
-          return ((_ref = (_s$data = s.data) != null ? _s$data : dataset) != null ? _ref : []).length;
-        }))
+        length: Math.max(...series.map(s => (s.data ?? dataset ?? []).length))
       }, (_, index) => index)
     }],
     yAxis: yAxis,
     colors: colors,
     dataset: dataset,
     sx: sx,
-    disableAxisListener: (tooltip == null ? void 0 : tooltip.trigger) !== 'axis' && (axisHighlight == null ? void 0 : axisHighlight.x) === 'none' && (axisHighlight == null ? void 0 : axisHighlight.y) === 'none' && !onAxisClick,
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
     children: [onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, {
       onAxisClick: onAxisClick
     }), grid && /*#__PURE__*/_jsx(ChartsGrid, {

package/esm/LineChart/LineElement.js

@@ -38,7 +38,6 @@ const useUtilityClasses = ownerState => {
  * - [LineElement API](https://mui.com/x/api/charts/line-element/)
  */
 function LineElement(props) {
-  var _slots$line;
   const {
       id,
       classes: innerClasses,
@@ -69,10 +68,10 @@ function LineElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  const Line = (_slots$line = slots == null ? void 0 : slots.line) != null ? _slots$line : AnimatedLine;
+  const Line = slots?.line ?? AnimatedLine;
   const lineProps = useSlotProps({
     elementType: Line,
-    externalSlotProps: slotProps == null ? void 0 : slotProps.line,
+    externalSlotProps: slotProps?.line,
     additionalProps: _extends({}, other, getInteractionItemProps({
       type: 'line',
       seriesId: id

package/esm/LineChart/LineHighlightPlot.js

@@ -21,7 +21,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - [LineHighlightPlot API](https://mui.com/x/api/charts/line-highlight-plot/)
  */
 function LineHighlightPlot(props) {
-  var _axis$x, _slots$lineHighlight;
   const {
       slots,
       slotProps
@@ -32,7 +31,7 @@ function LineHighlightPlot(props) {
   const {
     axis
   } = React.useContext(InteractionContext);
-  const highlightedIndex = (_axis$x = axis.x) == null ? void 0 : _axis$x.index;
+  const highlightedIndex = axis.x?.index;
   if (highlightedIndex === undefined) {
     return null;
   }
@@ -51,7 +50,7 @@ function LineHighlightPlot(props) {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
-  const Element = (_slots$lineHighlight = slots == null ? void 0 : slots.lineHighlight) != null ? _slots$lineHighlight : LineHighlightElement;
+  const Element = slots?.lineHighlight ?? LineHighlightElement;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
     children: stackingGroups.flatMap(({
       ids: groupIds
@@ -80,7 +79,7 @@ function LineHighlightPlot(props) {
           color: series[seriesId].color,
           x: x,
           y: y
-        }, slotProps == null ? void 0 : slotProps.lineHighlight), `${seriesId}`);
+        }, slotProps?.lineHighlight), `${seriesId}`);
       });
     })
   }));

package/esm/LineChart/LinePlot.js

@@ -33,7 +33,6 @@ const useAggregatedData = () => {
     ids: groupIds
   }) => {
     return groupIds.flatMap(seriesId => {
-      var _xData$map;
       const {
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
@@ -53,10 +52,10 @@ const useAggregatedData = () => {
         }
       }
       const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-      const formattedData = (_xData$map = xData == null ? void 0 : xData.map((x, index) => ({
+      const formattedData = xData?.map((x, index) => ({
         x,
         y: stackedData[index]
-      }))) != null ? _xData$map : [];
+      })) ?? [];
       const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
       const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
       return _extends({}, series[seriesId], {

package/esm/LineChart/MarkElement.js

@@ -67,7 +67,6 @@ MarkElementPath.propTypes = {
  * - [MarkElement API](https://mui.com/x/api/charts/mark-element/)
  */
 function MarkElement(props) {
-  var _axis$x;
   const {
       x,
       y,
@@ -86,7 +85,7 @@ function MarkElement(props) {
     item,
     axis
   } = React.useContext(InteractionContext);
-  const isHighlighted = ((_axis$x = axis.x) == null ? void 0 : _axis$x.index) === dataIndex || getIsHighlighted(item, {
+  const isHighlighted = axis.x?.index === dataIndex || getIsHighlighted(item, {
     type: 'line',
     seriesId: id
   }, highlightScope);

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