@mui/x-charts 8.0.0-alpha.5 → 8.0.0-alpha.7

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

@@ -7,16 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsAxesGradients = ChartsAxesGradients;
 exports.useChartGradient = useChartGradient;
+exports.useChartGradientObjectBound = useChartGradientObjectBound;
 var React = _interopRequireWildcard(require("react"));
 var _CartesianProvider = require("../../../context/CartesianProvider");
 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 _jsxRuntime = require("react/jsx-runtime");
 function useChartGradient() {
   const chartId = (0, _hooks.useChartId)();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
+
+// TODO: make public?
+function useChartGradientObjectBound() {
+  const chartId = (0, _hooks.useChartId)();
+  return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}-object-bound`, [chartId]);
+}
 function ChartsAxesGradients() {
   const {
     top,
@@ -29,20 +38,27 @@ function ChartsAxesGradients() {
   const svgHeight = top + height + bottom;
   const svgWidth = left + width + right;
   const getGradientId = useChartGradient();
+  const getObjectBoundGradientId = useChartGradientObjectBound();
   const {
     xAxisIds,
     xAxis,
     yAxisIds,
     yAxis
   } = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    zAxisIds,
+    zAxis
+  } = (0, _useZAxis.useZAxis)();
   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 objectBoundGradientId = getObjectBoundGradientId(axisId, 'y');
       const {
         colorMap,
         scale,
@@ -60,19 +76,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 objectBoundGradientId = getObjectBoundGradientId(axisId, 'x');
       const {
         colorMap,
         scale,
@@ -90,15 +114,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, 'z');
+      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

@@ -31,6 +31,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 === 'left') {
+      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 === 'left') {
+      return 'flex-start';
+    }
+    if (position?.horizontal === 'right') {
+      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

@@ -10,7 +10,6 @@ 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 ReactIs = _interopRequireWildcard(require("react-is"));
 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.
@@ -57,31 +56,23 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @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) => {
-  function InternalComponent(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);
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line react-compiler/react-compiler
-      InComponent.displayName = name;
-    }
-    const OutComponent = ReactIs.isForwardRef(InComponent) ? InComponent :
-    /*#__PURE__*/
-    // InComponent needs to be a function that accepts `(props, ref)`
-    // @ts-expect-error
-    React.forwardRef(InComponent);
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
-      classes: classes,
-      ref: ref
-    }));
+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__*/React.forwardRef(InternalComponent);
-};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutComponent, (0, _extends2.default)({}, outProps, {
+    classes: classes,
+    ref: ref
+  }));
+});
 exports.consumeThemeProps = consumeThemeProps;

package/node/internals/index.js

@@ -73,6 +73,18 @@ Object.keys(_ChartsAxesGradients).forEach(function (key) {
     }
   });
 });
+var _ChartsWrapper = require("./components/ChartsWrapper");
+Object.keys(_ChartsWrapper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsWrapper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsWrapper[key];
+    }
+  });
+});
 var _useSeries = require("../hooks/useSeries");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useDrawingArea = require("../hooks/useDrawingArea");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.7",
   "description": "The community edition of the Charts components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,11 +35,11 @@
     "@react-spring/web": "^9.7.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-is": "^18.3.1",
+    "react-is": "^18.3.1 || ^19.0.0",
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.4.0",
-    "@mui/x-charts-vendor": "8.0.0-alpha.4",
-    "@mui/x-internals": "8.0.0-alpha.5"
+    "@mui/x-charts-vendor": "8.0.0-alpha.7",
+    "@mui/x-internals": "8.0.0-alpha.7"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/ChartsLegend/ChartsLegendItem.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { ChartsTextStyle } from '../ChartsText';
-import { LegendItemParams } from './chartsLegend.types';
-import { ChartsLegendClasses } from './chartsLegendClasses';
-export interface ChartsLegendItemProps extends LegendItemParams {
-    positionY: number;
-    label: string;
-    positionX: number;
-    innerHeight: number;
-    innerWidth: number;
-    color: string;
-    gapX: number;
-    gapY: number;
-    legendWidth: number;
-    itemMarkHeight: number;
-    itemMarkWidth: number;
-    markGap: number;
-    labelStyle: ChartsTextStyle;
-    classes?: Omit<Partial<ChartsLegendClasses>, 'column' | 'row' | 'label'>;
-    onClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
-}
-/**
- * @ignore - internal component.
- */
-declare function ChartsLegendItem(props: ChartsLegendItemProps): React.JSX.Element;
-export { ChartsLegendItem };

package/ChartsLegend/ChartsLegendItem.js

@@ -1,65 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from "../ChartsText/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-function ChartsLegendItem(props) {
-  const isRTL = useRtl();
-  const {
-    id,
-    positionY,
-    label,
-    positionX,
-    innerHeight,
-    innerWidth,
-    legendWidth,
-    color,
-    gapX,
-    gapY,
-    itemMarkHeight,
-    itemMarkWidth,
-    markGap,
-    labelStyle,
-    classes,
-    onClick
-  } = props;
-  return /*#__PURE__*/_jsxs("g", {
-    className: clsx(classes?.series, `${classes?.series}-${id}`),
-    transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-    children: [/*#__PURE__*/_jsx("rect", {
-      x: isRTL ? -(innerWidth + 2) : -2,
-      y: -itemMarkHeight / 2 - 2,
-      width: innerWidth + 4,
-      height: innerHeight + 4,
-      fill: "transparent",
-      className: classes?.itemBackground,
-      onClick: onClick,
-      style: {
-        pointerEvents: onClick ? 'all' : 'none',
-        cursor: onClick ? 'pointer' : 'unset'
-      }
-    }), /*#__PURE__*/_jsx("rect", {
-      className: classes?.mark,
-      x: isRTL ? -itemMarkWidth : 0,
-      y: -itemMarkHeight / 2,
-      width: itemMarkWidth,
-      height: itemMarkHeight,
-      fill: color,
-      style: {
-        pointerEvents: 'none'
-      }
-    }), /*#__PURE__*/_jsx(ChartsText, {
-      style: _extends({
-        pointerEvents: 'none'
-      }, labelStyle),
-      text: label,
-      x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
-      y: 0
-    })]
-  });
-}
-export { ChartsLegendItem };

package/ChartsLegend/DefaultChartsLegend.d.ts

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { FormattedSeries } from '../context/SeriesProvider';
-import { LegendPerItemProps } from './LegendPerItem';
-import { SeriesLegendItemContext } from './chartsLegend.types';
-export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDisplay' | 'onItemClick'> {
-    series: FormattedSeries;
-    seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
-    /**
-     * Callback fired when a legend item is clicked.
-     * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
-     * @param {SeriesLegendItemContext} legendItem The legend item data.
-     * @param {number} index The index of the clicked legend item.
-     */
-    onItemClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void;
-    /**
-     * Set to true to hide the legend.
-     * @default false
-     */
-    hidden?: boolean;
-}
-declare function DefaultChartsLegend(props: LegendRendererProps): React.JSX.Element | null;
-declare namespace DefaultChartsLegend {
-    var propTypes: any;
-}
-export { DefaultChartsLegend };