@mui/x-charts 6.0.0-alpha.8 → 6.18.0

package/ChartContainer/index.js

@@ -10,13 +10,14 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _InteractionProvider = require("../context/InteractionProvider");
+var _useReducedMotion = require("../hooks/useReducedMotion");
 var _ChartsSurface = require("../ChartsSurface");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _HighlightProvider = require("../context/HighlightProvider");
 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 ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
+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 ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -34,6 +35,8 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
   } = props;
   const svgRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(ref, svgRef);
+  (0, _useReducedMotion.useReducedMotion)(); // a11y reduce motion (see: https://react-spring.dev/docs/utilities/use-reduced-motion)
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, {
     width: width,
     height: height,
@@ -64,5 +67,4 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
       })
     })
   });
-});
-exports.ChartContainer = ChartContainer;
+});

package/ChartsAxis/ChartsAxis.d.ts

@@ -36,6 +36,15 @@ export interface ChartsAxisProps {
      */
     slotProps?: ChartsAxisSlotComponentProps;
 }
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+ */
 declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
 declare namespace ChartsAxis {
     var propTypes: any;

package/ChartsAxis/ChartsAxis.js

@@ -12,8 +12,8 @@ var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _ChartsXAxis = require("../ChartsXAxis");
 var _ChartsYAxis = require("../ChartsYAxis");
 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 getAxisId = propsValue => {
   if (propsValue == null) {
     return null;
@@ -32,6 +32,16 @@ const mergeProps = (axisConfig, slots, slotProps) => {
     slotProps
   };
 };
+
+/**
+ * Demos:
+ *
+ * - [Axis](https://mui.com/x/react-charts/axis/)
+ *
+ * API:
+ *
+ * - [ChartsAxis API](https://mui.com/x/api/charts/charts-axis/)
+ */
 function ChartsAxis(props) {
   const {
     topAxis,
@@ -105,11 +115,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['bottom', 'top']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -128,11 +142,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['left', 'right']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -151,11 +169,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['left', 'right']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,
@@ -184,11 +206,15 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     fill: _propTypes.default.string,
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
+    labelStyle: _propTypes.default.object,
     position: _propTypes.default.oneOf(['bottom', 'top']),
     slotProps: _propTypes.default.object,
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
+    tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
+    tickLabelStyle: _propTypes.default.object,
     tickMaxStep: _propTypes.default.number,
     tickMinStep: _propTypes.default.number,
     tickNumber: _propTypes.default.number,

package/ChartsAxis/axisClasses.d.ts

@@ -9,7 +9,7 @@ export interface ChartsAxisClasses {
     tick: string;
     /** Styles applied to ticks label. */
     tickLabel: string;
-    /** Styles applied to the axis label. */
+    /** Styles applied to the group containing the axis label. */
     label: string;
     /** Styles applied to x axes. */
     directionX: string;

package/ChartsAxis/axisClasses.js

@@ -9,5 +9,4 @@ var _utils = require("@mui/utils");
 function getAxisUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsAxis', slot);
 }
-const axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
-exports.axisClasses = axisClasses;
+const axisClasses = exports.axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/ChartsAxisHighlight/ChartsAxisHighlight.d.ts

@@ -1,9 +1,30 @@
 import * as React from 'react';
+export interface ChartsAxisHighlightClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type ChartsAxisHighlightClassKey = keyof ChartsAxisHighlightClasses;
+export declare function getAxisHighlightUtilityClass(slot: string): string;
+export declare const chartsAxisHighlightClasses: ChartsAxisHighlightClasses;
+export declare const ChartsAxisHighlightPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        axisHighlight: AxisHighlight;
+    };
+}, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 type AxisHighlight = 'none' | 'line' | 'band';
 export type ChartsAxisHighlightProps = {
     x?: AxisHighlight;
     y?: AxisHighlight;
 };
+/**
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+ */
 declare function ChartsAxisHighlight(props: ChartsAxisHighlightProps): React.JSX.Element;
 declare namespace ChartsAxisHighlight {
     var propTypes: any;

package/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -5,15 +5,57 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAxisHighlight = ChartsAxisHighlight;
+exports.chartsAxisHighlightClasses = exports.ChartsAxisHighlightPath = void 0;
+exports.getAxisHighlightUtilityClass = getAxisHighlightUtilityClass;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _styles = require("@mui/material/styles");
 var _InteractionProvider = require("../context/InteractionProvider");
 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 getAxisHighlightUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsAxisHighlight', slot);
+}
+const chartsAxisHighlightClasses = exports.chartsAxisHighlightClasses = (0, _generateUtilityClasses.default)('MuiChartsAxisHighlight', ['root']);
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getAxisHighlightUtilityClass);
+};
+const ChartsAxisHighlightPath = exports.ChartsAxisHighlightPath = (0, _styles.styled)('path', {
+  name: 'MuiChartsAxisHighlight',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  ownerState,
+  theme
+}) => (0, _extends2.default)({
+  pointerEvents: 'none'
+}, ownerState.axisHighlight === 'band' && {
+  fill: theme.palette.mode === 'light' ? 'gray' : 'white',
+  fillOpacity: 0.1
+}, ownerState.axisHighlight === 'line' && {
+  strokeDasharray: '5 2',
+  stroke: theme.palette.mode === 'light' ? '#000000' : '#ffffff'
+}));
+/**
+ * Demos:
+ *
+ * - [Custom components](https://mui.com/x/react-charts/components/)
+ *
+ * API:
+ *
+ * - [ChartsAxisHighlight API](https://mui.com/x/api/charts/charts-axis-highlight/)
+ */
 function ChartsAxisHighlight(props) {
   const {
     x: xAxisHighlight,
@@ -25,6 +67,7 @@ function ChartsAxisHighlight(props) {
     yAxisIds,
     yAxis
   } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const classes = useUtilityClasses();
   const USED_X_AXIS_ID = xAxisIds[0];
   const USED_Y_AXIS_ID = yAxisIds[0];
   const xScale = xAxis[USED_X_AXIS_ID].scale;
@@ -35,33 +78,29 @@ function ChartsAxisHighlight(props) {
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
   const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _isBandScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    children: [xAxisHighlight === 'band' && axis.x !== null && (0, _isBandScale.isBandScale)(xScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
       d: `M ${xScale(axis.x.value) - (xScale.step() - xScale.bandwidth()) / 2} ${yScale.range()[0]} l ${xScale.step()} 0 l 0 ${yScale.range()[1] - yScale.range()[0]} l ${-xScale.step()} 0 Z`,
-      fill: "gray",
-      fillOpacity: 0.1,
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
       }
-    }), yAxisHighlight === 'band' && axis.y !== null && (0, _isBandScale.isBandScale)(yScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    }), yAxisHighlight === 'band' && axis.y !== null && (0, _isBandScale.isBandScale)(yScale) && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
       d: `M ${xScale.range()[0]} ${yScale(axis.y.value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${xScale.range()[1] - xScale.range()[0]} 0 l 0 ${-yScale.step()} Z`,
-      fill: "gray",
-      fillOpacity: 0.1,
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'band'
       }
-    }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    }), xAxisHighlight === 'line' && axis.x !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
       d: `M ${getXPosition(axis.x.value)} ${yScale.range()[0]} L ${getXPosition(axis.x.value)} ${yScale.range()[1]}`,
-      stroke: "black",
-      strokeDasharray: "5 2",
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
       }
-    }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    }), yAxisHighlight === 'line' && axis.y !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsAxisHighlightPath, {
       d: `M ${xScale.range()[0]} ${getYPosition(axis.y.value)} L ${xScale.range()[1]} ${getYPosition(axis.y.value)}`,
-      stroke: "black",
-      strokeDasharray: "5 2",
-      style: {
-        pointerEvents: 'none'
+      className: classes.root,
+      ownerState: {
+        axisHighlight: 'line'
       }
     })]
   });

package/ChartsClipPath/ChartsClipPath.d.ts

@@ -8,6 +8,11 @@ export type ChartsClipPathProps = {
         left?: number;
     };
 };
+/**
+ * API:
+ *
+ * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+ */
 declare function ChartsClipPath(props: ChartsClipPathProps): React.JSX.Element;
 declare namespace ChartsClipPath {
     var propTypes: any;

package/ChartsClipPath/ChartsClipPath.js

@@ -10,8 +10,13 @@ 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; }
+/**
+ * API:
+ *
+ * - [ChartsClipPath API](https://mui.com/x/api/charts/charts-clip-path/)
+ */
 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 {};