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

package/modern/ScatterChart/ScatterPlot.js

@@ -1,9 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { Scatter } from './Scatter';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function ScatterPlot() {
+function ScatterPlot(props) {
+  const {
+    slots,
+    slotProps
+  } = props;
   const seriesData = React.useContext(SeriesContext).scatter;
   const axisData = React.useContext(CartesianContext);
   if (seriesData === undefined) {
@@ -21,6 +27,7 @@ export function ScatterPlot() {
   } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
+  const ScatterItems = slots?.scatter ?? Scatter;
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesOrder.map(seriesId => {
       const {
@@ -32,13 +39,30 @@ export function ScatterPlot() {
       } = series[seriesId];
       const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
       const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
-      return /*#__PURE__*/_jsx(Scatter, {
+      return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,
         color: color,
         markerSize: markerSize ?? 4,
         series: series[seriesId]
-      }, id);
+      }, slotProps?.scatter), id);
     })
   });
-}
+}
+process.env.NODE_ENV !== "production" ? ScatterPlot.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.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object
+} : void 0;
+export { ScatterPlot };

package/modern/SparkLineChart/SparkLineChart.js

@@ -0,0 +1,210 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { BarPlot } from '../BarChart';
+import { LinePlot, MarkPlot, AreaPlot, markElementClasses } from '../LineChart';
+import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
+import { DEFAULT_X_AXIS_KEY } from '../constants';
+import { ChartsTooltip } from '../ChartsTooltip';
+import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SparkLineMarkPlot = styled(MarkPlot)({
+  [`& .${markElementClasses.root}`]: {
+    display: 'none',
+    [`&.${markElementClasses.highlighted}`]: {
+      display: 'inherit'
+    }
+  }
+});
+const SPARKLINE_DEFAULT_MARGIN = {
+  top: 5,
+  bottom: 5,
+  left: 5,
+  right: 5
+};
+const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(props, ref) {
+  const {
+    xAxis,
+    width,
+    height,
+    margin = SPARKLINE_DEFAULT_MARGIN,
+    colors,
+    sx,
+    showTooltip,
+    tooltip,
+    showHighlight,
+    axisHighlight: inAxisHighlight,
+    children,
+    slots,
+    slotProps,
+    data,
+    plotType = 'line',
+    valueFormatter = v => v.toString(),
+    area,
+    curve = 'linear'
+  } = props;
+  const defaultXHighlight = showHighlight && plotType === 'bar' ? {
+    x: 'band'
+  } : {
+    x: 'none'
+  };
+  const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+    ref: ref,
+    series: [_extends({
+      type: plotType,
+      data,
+      valueFormatter
+    }, plotType === 'bar' ? {} : {
+      area,
+      curve
+    })],
+    width: width,
+    height: height,
+    margin: margin,
+    xAxis: [_extends({
+      id: DEFAULT_X_AXIS_KEY,
+      scaleType: plotType === 'bar' ? 'band' : 'linear',
+      data: Array.from({
+        length: data.length
+      }, (_, index) => index),
+      hideTooltip: xAxis === undefined
+    }, xAxis)],
+    colors: colors,
+    sx: sx,
+    disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    children: [plotType === 'bar' && /*#__PURE__*/_jsx(BarPlot, {
+      slots: slots,
+      slotProps: slotProps
+    }), plotType === 'line' && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(AreaPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), /*#__PURE__*/_jsx(LinePlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), showHighlight && /*#__PURE__*/_jsx(SparkLineMarkPlot, {})]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+  });
+});
+process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Set to `true` to fill spark line area.
+   * Has no effect if plotType='bar'.
+   * @default false
+   */
+  area: PropTypes.bool,
+  axisHighlight: PropTypes.shape({
+    x: PropTypes.oneOf(['band', 'line', 'none']),
+    y: PropTypes.oneOf(['line', 'none'])
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /**
+   * Color palette used to colorize multiple series.
+   */
+  colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
+  /**
+   * @default 'linear'
+   */
+  curve: PropTypes.oneOf(['catmullRom', 'linear', 'monotoneX', 'monotoneY', 'natural', 'step', 'stepAfter', 'stepBefore']),
+  /**
+   * Data to plot.
+   */
+  data: PropTypes.arrayOf(PropTypes.number).isRequired,
+  dataset: PropTypes.arrayOf(PropTypes.object),
+  desc: PropTypes.string,
+  disableAxisListener: PropTypes.bool,
+  height: PropTypes.number,
+  margin: PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  }),
+  /**
+   * Type of plot used.
+   * @default 'line'
+   */
+  plotType: PropTypes.oneOf(['bar', 'line']),
+  /**
+   * Set to `true` to highlight the value.
+   * With line, it shows a point.
+   * With bar, it shows a highlight band.
+   * @default false
+   */
+  showHighlight: PropTypes.bool,
+  /**
+   * Set to `true` to enable the tooltip in the sparkline.
+   * @default false
+   */
+  showTooltip: PropTypes.bool,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  title: PropTypes.string,
+  tooltip: PropTypes.shape({
+    axisContent: PropTypes.elementType,
+    classes: PropTypes.object,
+    itemContent: PropTypes.elementType,
+    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
+  }),
+  /**
+   * Formatter used by the tooltip.
+   * @param {number} value The value to format.
+   * @returns {string} the formatted value.
+   */
+  valueFormatter: PropTypes.func,
+  viewBox: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number
+  }),
+  width: PropTypes.number,
+  /**
+   * The xAxis configuration.
+   * Notice it is a single configuration object, not an array of configuration.
+   */
+  xAxis: PropTypes.shape({
+    axisId: PropTypes.string,
+    classes: PropTypes.object,
+    data: PropTypes.array,
+    dataKey: PropTypes.string,
+    disableLine: PropTypes.bool,
+    disableTicks: PropTypes.bool,
+    fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
+    id: PropTypes.string,
+    label: PropTypes.string,
+    labelFontSize: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+    scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
+    stroke: PropTypes.string,
+    tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
+    tickSize: PropTypes.number,
+    valueFormatter: PropTypes.func
+  })
+} : void 0;
+export { SparkLineChart };

package/modern/SparkLineChart/index.js

@@ -0,0 +1 @@
+export { SparkLineChart } from './SparkLineChart';

package/modern/colorPalettes/colorPalettes.js

@@ -4,6 +4,6 @@ export const blueberryTwilightPalette = mode => mode === 'dark' ? blueberryTwili
 export const mangoFusionPaletteLight = ['#173A5E', '#00A3A0', '#C91B63', '#EF5350', '#FFA726', '#B800D8', '#60009B', '#2E96FF', '#2731C8', '#03008D'];
 export const mangoFusionPaletteDark = ['#41698F', '#19D0CD', '#DE196B', '#FC5F5C', '#FFD771', '#DA00FF', '#9001CB', '#72CCFF', '#2E96FF', '#3B48E0'];
 export const mangoFusionPalette = mode => mode === 'dark' ? mangoFusionPaletteDark : mangoFusionPaletteLight;
-export const cheerfulFiestaPaletteDark = ['#0072E6', '#66B2FF', '#FFB017', '#1F94AD', '#FF3143', '#FF6C63'];
-export const cheerfulFiestaPaletteLight = ['#0059B2', '#2E96FF', '#EA8C00', '#1F94AD', '#C82634', '#FF3143'];
+export const cheerfulFiestaPaletteDark = ['#0059B2', '#2E96FF', '#FFC24C', '#FF9F0E', '#F38200', '#2ABFDE', '#1F94AD', '#BD2C38', '#FF3143', '#FF8282'];
+export const cheerfulFiestaPaletteLight = ['#003A75', '#007FFF', '#FFC24C', '#FF9D09', '#CA6C00', '#127D94', '#1F94AD', '#C82634', '#FF3143', '#FF7E7E'];
 export const cheerfulFiestaPalette = mode => mode === 'dark' ? cheerfulFiestaPaletteDark : cheerfulFiestaPaletteLight;

package/modern/context/CartesianContextProvider.js

@@ -32,12 +32,37 @@ export const CartesianContext = /*#__PURE__*/React.createContext({
   yAxisIds: []
 });
 function CartesianContextProvider({
-  xAxis,
-  yAxis,
+  xAxis: inXAxis,
+  yAxis: inYAxis,
+  dataset,
   children
 }) {
   const formattedSeries = React.useContext(SeriesContext);
   const drawingArea = React.useContext(DrawingContext);
+  const xAxis = React.useMemo(() => inXAxis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI: x-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inXAxis, dataset]);
+  const yAxis = React.useMemo(() => inYAxis?.map(axisConfig => {
+    const dataKey = axisConfig.dataKey;
+    if (dataKey === undefined || axisConfig.data !== undefined) {
+      return axisConfig;
+    }
+    if (dataset === undefined) {
+      throw Error('MUI: y-axis uses `dataKey` but no `dataset` is provided.');
+    }
+    return _extends({}, axisConfig, {
+      data: dataset.map(d => d[dataKey])
+    });
+  }), [inYAxis, dataset]);
   const value = React.useMemo(() => {
     const axisExtremumCallback = (acc, chartType, axis, getters, isDefaultAxis) => {
       const getter = getters[chartType];
@@ -98,7 +123,8 @@ function CartesianContextProvider({
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = getTicksNumber(_extends({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -145,7 +171,8 @@ function CartesianContextProvider({
       const scaleType = axis.scaleType ?? 'linear';
       const extremums = [axis.min ?? minData, axis.max ?? maxData];
       const ticksNumber = getTicksNumber(_extends({}, axis, {
-        range
+        range,
+        domain: extremums
       }));
       const niceScale = getScale(scaleType, extremums, range).nice(ticksNumber);
       const niceDomain = niceScale.domain();
@@ -180,48 +207,57 @@ process.env.NODE_ENV !== "production" ? CartesianContextProvider.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   children: PropTypes.node,
+  dataset: PropTypes.arrayOf(PropTypes.object),
   xAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
     data: PropTypes.array,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   })),
   yAxis: PropTypes.arrayOf(PropTypes.shape({
     axisId: PropTypes.string,
     classes: PropTypes.object,
     data: PropTypes.array,
+    dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     fill: PropTypes.string,
+    hideTooltip: PropTypes.bool,
     id: PropTypes.string,
     label: PropTypes.string,
     labelFontSize: PropTypes.number,
-    max: PropTypes.number,
-    maxTicks: PropTypes.number,
-    min: PropTypes.number,
-    minTicks: PropTypes.number,
+    max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
     position: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
     scaleType: PropTypes.oneOf(['band', 'linear', 'log', 'point', 'pow', 'sqrt', 'time', 'utc']),
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     stroke: PropTypes.string,
     tickFontSize: PropTypes.number,
+    tickMaxStep: PropTypes.number,
+    tickMinStep: PropTypes.number,
+    tickNumber: PropTypes.number,
     tickSize: PropTypes.number,
-    tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func
   }))
 } : void 0;

package/modern/context/SeriesContextProvider.js

@@ -15,6 +15,7 @@ const seriesTypeFormatter = {
   line: lineSeriesFormatter,
   pie: pieSeriesFormatter
 };
+
 /**
  * This methods is the interface between what the developer is providing and what components receives
  * To simplify the components behaviors, it groups series by type, such that LinePlots props are not updated if some line data are modified
@@ -23,7 +24,7 @@ const seriesTypeFormatter = {
  * @param colors The color palette used to defaultize series colors
  * @returns An object structuring all the series by type.
  */
-const formatSeries = (series, colors) => {
+const formatSeries = (series, colors, dataset) => {
   // Group series by type
   const seriesGroups = {};
   series.forEach((seriesData, seriesIndex) => {
@@ -49,18 +50,19 @@ const formatSeries = (series, colors) => {
   // Apply formater on a type group
   Object.keys(seriesTypeFormatter).forEach(type => {
     if (seriesGroups[type] !== undefined) {
-      formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type]) ?? seriesGroups[type];
+      formattedSeries[type] = seriesTypeFormatter[type]?.(seriesGroups[type], dataset) ?? seriesGroups[type];
     }
   });
   return formattedSeries;
 };
 export function SeriesContextProvider({
   series,
+  dataset,
   colors = blueberryTwilightPalette,
   children
 }) {
   const theme = useTheme();
-  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors), [series, colors, theme.palette.mode]);
+  const formattedSeries = React.useMemo(() => formatSeries(series, typeof colors === 'function' ? colors(theme.palette.mode) : colors, dataset), [series, colors, theme.palette.mode, dataset]);
   return /*#__PURE__*/_jsx(SeriesContext.Provider, {
     value: formattedSeries,
     children: children

package/modern/hooks/useTicks.js

@@ -2,13 +2,16 @@ import * as React from 'react';
 import { isBandScale } from '../internals/isBandScale';
 export function getTicksNumber(params) {
   const {
-    maxTicks = 999,
-    minTicks = 2,
-    tickSpacing = 50,
-    range
+    tickMaxStep,
+    tickMinStep,
+    tickNumber,
+    range,
+    domain
   } = params;
-  const estimatedTickNumber = Math.floor(Math.abs(range[1] - range[0]) / tickSpacing);
-  return Math.min(maxTicks, Math.max(minTicks, estimatedTickNumber));
+  const maxTicks = tickMinStep === undefined ? 999 : Math.floor(Math.abs(domain[1] - domain[0]) / tickMinStep);
+  const minTicks = tickMaxStep === undefined ? 2 : Math.ceil(Math.abs(domain[1] - domain[0]) / tickMaxStep);
+  const defaultizedTickNumber = tickNumber ?? Math.floor(Math.abs(range[1] - range[0]) / 50);
+  return Math.min(maxTicks, Math.max(minTicks, defaultizedTickNumber));
 }
 function useTicks(options) {
   const {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v6.0.0-alpha.5
+ * @mui/x-charts v6.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -20,5 +20,6 @@ export * from './BarChart';
 export * from './LineChart';
 export * from './PieChart';
 export * from './ScatterChart';
+export * from './SparkLineChart';
 export * from './ChartContainer';
 export * from './ResponsiveChartContainer';

package/modern/internals/components/AxisSharedComponents.js

@@ -8,39 +8,39 @@ export const AxisRoot = styled('g', {
 })({
   [`&.${axisClasses.directionY}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'middle'
+      dominantBaseline: 'middle'
     },
     [`.${axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'auto',
       textAnchor: 'middle'
     }
   },
   [`&.${axisClasses.left}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'end'
     }
   },
   [`&.${axisClasses.right}`]: {
     [`.${axisClasses.tickLabel}`]: {
-      alignmentBaseline: 'central',
+      dominantBaseline: 'central',
       textAnchor: 'start'
     }
   },
   [`&.${axisClasses.bottom}`]: {
     [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      alignmentBaseline: 'hanging',
+      dominantBaseline: 'hanging',
       textAnchor: 'middle'
     }
   },
   [`&.${axisClasses.top}`]: {
     [`.${axisClasses.tickLabel}, .${axisClasses.label}`]: {
-      alignmentBaseline: 'baseline',
+      dominantBaseline: 'baseline',
       textAnchor: 'middle'
     }
   }
 });
-export const Line = styled('line', {
+export const ChartsLine = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Line',
   overridesResolver: (props, styles) => styles.line
@@ -51,7 +51,7 @@ export const Line = styled('line', {
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
-export const Tick = styled('line', {
+export const ChartsTick = styled('line', {
   name: 'MuiChartsAxis',
   slot: 'Tick',
   overridesResolver: (props, styles) => styles.tick
@@ -61,7 +61,7 @@ export const Tick = styled('line', {
   stroke: theme.palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
-export const TickLabel = styled('text', {
+export const ChartsTickLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'TickLabel',
   overridesResolver: (props, styles) => styles.tickLabel
@@ -70,7 +70,7 @@ export const TickLabel = styled('text', {
 }) => _extends({}, theme.typography.caption, {
   fill: theme.palette.text.primary
 }));
-export const Label = styled('text', {
+export const ChartsLabel = styled('text', {
   name: 'MuiChartsAxis',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label

package/modern/models/index.js

@@ -1 +1,3 @@
-export * from './seriesType';
+export * from './seriesType';
+export * from './layout';
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.7",
   "description": "The community edition of the charts components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.6",
-    "clsx": "^1.2.1",
+    "clsx": "^2.0.0",
     "d3-color": "^3.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
@@ -52,10 +52,12 @@
   },
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "require": "./index.js",
       "import": "./esm/index.js"
     },
     "./*": {
+      "types": "./*/index.d.ts",
       "require": "./*",
       "import": "./esm/*"
     }

package/themeAugmentation/components.d.ts

@@ -7,19 +7,15 @@ export interface ChartsComponents {
   };
   MuiChartsXAxis?: {
     defaultProps?: ComponentsProps['MuiChartsXAxis'];
-    styleOverrides?: ComponentsOverrides['MuiChartsXAxis'];
   };
   MuiChartsYAxis?: {
     defaultProps?: ComponentsProps['MuiChartsYAxis'];
-    styleOverrides?: ComponentsOverrides['MuiChartsYAxis'];
   };
   MuiChartsAxisHighlight?: {
     defaultProps?: ComponentsProps['MuiChartsAxisHighlight'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsAxisHighlight'];
   };
   MuiChartsClipPath?: {
     defaultProps?: ComponentsProps['MuiChartsClipPath'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsClipPath'];
   };
   MuiChartsLegend?: {
     defaultProps?: ComponentsProps['MuiChartsLegend'];
@@ -27,15 +23,12 @@ export interface ChartsComponents {
   };
   MuiChartsTooltip?: {
     defaultProps?: ComponentsProps['MuiChartsTooltip'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsTooltip'];
   };
   MuiChartsSurface?: {
     defaultProps?: ComponentsProps['MuiChartsSurface'];
-    styleOverrides?: never; // ComponentsOverrides['MuiChartsSurface'];
   };
   MuiBarChart?: {
     defaultProps?: ComponentsProps['MuiBarChart'];
-    styleOverrides?: never; // ComponentsOverrides['MuiBarChart'];
   };
   MuiBarElement?: {
     defaultProps?: ComponentsProps['MuiBarElement'];
@@ -43,7 +36,6 @@ export interface ChartsComponents {
   };
   MuiLineChart?: {
     defaultProps?: ComponentsProps['MuiLineChart'];
-    styleOverrides?: never; // ComponentsOverrides['MuiLineChart'];
   };
   MuiAreaElement?: {
     defaultProps?: ComponentsProps['MuiAreaElement'];
@@ -59,11 +51,9 @@ export interface ChartsComponents {
   };
   MuiScatterChart?: {
     defaultProps?: ComponentsProps['MuiScatterChart'];
-    styleOverrides?: never; // ComponentsOverrides['MuiScatterChart'];
   };
   MuiScatter?: {
     defaultProps?: ComponentsProps['MuiScatter'];
-    styleOverrides?: never; // ComponentsOverrides['MuiScatter'];
   };
 }
 

package/themeAugmentation/overrides.d.ts

@@ -6,8 +6,6 @@ import { AreaElementClassKey, LineElementClassKey, MarkElementClassKey } from '.
 // prettier-ignore
 export interface PickersComponentNameToClassKey {
   MuiChartsAxis: ChartsAxisClassKey;
-  MuiChartsXAxis:  ChartsAxisClassKey;
-  MuiChartsYAxis:  ChartsAxisClassKey;
   MuiChartsLegend: ChartsLegendClassKey;
 
   // BarChart components