@mui/x-charts 6.0.0-alpha.6 → 6.0.0-alpha.7

package/BarChart/BarChart.d.ts

@@ -1,16 +1,32 @@
 import * as React from 'react';
+import { BarPlotSlotComponentProps, BarPlotSlotsComponent } from './BarPlot';
 import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
 import { MakeOptional } from '../models/helpers';
 import { ChartsTooltipProps } from '../ChartsTooltip';
-import { ChartsLegendProps } from '../ChartsLegend';
+import { ChartsLegendProps, ChartsLegendSlotsComponent, ChartsLegendSlotComponentProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
-export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, ChartsAxisProps {
+import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
+export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, ChartsLegendSlotsComponent {
+}
+export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+}
+export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<BarSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
     legend?: ChartsLegendProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: BarChartSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: BarChartSlotComponentProps;
 }
 declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<unknown>>;
 export { BarChart };

package/BarChart/BarChart.js

@@ -38,7 +38,9 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     leftAxis,
     rightAxis,
     bottomAxis,
-    children
+    children,
+    slots,
+    slotProps
   } = props;
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
@@ -64,15 +66,26 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipPathId})`,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {})
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, {
+        slots: slots,
+        slotProps: slotProps
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
-      bottomAxis: bottomAxis
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
+      bottomAxis: bottomAxis,
+      slots: slots,
+      slotProps: slotProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({
       x: "band"
-    }, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+    }, axisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -101,8 +114,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   children: _propTypes.default.node,
@@ -129,8 +147,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   legend: _propTypes.default.shape({
@@ -147,6 +170,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     spacing: _propTypes.default.number
   }),
   margin: _propTypes.default.shape({
@@ -169,8 +194,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -191,6 +221,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     xAxisKey: _propTypes.default.string,
     yAxisKey: _propTypes.default.string
   })).isRequired,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   title: _propTypes.default.string,
   tooltip: _propTypes.default.shape({
@@ -213,8 +253,13 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   viewBox: _propTypes.default.shape({
@@ -237,15 +282,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    maxTicks: _propTypes.default.number,
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   })),
   yAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -261,15 +308,17 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    maxTicks: _propTypes.default.number,
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    minTicks: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: _propTypes.default.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number,
-    tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func
   }))
 } : void 0;

package/BarChart/BarElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SlotComponentProps } from '@mui/base';
 import { HighlightScope } from '../context/HighlightProvider';
 export interface BarElementClasses {
     /** Styles applied to the root element. */
@@ -15,7 +16,28 @@ export interface BarElementOwnerState {
 }
 export declare function getBarElementUtilityClass(slot: string): string;
 export declare const lineElementClasses: BarElementClasses;
+export declare const BarElementPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: BarElementOwnerState;
+}, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;
 export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & React.ComponentPropsWithoutRef<'path'> & {
     highlightScope?: Partial<HighlightScope>;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: {
+        bar?: SlotComponentProps<'path', {}, BarElementOwnerState>;
+    };
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: {
+        /**
+         * The component that renders the root.
+         * @default BarElementPath
+         */
+        bar?: React.ElementType;
+    };
 };
 export declare function BarElement(props: BarElementProps): React.JSX.Element;

package/BarChart/BarElement.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarElement = BarElement;
+exports.BarElementPath = void 0;
 exports.getBarElementUtilityClass = getBarElementUtilityClass;
 exports.lineElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("@mui/base/utils");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _d3Color = require("d3-color");
@@ -18,7 +20,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "slots", "slotProps"];
 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 getBarElementUtilityClass(slot) {
@@ -49,13 +51,16 @@ const BarElementPath = (0, _styles.styled)('rect', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1
 }));
+exports.BarElementPath = BarElementPath;
 function BarElement(props) {
   const {
       id,
       dataIndex,
       classes: innerClasses,
       color,
-      highlightScope
+      highlightScope,
+      slots,
+      slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope);
@@ -81,12 +86,18 @@ function BarElement(props) {
     isHighlighted
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BarElementPath, (0, _extends2.default)({}, other, {
-    ownerState: ownerState,
-    className: classes.root
-  }, getInteractionItemProps({
-    type: 'bar',
-    seriesId: id,
-    dataIndex
-  })));
+  const Bar = slots?.bar ?? BarElementPath;
+  const barProps = (0, _utils.useSlotProps)({
+    elementType: Bar,
+    externalSlotProps: slotProps?.bar,
+    additionalProps: (0, _extends2.default)({}, other, getInteractionItemProps({
+      type: 'bar',
+      seriesId: id,
+      dataIndex
+    }), {
+      className: classes.root
+    }),
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, (0, _extends2.default)({}, barProps));
 }

package/BarChart/BarPlot.d.ts

@@ -1,2 +1,15 @@
 import * as React from 'react';
-export declare function BarPlot(): React.JSX.Element | null;
+import { BarElementProps } from './BarElement';
+export interface BarPlotSlotsComponent {
+    bar?: React.JSXElementConstructor<BarElementProps>;
+}
+export interface BarPlotSlotComponentProps {
+    bar?: Partial<BarElementProps>;
+}
+export interface BarPlotProps extends Pick<BarElementProps, 'slots' | 'slotProps'> {
+}
+declare function BarPlot(props: BarPlotProps): React.JSX.Element | null;
+declare namespace BarPlot {
+    var propTypes: any;
+}
+export { BarPlot };

package/BarChart/BarPlot.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BarPlot = BarPlot;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _BarElement = require("./BarElement");
@@ -38,7 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     offset
   };
 }
-function BarPlot() {
+function BarPlot(props) {
   const seriesData = React.useContext(_SeriesContextProvider.SeriesContext).bar;
   const axisData = React.useContext(_CartesianContextProvider.CartesianContext);
   if (seriesData === undefined) {
@@ -93,7 +96,7 @@ function BarPlot() {
         return stackedData.map((values, dataIndex) => {
           const baseline = Math.min(...values);
           const value = Math.max(...values);
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
             id: seriesId,
             dataIndex: dataIndex,
             x: xScale(xAxis[xAxisKey].data?.[dataIndex]) + groupIndex * (barWidth + offset),
@@ -102,9 +105,25 @@ function BarPlot() {
             width: barWidth,
             color: color,
             highlightScope: series[seriesId].highlightScope
-          }, `${seriesId}-${dataIndex}`);
+          }, props), `${seriesId}-${dataIndex}`);
         });
       });
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? BarPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object
+} : void 0;

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.11.1
+
+_Aug 11, 2023_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Add theme augmentation to `@mui/x-tree-view`
+- 📈 Enable charts customization using `slot` and `slotProps` props
+- 🌍 Improve Finnish (fi-FI) and Icelandic (is-IS) locales on the pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.11.1`
+
+- [DataGrid] `getCellAggregationResult`: Handle `null` `rowNode` case (#9915) @romgrk
+
+#### `@mui/x-data-grid-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-data-grid@6.11.1`.
+
+#### `@mui/x-data-grid-premium@6.11.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link)
+
+Same changes as in `@mui/x-data-grid-pro@6.11.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.11.1`
+
+- [fields] Use `numeric` `inputmode` instead of `tel` (#9918) @LukasTy
+- [pickers] Always respect locale when formatting meridiem (#9979) @flaviendelangle
+- [pickers] Call `onChange` when selecting a shortcut with `changeImportance="set"` (#9974) @flaviendelangle
+- [pickers] Refactor `themeAugmentation` `styleOverrides` (#9978) @LukasTy
+- [l10n] Improve Finnish (fi-FI) locale (#9795) @kurkle
+- [l10n] Improve Icelandic (is-IS) locale (#9639) @magnimarels
+
+#### `@mui/x-date-pickers-pro@6.11.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link)
+
+Same changes as in `@mui/x-date-pickers@6.11.1`.
+
+### Charts / `@mui/x-charts@v6.0.0-alpha.7`
+
+- [charts] Fix label and tick alignment (#9952) @LukasTy
+- [charts] Remove not functional component `styleOverrides` (#9996) @LukasTy
+- [charts] Set custom ticks number (#9922) @alexfauquette
+- [charts] Use `slot`/`slotProps` for customization (#9744) @alexfauquette
+- [charts] Extend cheerful fiesta palette (#9980) @noraleonte
+
+### Tree View / `@mui/x-tree-view@v6.0.0-alpha.1`
+
+- [TreeView] Add theme augmentation (#9967) @flaviendelangle
+
+### Docs
+
+- [docs] Clarify the `shouldDisableClock` migration code options (#9920) @LukasTy
+
+### Core
+
+- [core] Port GitHub workflow for ensuring triage label is present (#9924) @DanailH
+- [docs-infra] Fix the import samples in Api pages (#9898) @alexfauquette
+
 ## 6.11.0
 
 _Aug 4, 2023_

package/ChartsAxis/ChartsAxis.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
+import { ChartsAxisSlotComponentProps, ChartsAxisSlotsComponent, ChartsXAxisProps, ChartsYAxisProps } from '../models/axis';
 export interface ChartsAxisProps {
     /**
      * Indicate which axis to display the top of the charts.
@@ -25,6 +25,16 @@ export interface ChartsAxisProps {
      * @default null
      */
     rightAxis?: null | string | ChartsYAxisProps;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: ChartsAxisSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: ChartsAxisSlotComponentProps;
 }
 declare function ChartsAxis(props: ChartsAxisProps): React.JSX.Element;
 declare namespace ChartsAxis {

package/ChartsAxis/ChartsAxis.js

@@ -23,12 +23,23 @@ const getAxisId = propsValue => {
   }
   return propsValue;
 };
+const mergeProps = (axisConfig, slots, slotProps) => {
+  return typeof axisConfig === 'object' ? (0, _extends2.default)({}, axisConfig, {
+    slots: (0, _extends2.default)({}, slots, axisConfig?.slots),
+    slotProps: (0, _extends2.default)({}, slotProps, axisConfig?.slotProps)
+  }) : {
+    slots,
+    slotProps
+  };
+};
 function ChartsAxis(props) {
   const {
     topAxis,
     leftAxis,
     rightAxis,
-    bottomAxis
+    bottomAxis,
+    slots,
+    slotProps
   } = props;
   const {
     xAxis,
@@ -56,20 +67,24 @@ function ChartsAxis(props) {
   if (bottomId !== null && !xAxis[bottomId]) {
     throw Error(`MUI: id used for bottom axis "${bottomId}" is not defined`);
   }
+  const topAxisProps = mergeProps(topAxis, slots, slotProps);
+  const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);
+  const leftAxisProps = mergeProps(leftAxis, slots, slotProps);
+  const rightAxisProps = mergeProps(rightAxis, slots, slotProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [topId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({
+    children: [topId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({}, topAxisProps, {
       position: "top",
       axisId: topId
-    }, typeof topAxis === 'object' ? topAxis : {})), bottomId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({
+    })), bottomId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXAxis.ChartsXAxis, (0, _extends2.default)({}, bottomAxisProps, {
       position: "bottom",
       axisId: bottomId
-    }, typeof bottomAxis === 'object' ? bottomAxis : {})), leftId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({
+    })), leftId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({}, leftAxisProps, {
       position: "left",
       axisId: leftId
-    }, typeof leftAxis === 'object' ? leftAxis : {})), rightId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({
+    })), rightId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsYAxis.ChartsYAxis, (0, _extends2.default)({}, rightAxisProps, {
       position: "right",
       axisId: rightId
-    }, typeof rightAxis === 'object' ? rightAxis : {}))]
+    }))]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
@@ -91,8 +106,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -109,8 +129,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
   /**
@@ -127,10 +152,25 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'right']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
@@ -145,8 +185,13 @@ process.env.NODE_ENV !== "production" ? ChartsAxis.propTypes = {
     label: _propTypes.default.string,
     labelFontSize: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'top']),
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     tickFontSize: _propTypes.default.number,
+    tickMaxStep: _propTypes.default.number,
+    tickMinStep: _propTypes.default.number,
+    tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string])
 } : void 0;

package/ChartsLegend/ChartsLegend.d.ts

@@ -2,9 +2,16 @@ import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { DrawingArea } from '../context/DrawingProvider';
 import { AnchorPosition, SizingParams } from './utils';
+import { FormattedSeries } from '../context/SeriesContextProvider';
 import { ChartsLegendClasses } from './chartsLegendClasses';
 import { DefaultizedProps } from '../models/helpers';
-import { ChartSeriesDefaultized } from '../models/seriesType/config';
+import { ChartSeriesDefaultized, LegendParams } from '../models/seriesType/config';
+export interface ChartsLegendSlotsComponent {
+    legend?: React.JSXElementConstructor<LegendRendererProps>;
+}
+export interface ChartsLegendSlotComponentProps {
+    legend?: Partial<LegendRendererProps>;
+}
 export type ChartsLegendProps = {
     position?: AnchorPosition;
     offset?: Partial<{
@@ -19,6 +26,16 @@ export type ChartsLegendProps = {
      * Set to true to hide the legend.
      */
     hidden?: boolean;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: ChartsLegendSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: ChartsLegendSlotComponentProps;
 } & SizingParams;
 type DefaultizedChartsLegendProps = DefaultizedProps<ChartsLegendProps, 'direction' | 'position'>;
 type SeriesLegendOwnerState = ChartSeriesDefaultized<any> & Pick<DefaultizedChartsLegendProps, 'direction'> & {
@@ -44,5 +61,11 @@ export declare const ChartsLegendMark: import("@emotion/styled").StyledComponent
     };
 }, 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 function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element | null;
+export interface LegendRendererProps extends Omit<DefaultizedChartsLegendProps, 'slots' | 'slotProps'> {
+    series: FormattedSeries;
+    seriesToDisplay: LegendParams[];
+    drawingArea: DrawingArea;
+    classes: Record<'label' | 'mark' | 'series' | 'root', string>;
+}
+export declare function ChartsLegend(inProps: ChartsLegendProps): React.JSX.Element;
 export {};