@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.10

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.1
+ * @mui/x-charts v8.0.0-alpha.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -153,6 +153,17 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
     }
   });
 });
+var _ChartsLabel = require("./ChartsLabel");
+Object.keys(_ChartsLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLabel[key];
+    }
+  });
+});
 var _ChartsLegend = require("./ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -284,4 +295,15 @@ Object.keys(_ChartContainer).forEach(function (key) {
       return _ChartContainer[key];
     }
   });
+});
+var _ChartDataProvider = require("./ChartDataProvider");
+Object.keys(_ChartDataProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartDataProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartDataProvider[key];
+    }
+  });
 });

package/node/internals/calculateMargins.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateMargins = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _constants = require("../constants");
+const calculateMargins = props => {
+  if (props.hideLegend || !props.series?.some(s => s.label)) {
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, props.margin);
+  }
+  if (props.slotProps?.legend?.direction === 'vertical') {
+    if (props.slotProps?.legend?.position?.horizontal === 'start') {
+      return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+        left: _constants.DEFAULT_LEGEND_FACING_MARGIN
+      }, props.margin);
+    }
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+      right: _constants.DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  if (props.slotProps?.legend?.position?.vertical === 'bottom') {
+    return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+      bottom: _constants.DEFAULT_LEGEND_FACING_MARGIN
+    }, props.margin);
+  }
+  return (0, _extends2.default)({}, _constants.DEFAULT_MARGINS, {
+    top: _constants.DEFAULT_LEGEND_FACING_MARGIN
+  }, props.margin);
+};
+exports.calculateMargins = calculateMargins;

package/node/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -6,20 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAxesGradients = ChartsAxesGradients;
-exports.useChartGradient = useChartGradient;
 var React = _interopRequireWildcard(require("react"));
-var _CartesianProvider = require("../../../context/CartesianProvider");
-var _DrawingAreaProvider = require("../../../context/DrawingAreaProvider");
 var _hooks = require("../../../hooks");
 var _ChartsPiecewiseGradient = _interopRequireDefault(require("./ChartsPiecewiseGradient"));
 var _ChartsContinuousGradient = _interopRequireDefault(require("./ChartsContinuousGradient"));
+var _ChartsContinuousGradientObjectBound = _interopRequireDefault(require("./ChartsContinuousGradientObjectBound"));
+var _useZAxis = require("../../../hooks/useZAxis");
+var _useChartGradientId = require("../../../hooks/useChartGradientId");
 var _jsxRuntime = require("react/jsx-runtime");
-function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(_DrawingAreaProvider.DrawingAreaContext);
-  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
-}
 function ChartsAxesGradients() {
   const {
     top,
@@ -31,21 +25,30 @@ function ChartsAxesGradients() {
   } = (0, _hooks.useDrawingArea)();
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
-  const getGradientId = useChartGradient();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+  const getObjectBoundGradientId = (0, _useChartGradientId.useChartGradientIdObjectBoundBuilder)();
   const {
-    xAxisIds,
     xAxis,
-    yAxisIds,
-    yAxis
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  const {
+    zAxis,
+    zAxisIds
+  } = (0, _useZAxis.useZAxes)();
   const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
   const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
-  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+  const filteredZAxisIds = zAxisIds.filter(axisId => zAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0 && filteredZAxisIds.length === 0) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("defs", {
     children: [filteredYAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'y');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -63,19 +66,27 @@ function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-          isReversed: !reverse,
-          scale: scale,
-          colorScale: colorScale,
-          colorMap: colorMap,
-          size: svgHeight,
-          gradientId: gradientId,
-          direction: "y"
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+            isReversed: !reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgHeight,
+            gradientId: gradientId,
+            direction: "y"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradientObjectBound.default, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
         }, gradientId);
       }
       return null;
     }), filteredXAxisIds.map(axisId => {
-      const gradientId = getGradientId(axisId, 'x');
+      const gradientId = getGradientId(axisId);
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
       const {
         colorMap,
         scale,
@@ -93,15 +104,36 @@ function ChartsAxesGradients() {
         }, gradientId);
       }
       if (colorMap?.type === 'continuous') {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
-          isReversed: reverse,
-          scale: scale,
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradient.default, {
+            isReversed: reverse,
+            scale: scale,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            size: svgWidth,
+            gradientId: gradientId,
+            direction: "x"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradientObjectBound.default, {
+            isReversed: reverse,
+            colorScale: colorScale,
+            colorMap: colorMap,
+            gradientId: objectBoundGradientId
+          })]
+        }, gradientId);
+      }
+      return null;
+    }), filteredZAxisIds.map(axisId => {
+      const objectBoundGradientId = getObjectBoundGradientId(axisId);
+      const {
+        colorMap,
+        colorScale
+      } = zAxis[axisId];
+      if (colorMap?.type === 'continuous') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsContinuousGradientObjectBound.default, {
           colorScale: colorScale,
           colorMap: colorMap,
-          size: svgWidth,
-          gradientId: gradientId,
-          direction: "x"
-        }, gradientId);
+          gradientId: objectBoundGradientId
+        }, objectBoundGradientId);
       }
       return null;
     })]

package/node/internals/components/ChartsAxesGradients/ChartsContinuousGradient.js

@@ -20,14 +20,14 @@ function ChartsContinuousGradient(props) {
     colorScale,
     colorMap
   } = props;
-  const extremValues = [colorMap.min ?? 0, colorMap.max ?? 100];
-  const extremPositions = extremValues.map(scale).filter(p => p !== undefined);
-  if (extremPositions.length !== 2) {
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const extremumPositions = extremumValues.map(scale).filter(p => p !== undefined);
+  if (extremumPositions.length !== 2) {
     return null;
   }
-  const interpolator = typeof extremValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremValues[0], extremValues[1]) : (0, _d3Interpolate.interpolateDate)(extremValues[0], extremValues[1]);
-  const numberOfPoints = Math.round((Math.max(...extremPositions) - Math.min(...extremPositions)) / PX_PRECISION);
-  const keyPrefix = `${extremValues[0]}-${extremValues[1]}-`;
+  const interpolator = typeof extremumValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremumValues[0], extremumValues[1]) : (0, _d3Interpolate.interpolateDate)(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = Math.round((Math.max(...extremumPositions) - Math.min(...extremumPositions)) / PX_PRECISION);
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
     id: gradientId,
     x1: "0",

package/node/internals/components/ChartsAxesGradients/ChartsContinuousGradientObjectBound.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ChartsContinuousGradientObjectBound;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
+var _jsxRuntime = require("react/jsx-runtime");
+const PX_PRECISION = 10;
+const getDirection = isReversed => {
+  if (isReversed) {
+    return {
+      x1: '1',
+      x2: '0',
+      y1: '0',
+      y2: '0'
+    };
+  }
+  return {
+    x1: '0',
+    x2: '1',
+    y1: '0',
+    y2: '0'
+  };
+};
+
+/**
+ * Generates gradients to be used in tooltips and legends.
+ */
+function ChartsContinuousGradientObjectBound(props) {
+  const {
+    isReversed,
+    gradientId,
+    colorScale,
+    colorMap
+  } = props;
+  const extremumValues = [colorMap.min ?? 0, colorMap.max ?? 100];
+  const interpolator = typeof extremumValues[0] === 'number' ? (0, _d3Interpolate.interpolateNumber)(extremumValues[0], extremumValues[1]) : (0, _d3Interpolate.interpolateDate)(extremumValues[0], extremumValues[1]);
+  const numberOfPoints = PX_PRECISION;
+  const keyPrefix = `${extremumValues[0]}-${extremumValues[1]}-`;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", (0, _extends2.default)({
+    id: gradientId
+  }, getDirection(isReversed), {
+    gradientUnits: 'objectBoundingBox' // Use the SVG coordinate instead of the component ones.
+    ,
+    children: Array.from({
+      length: numberOfPoints + 1
+    }, (_, index) => {
+      const offset = index / numberOfPoints;
+      const value = interpolator(offset);
+      if (value === undefined) {
+        return null;
+      }
+      const color = colorScale(value);
+      if (color === null) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+        offset: offset,
+        stopColor: color,
+        stopOpacity: 1
+      }, keyPrefix + index);
+    })
+  }));
+}

package/node/internals/components/ChartsAxesGradients/ChartsPiecewiseGradient.js

@@ -16,6 +16,9 @@ function ChartsPiecewiseGradient(props) {
     scale,
     colorMap
   } = props;
+  if (size <= 0) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
     id: gradientId,
     x1: "0",
@@ -31,6 +34,9 @@ function ChartsPiecewiseGradient(props) {
         return null;
       }
       const offset = isReversed ? 1 - x / size : x / size;
+      if (Number.isNaN(offset)) {
+        return null;
+      }
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
           offset: offset,

package/node/internals/components/ChartsWrapper/ChartsWrapper.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsWrapper = ChartsWrapper;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _jsxRuntime = require("react/jsx-runtime");
+const getDirection = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.horizontal === 'start') {
+      return 'row';
+    }
+    return 'row-reverse';
+  }
+  if (position?.vertical === 'bottom') {
+    return 'column-reverse';
+  }
+  return 'column';
+};
+const getAlign = (direction, position) => {
+  if (direction === 'vertical') {
+    if (position?.vertical === 'top') {
+      return 'flex-start';
+    }
+    if (position?.vertical === 'bottom') {
+      return 'flex-end';
+    }
+  }
+  if (direction === 'horizontal') {
+    if (position?.horizontal === 'start') {
+      return 'flex-start';
+    }
+    if (position?.horizontal === 'end') {
+      return 'flex-end';
+    }
+  }
+  return 'center';
+};
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsWrapper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => ({
+  display: 'flex',
+  flexDirection: getDirection(ownerState.legendDirection, ownerState.legendPosition),
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: getAlign(ownerState.legendDirection, ownerState.legendPosition)
+}));
+
+/**
+ * @ignore - internal component.
+ *
+ * Wrapper for the charts components.
+ * Its main purpose is to position the HTML legend in the correct place.
+ */
+function ChartsWrapper(props) {
+  const {
+    children,
+    sx
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
+    ownerState: props,
+    sx: sx,
+    children: children
+  });
+}

package/node/internals/components/ChartsWrapper/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsWrapper = require("./ChartsWrapper");
+Object.keys(_ChartsWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsWrapper[key];
+    }
+  });
+});

package/node/internals/consumeSlots.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consumeSlots = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _styles = require("@mui/material/styles");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps"],
+  _excluded2 = ["ownerState"];
+/**
+ * A higher order component that consumes a slot from the props and renders the component provided in the slot.
+ *
+ * This HOC will wrap a single component, and will render the component provided in the slot, if it exists.
+ *
+ * If you need to render multiple components, you can manually consume the slots from the props and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the component provided in `mySlot` slot, if it exists. Otherwise, it will render the `DefaultComponent`.
+ *
+ * @example
+ *
+ * ```tsx
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   slots?: {
+ *     mySlot?: React.JSXElementConstructor<{ direction: 'row' | 'column' }>;
+ *   }
+ * };
+ *
+ * const MyComponent = consumeSlots(
+ *   'MuiMyComponent',
+ *   'mySlot',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {string} slotPropName The name of the prop to retrieve the slot from.
+ * @param {object} options Options for the HOC.
+ * @param {boolean} options.propagateSlots Whether to propagate the slots to the component, this is always false if the slot is provided.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Array<keyof Props>} options.omitProps An array of props to omit from the component.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+const consumeSlots = (name, slotPropName, options, InComponent) => {
+  function ConsumeSlotsInternal(props, ref) {
+    const themedProps = (0, _styles.useThemeProps)({
+      props,
+      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      name
+    });
+    const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+    const defaultizedProps = (0, _resolveProps.default)(defaultProps, themedProps);
+    const _ref = defaultizedProps,
+      {
+        slots,
+        slotProps
+      } = _ref,
+      other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+    const theme = (0, _styles.useTheme)();
+    const classes = options.classesResolver?.(defaultizedProps, theme);
+
+    // Can be a function component or a forward ref component.
+    const Component = slots?.[slotPropName] ?? InComponent;
+    const propagateSlots = options.propagateSlots && !slots?.[slotPropName];
+    const _useSlotProps = (0, _useSlotProps2.default)({
+        elementType: Component,
+        externalSlotProps: slotProps?.[slotPropName],
+        additionalProps: (0, _extends2.default)({}, other, {
+          classes
+        }, propagateSlots && {
+          slots,
+          slotProps
+        }),
+        ownerState: {}
+      }),
+      originalOutProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
+    const outProps = (0, _extends2.default)({}, originalOutProps);
+    for (const prop of options.omitProps ?? []) {
+      delete outProps[prop];
+    }
+
+    // Component can be wrapped in React.forwardRef or just a function that accepts (props, ref).
+    // If it is a plain function which accepts two arguments, we need to wrap it in React.forwardRef.
+    const OutComponent = Component.length >= 2 ? /*#__PURE__*/React.forwardRef(Component) : Component;
+    if (process.env.NODE_ENV !== 'production') {
+      OutComponent.displayName = `${name}.slots.${slotPropName}`;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/React.forwardRef(ConsumeSlotsInternal);
+};
+exports.consumeSlots = consumeSlots;

package/node/internals/consumeThemeProps.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.consumeThemeProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A higher order component that consumes and merges the theme `defaultProps` and handles the `classes` and renders the component.
+ *
+ * This HOC will wrap a single component.
+ * If you need to render multiple components, you can manually consume the theme and render them in your component instead of using this HOC.
+ *
+ * In the example below, `MyComponent` will render the `DefaultComponent` with the `direction` prop set to `'row'` and the className set to `'my-custom-root'`.
+ *
+ * @example
+ * ```tsx
+ * createTheme({
+ *   components: {
+ *     MuiMyComponent: {
+ *       defaultProps: {
+ *         direction: 'row',
+ *       },
+ *     },
+ *   },
+ * })
+ *
+ * type MyComponentProps = {
+ *   direction: 'row' | 'column';
+ *   classes?: Record<'root', string>;
+ * };
+ *
+ * const MyComponent = consumeThemeProps(
+ *   'MuiMyComponent',
+ *   function DefaultComponent(props: MyComponentProps) {
+ *     return (
+ *       <div className={props.classes.root}>
+ *         {props.direction}
+ *       </div>
+ *     );
+ *   }
+ * );
+ *
+ * render(<MyComponent classes={{ root: 'my-custom-root' }} />);
+ * ```
+ *
+ * @param {string} name The mui component name.
+ * @param {object} options Options for the HOC.
+ * @param {Record<string, any>} options.defaultProps A set of defaults for the component, will be deep merged with the props.
+ * @param {Function} options.classesResolver A function that returns the classes for the component. It receives the props, after theme props and defaults have been applied. And the theme object as the second argument.
+ * @param InComponent The component to render if the slot is not provided.
+ */
+const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
+  const themedProps = (0, _styles.useThemeProps)({
+    props,
+    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    name
+  });
+  const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};
+  const outProps = (0, _resolveProps.default)(defaultProps, themedProps);
+  const theme = (0, _styles.useTheme)();
+  const classes = options.classesResolver?.(outProps, theme);
+  const OutComponent = /*#__PURE__*/React.forwardRef(InComponent);
+  if (process.env.NODE_ENV !== 'production') {
+    OutComponent.displayName = `consumeThemeProps(${name})`;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
+    classes: classes,
+    ref: ref
+  }));
+});
+exports.consumeThemeProps = consumeThemeProps;

package/node/internals/defaultizeColor.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultizeColor = defaultizeColor;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-const DEFAULT_COLORS = ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'];
-function defaultizeColor(series, seriesIndex, colors = DEFAULT_COLORS) {
+function defaultizeColor(series, seriesIndex, colors) {
   if (series.type === 'pie') {
     return (0, _extends2.default)({}, series, {
       data: series.data.map((d, index) => (0, _extends2.default)({

package/node/internals/getCurve.js

@@ -3,42 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = getCurveFactory;
+exports.getCurveFactory = getCurveFactory;
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 function getCurveFactory(curveType) {
   switch (curveType) {
     case 'catmullRom':
-      {
-        return _d3Shape.curveCatmullRom.alpha(0.5);
-      }
+      return _d3Shape.curveCatmullRom.alpha(0.5);
     case 'linear':
-      {
-        return _d3Shape.curveLinear;
-      }
+      return _d3Shape.curveLinear;
     case 'monotoneX':
-      {
-        return _d3Shape.curveMonotoneX;
-      }
+      return _d3Shape.curveMonotoneX;
     case 'monotoneY':
-      {
-        return _d3Shape.curveMonotoneY;
-      }
+      return _d3Shape.curveMonotoneY;
     case 'natural':
-      {
-        return _d3Shape.curveNatural;
-      }
+      return _d3Shape.curveNatural;
     case 'step':
-      {
-        return _d3Shape.curveStep;
-      }
+      return _d3Shape.curveStep;
     case 'stepBefore':
-      {
-        return _d3Shape.curveStepBefore;
-      }
+      return _d3Shape.curveStepBefore;
     case 'stepAfter':
-      {
-        return _d3Shape.curveStepAfter;
-      }
+      return _d3Shape.curveStepAfter;
+    case 'bumpY':
+      return _d3Shape.curveBumpY;
+    case 'bumpX':
+      return _d3Shape.curveBumpX;
     default:
       return _d3Shape.curveMonotoneX;
   }