@mui/x-charts 6.0.0-alpha.14 → 6.0.0-alpha.16

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -12,8 +12,8 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ChartsAxisHighlight(props) {
   const {
     x: xAxisHighlight,

package/ChartsClipPath/ChartsClipPath.js

@@ -10,8 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ChartsClipPath(props) {
   const {
     id,

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { DrawingArea } from '../context/DrawingProvider';
-import { AnchorPosition, SizingParams } from './utils';
+import { AnchorPosition, Direction } from './utils';
 import { FormattedSeries } from '../context/SeriesContextProvider';
 import { ChartsLegendClasses } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
-import { ChartSeriesDefaultized, LegendParams } from '../models/seriesType/config';
+import { LegendParams } from '../models/seriesType/config';
+import { ChartsTextStyle } from '../internals/components/ChartsText';
+import { CardinalDirections } from '../models/layout';
 export interface ChartsLegendSlotsComponent {
     legend?: React.JSXElementConstructor<LegendRendererProps>;
 }
@@ -14,10 +16,6 @@ export interface ChartsLegendSlotComponentProps {
 }
 export type ChartsLegendProps = {
     position?: AnchorPosition;
-    offset?: Partial<{
-        x: number;
-        y: number;
-    }>;
     /**
      * Override or extend the styles applied to the component.
      */
@@ -26,6 +24,11 @@ export type ChartsLegendProps = {
      * Set to true to hide the legend.
      */
     hidden?: boolean;
+    /**
+     * The direction of the legend layout.
+     * The default depends on the chart.
+     */
+    direction?: Direction;
     /**
      * Overridable component slots.
      * @default {}
@@ -36,36 +39,53 @@ export type ChartsLegendProps = {
      * @default {}
      */
     slotProps?: ChartsLegendSlotComponentProps;
-} & SizingParams;
-type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
-type SeriesLegendOwnerState = ChartSeriesDefaultized<any> & Pick<DefaultizedChartsLegendProps, 'direction'> & {
-    seriesIndex: number;
 };
+type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
 export type ChartsLegendRootOwnerState = {
     position: AnchorPosition;
-    direction: 'row' | 'column';
+    direction: Direction;
     drawingArea: DrawingArea;
     offsetX?: number;
     offsetY?: number;
     seriesNumber: number;
 };
-export declare const ChartsLegendRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
-    ownerState: ChartsLegendRootOwnerState;
-}, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
-export declare const ChartsSeriesLegendGroup: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
-    ownerState: SeriesLegendOwnerState;
-}, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
-export declare const ChartsLegendMark: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
-    ownerState: {
-        color: string;
-    };
-}, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;
-export declare const ChartsLegendLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const ChartsLegendRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, Pick<React.SVGProps<SVGGElement>, keyof React.SVGProps<SVGGElement>>, {}>;
 export interface LegendRendererProps extends Omit<DefaultizedChartsLegendProps, 'slots' | 'slotProps'> {
     series: FormattedSeries;
     seriesToDisplay: LegendParams[];
     drawingArea: DrawingArea;
-    classes: Record<'label' | 'mark' | 'series' | 'root', string>;
+    classes: Record<'mark' | 'series' | 'root', string>;
+    /**
+     * Style applied to legend labels.
+     * @default theme.typography.subtitle1
+     */
+    labelStyle?: ChartsTextStyle;
+    /**
+     * Width of the item mark (in px).
+     * @default 20
+     */
+    itemMarkWidth?: number;
+    /**
+     * Height of the item mark (in px).
+     * @default 20
+     */
+    itemMarkHeight?: number;
+    /**
+     * Space between the mark and the label (in px).
+     * @default 5
+     */
+    markGap?: number;
+    /**
+     * Space between two legend items (in px).
+     * @default 10
+     */
+    itemGap?: number;
+    /**
+     * Legend padding (in px).
+     * Can either be a single number, or an object with top, left, bottom, right properties.
+     * @default 0
+     */
+    padding?: number | Partial<CardinalDirections<number>>;
 }
 export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
 export {};

package/ChartsLegend/ChartsLegend.js

@@ -5,19 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsLegend = ChartsLegend;
-exports.ChartsSeriesLegendGroup = exports.ChartsLegendRoot = exports.ChartsLegendMark = exports.ChartsLegendLabel = void 0;
+exports.ChartsLegendRoot = void 0;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/base/utils");
+var _NoSsr = require("@mui/base/NoSsr");
 var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _utils3 = require("./utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _chartsLegendClasses = require("./chartsLegendClasses");
+var _ChartsText = require("../internals/components/ChartsText");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _excluded = ["rotate", "dominantBaseline"],
+  _excluded2 = ["label"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -31,167 +36,210 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils2.unstable_composeClasses)(slots, _chartsLegendClasses.getChartsLegendUtilityClass, classes);
 };
-function getTranslePosition({
-  position,
-  drawingArea
-}) {
-  let xValue;
-  switch (position.horizontal) {
-    case 'left':
-      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left}px - var(--ChartsLegend-rootWidth))`;
-      break;
-    case 'middle':
-      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left + drawingArea.width / 2}px - 0.5 * var(--ChartsLegend-rootWidth))`;
-      break;
-    default:
-      xValue = `calc(var(--ChartsLegend-rootOffsetX, 0px) + ${drawingArea.left + drawingArea.width}px)`;
-      break;
-  }
-  let yValue;
-  switch (position.vertical) {
-    case 'top':
-      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top}px - var(--ChartsLegend-rootHeight))`;
-      break;
-    case 'middle':
-      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top + drawingArea.height / 2}px - 0.5 * var(--ChartsLegend-rootHeight))`;
-      break;
-    default:
-      yValue = `calc(var(--ChartsLegend-rootOffsetY, 0px) + ${drawingArea.top + drawingArea.height}px)`;
-      break;
-  }
-  return {
-    transform: `translate(${xValue}, ${yValue})`
-  };
-}
 const ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
-})(({
-  ownerState
-}) => {
-  const {
-    direction,
-    drawingArea,
-    offsetX,
-    offsetY,
-    seriesNumber,
-    position
-  } = ownerState;
-  return (0, _extends2.default)({
-    '--ChartsLegend-rootOffsetX': typeof offsetX === 'number' ? `${offsetX}px` : undefined,
-    '--ChartsLegend-rootOffsetY': typeof offsetY === 'number' ? `${offsetY}px` : undefined,
-    '--ChartsLegend-rootWidth': direction === 'row' ? `calc(var(--ChartsLegend-itemWidth) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${seriesNumber - 1} )` : 'var(--ChartsLegend-itemWidth)',
-    '--ChartsLegend-rootHeight': direction === 'row' ? 'var(--ChartsLegend-itemMarkSize)' : `calc(var(--ChartsLegend-itemMarkSize) * ${seriesNumber} + var(--ChartsLegend-rootSpacing) * ${seriesNumber - 1} )`
-  }, getTranslePosition({
-    position,
-    drawingArea,
-    offsetX,
-    offsetY
-  }));
-});
-const ChartsSeriesLegendGroup = exports.ChartsSeriesLegendGroup = (0, _styles.styled)('g', {
-  name: 'MuiChartsLegend',
-  slot: 'ChartsSeriesLegendGroup',
-  overridesResolver: (props, styles) => styles.series
-})(({
-  ownerState
-}) => {
-  const {
-    direction,
-    seriesIndex
-  } = ownerState;
-  if (direction === 'row') {
-    return {
-      transform: `translate(calc(${seriesIndex} * (var(--ChartsLegend-itemWidth) + var(--ChartsLegend-rootSpacing))), 0)`
-    };
-  }
-  return {
-    transform: `translate(0, calc(${seriesIndex} * (var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-rootSpacing))))`
-  };
-});
-const ChartsLegendMark = exports.ChartsLegendMark = (0, _styles.styled)('rect', {
-  name: 'MuiChartsLegend',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark
-})(({
-  ownerState
-}) => ({
-  x: 0,
-  y: 0,
-  width: 'var(--ChartsLegend-itemMarkSize)',
-  height: 'var(--ChartsLegend-itemMarkSize)',
-  fill: ownerState.color
-}));
-const ChartsLegendLabel = exports.ChartsLegendLabel = (0, _styles.styled)('text', {
-  name: 'MuiChartsLegend',
-  slot: 'Label',
-  overridesResolver: (props, styles) => styles.label
-})(({
-  theme
-}) => (0, _extends2.default)({}, theme.typography.body1, {
-  color: 'inherit',
-  transform: `translate(
-      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),
-      calc(0.5 * var(--ChartsLegend-itemMarkSize))
-      )`,
-  fill: (theme.vars || theme).palette.text.primary,
-  dominantBaseline: 'central'
-}));
+})({});
 const defaultProps = {
   position: {
     horizontal: 'middle',
     vertical: 'top'
   },
-  direction: 'row',
-  markSize: 20,
-  itemWidth: 100,
-  spacing: 2
+  direction: 'row'
+};
+/**
+ * Transforms number or partial padding object to a defaultized padding object.
+ */
+const getStandardizedPadding = padding => {
+  if (typeof padding === 'number') {
+    return {
+      left: padding,
+      right: padding,
+      top: padding,
+      bottom: padding
+    };
+  }
+  return (0, _extends2.default)({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }, padding);
 };
 function DefaultChartsLegend(props) {
   const {
     hidden,
     position,
     direction,
-    offset,
-    series,
     seriesToDisplay,
     drawingArea,
-    classes
+    classes,
+    itemMarkWidth = 20,
+    itemMarkHeight = 20,
+    markGap = 5,
+    itemGap = 10,
+    padding: paddingProps = 10,
+    labelStyle: inLabelStyle
   } = props;
+  const theme = (0, _styles.useTheme)();
+  const labelStyle = React.useMemo(() => (0, _extends2.default)({}, theme.typography.subtitle1, {
+    color: 'inherit',
+    dominantBaseline: 'central',
+    textAnchor: 'start',
+    fill: (theme.vars || theme).palette.text.primary,
+    lineHeight: 1
+  }, inLabelStyle),
+  // To say to TS that the dominantBaseline and textAnchor are correct
+  [inLabelStyle, theme]);
+  const padding = React.useMemo(() => getStandardizedPadding(paddingProps), [paddingProps]);
+  const getItemSpace = React.useCallback((label, inStyle = {}) => {
+    const style = (0, _objectWithoutPropertiesLoose2.default)(inStyle, _excluded);
+    const linesSize = (0, _ChartsText.getWordsByLines)({
+      style,
+      needsComputation: true,
+      text: label
+    });
+    const innerSize = {
+      innerWidth: itemMarkWidth + markGap + Math.max(...linesSize.map(size => size.width)),
+      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
+    };
+    return (0, _extends2.default)({}, innerSize, {
+      outerWidth: innerSize.innerWidth + itemGap,
+      outerHeight: innerSize.innerHeight + itemGap
+    });
+  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
+  const totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
+  const totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
+  const availableWidth = totalWidth - padding.left - padding.right;
+  const availableHeight = totalHeight - padding.top - padding.bottom;
+  const seriesWithPosition = React.useMemo(() => {
+    // Start at 0, 0. Will be modified later by padding and position.
+    let x = 0;
+    let y = 0;
+
+    // total values used to align legend later.
+    let totalWidthUsed = 0;
+    let totalHeightUsed = 0;
+    let rowIndex = 0;
+    const rowMaxHeight = [0];
+    const seriesWithRawPosition = seriesToDisplay.map(_ref => {
+      let {
+          label
+        } = _ref,
+        other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
+      const itemSpace = getItemSpace(label, labelStyle);
+      const rep = (0, _extends2.default)({}, other, {
+        label,
+        positionX: x,
+        positionY: y,
+        innerHeight: itemSpace.innerHeight,
+        innerWidth: itemSpace.innerWidth,
+        outerHeight: itemSpace.outerHeight,
+        outerWidth: itemSpace.outerWidth,
+        rowIndex
+      });
+      if (direction === 'row') {
+        if (x + itemSpace.innerWidth > availableWidth) {
+          // This legend item would create overflow along the x-axis, so we start a new row.
+          x = 0;
+          y += rowMaxHeight[rowIndex];
+          rowIndex += 1;
+          if (rowMaxHeight.length <= rowIndex) {
+            rowMaxHeight.push(0);
+          }
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
+        x += itemSpace.outerWidth;
+      }
+      if (direction === 'column') {
+        if (y + itemSpace.innerHeight > availableHeight) {
+          // This legend item would create overflow along the y-axis, so we start a new column.
+          x = totalWidthUsed + itemGap;
+          y = 0;
+          rowIndex = 0;
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        if (rowMaxHeight.length <= rowIndex) {
+          rowMaxHeight.push(0);
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowIndex += 1;
+        y += itemSpace.outerHeight;
+      }
+      return rep;
+    });
+
+    // Move the legend according to padding and position
+    let gapX = 0;
+    let gapY = 0;
+    switch (position.horizontal) {
+      case 'left':
+        gapX = padding.left;
+        break;
+      case 'right':
+        gapX = totalWidth - padding.right - totalWidthUsed;
+        break;
+      default:
+        gapX = (totalWidth - totalWidthUsed) / 2;
+        break;
+    }
+    switch (position.vertical) {
+      case 'top':
+        gapY = padding.top;
+        break;
+      case 'bottom':
+        gapY = totalHeight - padding.bottom - totalHeightUsed;
+        break;
+      default:
+        gapY = (totalHeight - totalHeightUsed) / 2;
+        break;
+    }
+    return seriesWithRawPosition.map(item => (0, _extends2.default)({}, item, {
+      // Add the gap due to the position
+      positionX: item.positionX + gapX,
+      // Add the gap due to the position
+      positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+      : item.outerHeight / 2) // Get the center of the item
+    }));
+  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
-    ownerState: {
-      direction,
-      offsetX: offset?.x,
-      offsetY: offset?.y,
-      seriesNumber: seriesToDisplay.length,
-      position,
-      drawingArea
-    },
-    className: classes.root,
-    children: seriesToDisplay.map(({
-      id,
-      label,
-      color
-    }, seriesIndex) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChartsSeriesLegendGroup, {
-      ownerState: (0, _extends2.default)({
-        direction,
-        seriesIndex
-      }, series),
-      className: classes.series,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendMark, {
-        ownerState: {
-          color
-        },
-        className: classes.mark
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendLabel, {
-        className: classes.label,
-        children: label
-      })]
-    }, id))
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
+      className: classes.root,
+      children: seriesWithPosition.map(({
+        id,
+        label,
+        color,
+        positionX,
+        positionY
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        className: classes.series,
+        transform: `translate(${positionX} ${positionY})`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          className: classes.mark,
+          y: -itemMarkHeight / 2,
+          width: itemMarkWidth,
+          height: itemMarkHeight,
+          fill: color
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
+          style: labelStyle,
+          text: label,
+          x: itemMarkWidth + markGap,
+          y: 0
+        })]
+      }, id))
+    })
   });
 }
 function ChartsLegend(inProps) {
@@ -202,7 +250,6 @@ function ChartsLegend(inProps) {
   const {
     position,
     direction,
-    offset,
     hidden,
     slots,
     slotProps
@@ -221,7 +268,6 @@ function ChartsLegend(inProps) {
     additionalProps: {
       position,
       direction,
-      offset,
       classes,
       drawingArea,
       series,

package/ChartsLegend/utils.d.ts

@@ -5,10 +5,5 @@ export type AnchorPosition = {
     horizontal: AnchorX;
     vertical: AnchorY;
 };
-export type SizingParams = {
-    direction?: 'row' | 'column';
-    markSize?: number;
-    itemWidth?: number;
-    spacing?: number;
-};
+export type Direction = 'row' | 'column';
 export declare function getSeriesToDisplay(series: FormattedSeries): import("../models/seriesType/config").LegendParams[];

package/ChartsSurface.js

@@ -11,9 +11,9 @@ var _styles = require("@mui/material/styles");
 var React = _interopRequireWildcard(require("react"));
 var _useAxisEvents = require("./hooks/useAxisEvents");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
@@ -24,8 +24,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
       width,
       height,
       viewBox,
-      disableAxisListener = false,
-      sx
+      disableAxisListener = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const svgView = (0, _extends2.default)({
@@ -39,14 +38,7 @@ const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(func
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
-    sx: [{
-      '--ChartsLegend-itemWidth': '100px',
-      '--ChartsLegend-itemMarkSize': '20px',
-      '--ChartsLegend-rootSpacing': '5px',
-      '--ChartsLegend-labelSpacing': '5px',
-      '--ChartsLegend-rootOffsetY': '-20px'
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    ref: ref
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: props.title

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -14,8 +14,8 @@ var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function DefaultChartsAxisContent(props) {
   const {
     series,

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -12,8 +12,8 @@ var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function DefaultChartsItemContent(props) {
   const {
     series,

package/ChartsTooltip/ChartsTooltip.js

@@ -19,8 +19,8 @@ var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 var _tooltipClasses = require("./tooltipClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
   const {
     classes