@mui/x-charts 8.0.0-alpha.10 → 8.0.0-alpha.11

package/BarChart/BarChart.d.ts

@@ -9,13 +9,12 @@ import { ChartsLegendSlots, ChartsLegendSlotProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
 import { ChartsGridProps } from '../ChartsGrid';
-import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay/ChartsOverlay';
 export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
 export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
-export interface BarChartProps extends Omit<ChartContainerProps<'bar'>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface BarChartProps extends Omit<ChartContainerProps<'bar'>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
     /**
      * The series to display in the bar chart.
      * An array of [[BarSeriesType]] objects.

package/BarChart/BarChart.js

@@ -11,7 +11,6 @@ import { ChartsLegend } from "../ChartsLegend/index.js";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { ChartsClipPath } from "../ChartsClipPath/index.js";
 import { ChartsGrid } from "../ChartsGrid/index.js";
-import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/ChartsOverlay.js";
 import { useBarChartProps } from "./useBarChartProps.js";
 import { ChartDataProvider } from "../ChartDataProvider/index.js";
@@ -39,7 +38,6 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -57,7 +55,7 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+        children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
       }))]
@@ -104,7 +102,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

package/BarChart/BarChart.plugins.d.ts

@@ -0,0 +1,12 @@
+import { UseChartZAxisSignature } from '../internals/plugins/featurePlugins/useChartZAxis';
+import { UseChartCartesianAxisSignature } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
+import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers';
+export type BarChartPluginsSignatures = [
+    UseChartZAxisSignature,
+    UseChartCartesianAxisSignature<'bar'>,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature
+];
+export declare const BAR_CHART_PLUGINS: ConvertSignaturesIntoPlugins<BarChartPluginsSignatures>;

package/BarChart/BarChart.plugins.js

@@ -0,0 +1,5 @@
+import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const BAR_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];

package/BarChart/useBarChartProps.d.ts

@@ -1,7 +1,6 @@
 import type { BarChartProps } from './BarChart';
 import { ChartContainerProps } from '../ChartContainer';
 import { BarPlotProps } from './BarPlot';
-import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsClipPathProps } from '../ChartsClipPath';
 import { ChartsOverlayProps } from '../ChartsOverlay';
@@ -9,6 +8,7 @@ import { ChartsAxisProps } from '../ChartsAxis';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsLegendSlotExtension } from '../ChartsLegend';
 import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import { BarChartPluginsSignatures } from './BarChart.plugins';
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -18,9 +18,8 @@ import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
  */
 export declare const useBarChartProps: (props: BarChartProps) => {
     chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-    chartContainerProps: Omit<ChartContainerProps<"bar">, "plugins">;
+    chartContainerProps: ChartContainerProps<"bar", BarChartPluginsSignatures>;
     barPlotProps: BarPlotProps;
-    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
     gridProps: ChartsGridProps;
     clipPathProps: ChartsClipPathProps;
     clipPathGroupProps: {

package/BarChart/useBarChartProps.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { calculateMargins } from "../internals/calculateMargins.js";
+import { BAR_CHART_PLUGINS } from "./BarChart.plugins.js";
 
 /**
  * A helper function that extracts BarChartProps from the input props
@@ -25,7 +26,6 @@ export const useBarChartProps = props => {
       colors,
       dataset,
       sx,
-      onAxisClick,
       axisHighlight,
       grid,
       topAxis,
@@ -80,9 +80,10 @@ export const useBarChartProps = props => {
     }, defaultAxisConfig)] : undefined),
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    disableAxisListener: slotProps?.tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     className,
-    skipAnimation
+    skipAnimation,
+    plugins: BAR_CHART_PLUGINS
   });
   const barPlotProps = {
     onItemClick,
@@ -91,9 +92,6 @@ export const useBarChartProps = props => {
     borderRadius,
     barLabel
   };
-  const axisClickHandlerProps = {
-    onAxisClick
-  };
   const gridProps = {
     vertical: grid?.vertical,
     horizontal: grid?.horizontal
@@ -135,7 +133,6 @@ export const useBarChartProps = props => {
     chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/CHANGELOG.md

@@ -5,6 +5,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## **8.0.0-alpha.11**
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- `createUseGridApiEventHandler()` is not exported anymore.
+- The `filteredRowsLookup` object of the filter state does not contain `true` values anymore. If the row is filtered out, the value is `false`. Otherwise, the row id is not present in the object.
+  This change only impacts you if you relied on `filteredRowsLookup` to get ids of filtered rows. In this case,use `gridDataRowIdsSelector` selector to get row ids and check `filteredRowsLookup` for `false` values:
+
+  ```diff
+   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
+  +const rowIds = gridDataRowIdsSelector(apiRef);
+  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
+  ```
+
+- The `visibleRowsLookup` state does not contain `true` values anymore. If the row is not visible, the value is `false`. Otherwise, the row id is not present in the object:
+
+  ```diff
+   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
+  -const isRowVisible = visibleRowsLookup[rowId] === true;
+  +const isRowVisible = visibleRowsLookup[rowId] !== false;
+  ```
+
+#### `@mui/x-data-grid@8.0.0-alpha.11`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#15648) @lauri865
+- [DataGrid] Fix loading overlay not in sync with scroll (#16437) @MBilalShafi
+- [DataGrid] Refactor: remove material `MenuList` import (#16444) @romgrk
+- [DataGrid] Refactor: simplify `useGridApiEventHandler()` (#16479) @romgrk
+
+#### `@mui/x-data-grid-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.0.0-alpha.11`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16441) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-alpha.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.11`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16466) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.0.0-alpha.11`, plus:
+
+- [DateRangeCalendar] Support arrow navigation with multiple months rendered (#16363) @flaviendelangle
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16455) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16489) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-alpha.11`
+
+- [charts] Add `color` prop to `Sparkline` and deprecate `colors` (#16477) @bernardobelchior
+- [charts] Make typescript more flexible about plugins and their params (#16478) @alexfauquette
+- [charts] Remove component for axis event listener (#16314) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-alpha.11`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-alpha.11`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-alpha.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-alpha.11`.
+
+### Docs
+
+- [docs] Update charts colors default value (#16484) @bernardobelchior
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16434) @flaviendelangle
+- [code-infra] Update monorepo (#16112) @Janpot
+- [test] Avoid test warning when running on React 18 (#16486) @LukasTy
+- [test] Disable `react-transition-group` transitions in unit testing (#16288) @lauri865
+
 ## 8.0.0-alpha.10
 
 _Jan 30, 2025_
@@ -50,6 +154,7 @@ Following are all team members who have contributed to this release:
   +  },
    });
   ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`.
 
@@ -91,7 +196,7 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.10`.
 
 #### Breaking changes
 
-- The component passed to the `field` slot no longer receives the `ref`,  `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+- The component passed to the `field` slot no longer receives the `ref`, `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
 - The `MuiPickersPopper` theme entry have been renamed `MuiPickerPopper` and some of its props have been removed — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#muipickerspopper)
 
 #### `@mui/x-date-pickers@8.0.0-alpha.10`
@@ -111,7 +216,7 @@ Same changes as in `@mui/x-date-pickers@8.0.0-alpha.10`.
 
 - Replace `legend.position.horizontal` from `"left" | "middle" | "right"` to `"start" | "center" | "end"`.
   This is to align with the CSS values and reflect the RTL ability of the legend component.
-- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from  `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
+- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
 - The `id` property is now optional on the `Pie` and `Scatter` data types.
 
 #### `@mui/x-charts@8.0.0-alpha.10`

package/ChartContainer/ChartContainer.d.ts

@@ -3,8 +3,8 @@ import { ChartSeriesType } from '../models/seriesType/config';
 import { ChartDataProviderProps } from '../ChartDataProvider';
 import { ChartsSurfaceProps } from '../ChartsSurface';
 import { AllPluginSignatures } from '../internals/plugins/allPlugins';
-export interface ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType> extends Omit<ChartDataProviderProps<SeriesType, AllPluginSignatures<SeriesType>>, 'children'>, ChartsSurfaceProps {
-}
+import { ChartAnyPluginSignature } from '../internals/plugins/models';
+export type ChartContainerProps<SeriesType extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<SeriesType>> = Omit<ChartDataProviderProps<SeriesType, TSignatures>, 'children'> & ChartsSurfaceProps;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/ChartContainer/ChartContainer.js

@@ -58,7 +58,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**
@@ -100,6 +100,13 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/ChartContainer/useChartContainerProps.d.ts

@@ -4,11 +4,12 @@ import { ChartDataProviderProps } from '../ChartDataProvider';
 import type { ChartContainerProps } from './ChartContainer';
 import { ChartSeriesType } from '../models/seriesType/config';
 import { AllPluginSignatures } from '../internals/plugins/allPlugins';
-export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType> = {
-    chartDataProviderProps: ChartDataProviderProps<TSeries, AllPluginSignatures<TSeries>>;
+import { ChartAnyPluginSignature } from '../internals/plugins/models/plugin';
+export type UseChartContainerPropsReturnValue<TSeries extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
+    chartDataProviderProps: Omit<ChartDataProviderProps<TSeries, TSignatures>, 'children'>;
     chartsSurfaceProps: ChartsSurfaceProps & {
         ref: React.Ref<SVGSVGElement>;
     };
     children: React.ReactNode;
 };
-export declare const useChartContainerProps: <TSeries extends ChartSeriesType = keyof import("../internals").ChartsSeriesConfig>(props: ChartContainerProps<TSeries>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries>;
+export declare const useChartContainerProps: <TSeries extends ChartSeriesType = keyof import("../internals").ChartsSeriesConfig, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProps<TSeries, TSignatures>, ref: React.Ref<SVGSVGElement>) => UseChartContainerPropsReturnValue<TSeries, TSignatures>;

package/ChartContainer/useChartContainerProps.js

@@ -2,10 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "skipAnimation", "seriesConfig", "plugins"];
 import { ALL_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
-  const {
+  const _ref = props,
+    {
       width,
       height,
       margin,
@@ -14,6 +15,7 @@ export const useChartContainerProps = (props, ref) => {
       colors,
       dataset,
       desc,
+      onAxisClick,
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
@@ -23,14 +25,14 @@ export const useChartContainerProps = (props, ref) => {
       yAxis,
       zAxis,
       skipAnimation,
-      seriesConfig
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+      seriesConfig,
+      plugins
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
     title,
     desc,
     sx,
-    disableAxisListener,
     ref
   }, other);
   const chartDataProviderProps = {
@@ -40,14 +42,16 @@ export const useChartContainerProps = (props, ref) => {
     dataset,
     highlightedItem,
     onHighlightChange,
+    onAxisClick,
     xAxis,
     yAxis,
     zAxis,
     skipAnimation,
     width,
     height,
+    disableAxisListener,
     seriesConfig,
-    plugins: ALL_PLUGINS
+    plugins: plugins ?? ALL_PLUGINS
   };
   return {
     chartDataProviderProps,

package/ChartDataProvider/ChartDataProvider.js

@@ -55,9 +55,12 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   children: PropTypes.node,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.any,
+  /**
+   * An array of objects that can be used to populate series and axes data using their `dataKey` property.
+   */
   dataset: PropTypes.any,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.

package/ChartsSurface/ChartsSurface.d.ts

@@ -6,12 +6,6 @@ export interface ChartsSurfaceProps {
     desc?: string;
     sx?: SxProps<Theme>;
     children?: React.ReactNode;
-    /**
-     * If `true`, the charts will not listen to the mouse move event.
-     * It might break interactive features, but will improve performance.
-     * @default false
-     */
-    disableAxisListener?: boolean;
 }
 /**
  * It provides the drawing area for the chart elements.

package/ChartsSurface/ChartsSurface.js

@@ -2,12 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "disableAxisListener", "className", "title", "desc"];
+const _excluded = ["children", "className", "title", "desc"];
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
 import { useSvgRef } from "../hooks/useSvgRef.js";
 import { useSelector } from "../internals/store/useSelector.js";
@@ -65,14 +64,12 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(inPro
   });
   const {
       children,
-      disableAxisListener = false,
       className,
       title,
       desc
     } = themeProps,
     other = _objectWithoutPropertiesLoose(themeProps, _excluded);
   const hasIntrinsicSize = svgHeight > 0 && svgWidth > 0;
-  useAxisEvents(disableAxisListener);
   return /*#__PURE__*/_jsxs(ChartsSurfaceStyles, _extends({
     ownerState: {
       width: propsWidth,
@@ -97,12 +94,6 @@ process.env.NODE_ENV !== "production" ? ChartsSurface.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string
 } : void 0;

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -27,6 +27,7 @@ const ChartsTooltipRoot = styled(Popper, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
+const axisHasData = axis => axis?.data !== undefined && axis.data.length !== 0;
 
 /**
  * Demos:
@@ -51,7 +52,6 @@ function ChartsTooltipContainer(inProps) {
   const svgRef = useSvgRef();
   const pointerType = usePointerType();
   const xAxis = useXAxis();
-  const xAxisHasData = xAxis.data !== undefined && xAxis.data.length !== 0;
   const popperRef = React.useRef(null);
   const positionRef = useLazyRef(() => ({
     x: 0,
@@ -60,7 +60,7 @@ function ChartsTooltipContainer(inProps) {
   const store = useStore();
   const isOpen = useSelector(store,
   // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? xAxisHasData ? selectorChartsInteractionXAxisIsDefined : selectorChartsInteractionYAxisIsDefined : selectorChartsInteractionItemIsDefined);
+  trigger === 'axis' ? axisHasData(xAxis) ? selectorChartsInteractionXAxisIsDefined : selectorChartsInteractionYAxisIsDefined : selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {

package/Gauge/Gauge.js

@@ -73,12 +73,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    */
   cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The end angle (deg).
    * @default 360

package/Gauge/GaugeContainer.js

@@ -103,12 +103,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
   /**
    * The end angle (deg).
    * @default 360

package/LineChart/LineChart.d.ts

@@ -12,13 +12,12 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotProps, ChartsAxisSlots } from '../models/axis';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from './LineHighlightPlot';
 import { ChartsGridProps } from '../ChartsGrid';
-import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from '../ChartsOverlay';
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {
 }
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {
 }
-export interface LineChartProps extends Omit<ChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, ChartsOnAxisClickHandlerProps {
+export interface LineChartProps extends Omit<ChartContainerProps, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
     /**
      * The series to display in the line chart.
      * An array of [[LineSeriesType]] objects.

package/LineChart/LineChart.js

@@ -14,7 +14,6 @@ import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
 import { ChartsClipPath } from "../ChartsClipPath/index.js";
 import { LineHighlightPlot } from "./LineHighlightPlot.js";
 import { ChartsGrid } from "../ChartsGrid/index.js";
-import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
 import { ChartsOverlay } from "../ChartsOverlay/index.js";
 import { useLineChartProps } from "./useLineChartProps.js";
 import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
@@ -40,7 +39,6 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   const {
     chartsWrapperProps,
     chartContainerProps,
-    axisClickHandlerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -62,7 +60,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-        children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+        children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
           "data-drawing-container": true,
@@ -99,7 +97,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
-   * @default blueberryTwilightPalette
+   * @default rainbowSurgePalette
    */
   colors: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
   /**

package/LineChart/LineChart.plugins.d.ts

@@ -0,0 +1,12 @@
+import { UseChartZAxisSignature } from '../internals/plugins/featurePlugins/useChartZAxis';
+import { UseChartCartesianAxisSignature } from '../internals/plugins/featurePlugins/useChartCartesianAxis';
+import { UseChartInteractionSignature } from '../internals/plugins/featurePlugins/useChartInteraction';
+import { UseChartHighlightSignature } from '../internals/plugins/featurePlugins/useChartHighlight';
+import { ConvertSignaturesIntoPlugins } from '../internals/plugins/models/helpers';
+export type LineChartPluginsSignatures = [
+    UseChartZAxisSignature,
+    UseChartCartesianAxisSignature<'line'>,
+    UseChartInteractionSignature,
+    UseChartHighlightSignature
+];
+export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginsSignatures>;

package/LineChart/LineChart.plugins.js

@@ -0,0 +1,5 @@
+import { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";
+import { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight];

package/LineChart/useLineChartProps.d.ts

@@ -3,7 +3,6 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsClipPathProps } from '../ChartsClipPath';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendSlotExtension } from '../ChartsLegend';
-import { ChartsOnAxisClickHandlerProps } from '../ChartsOnAxisClickHandler';
 import { ChartsOverlayProps } from '../ChartsOverlay';
 import { ChartContainerProps } from '../ChartContainer';
 import { AreaPlotProps } from './AreaPlot';
@@ -12,6 +11,7 @@ import { LineHighlightPlotProps } from './LineHighlightPlot';
 import { LinePlotProps } from './LinePlot';
 import { MarkPlotProps } from './MarkPlot';
 import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import { LineChartPluginsSignatures } from './LineChart.plugins';
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -21,8 +21,7 @@ import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
     chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-    chartContainerProps: Omit<ChartContainerProps<"line">, "plugins">;
-    axisClickHandlerProps: ChartsOnAxisClickHandlerProps;
+    chartContainerProps: ChartContainerProps<"line", LineChartPluginsSignatures>;
     gridProps: ChartsGridProps;
     clipPathProps: ChartsClipPathProps;
     clipPathGroupProps: {