@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.3

package/ScatterChart/BatchScatter.js

@@ -1,12 +1,14 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BatchScatter = BatchScatter;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
@@ -113,7 +115,7 @@ function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
-    classes: inClasses
+    className
   } = props;
   const {
     store
@@ -124,7 +126,7 @@ function BatchScatter(props) {
   const seriesUnfadedItem = store.use(_useChartHighlight.selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
-  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _scatterClasses.useUtilityClasses)(props);
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
@@ -147,7 +149,7 @@ function BatchScatter(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Group, {
-      className: classes.root,
+      className: (0, _clsx.default)(classes.series, className),
       "data-series": series.id,
       "data-faded": isSeriesFaded || undefined,
       "data-highlighted": isSeriesHighlighted || undefined,

package/ScatterChart/BatchScatter.mjs

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { useUtilityClasses } from "./scatterClasses.mjs";
 import { useChartContext } from "../context/ChartProvider/index.mjs";
@@ -107,7 +108,7 @@ export function BatchScatter(props) {
     yScale,
     color,
     colorGetter,
-    classes: inClasses
+    className
   } = props;
   const {
     store
@@ -118,7 +119,7 @@ export function BatchScatter(props) {
   const seriesUnfadedItem = store.use(selectorChartSeriesUnfadedItem, series.id);
   const highlightedModifier = 1.2;
   const markerSize = series.markerSize * (isSeriesHighlighted ? highlightedModifier : 1);
-  const classes = useUtilityClasses(inClasses);
+  const classes = useUtilityClasses(props);
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
@@ -141,7 +142,7 @@ export function BatchScatter(props) {
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(Group, {
-      className: classes.root,
+      className: clsx(classes.series, className),
       "data-series": series.id,
       "data-faded": isSeriesFaded || undefined,
       "data-highlighted": isSeriesHighlighted || undefined,

package/ScatterChart/FocusedScatterMark.d.mts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function FocusedScatterMark(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/FocusedScatterMark.d.ts

@@ -1,2 +1,5 @@
 import * as React from 'react';
-export declare function FocusedScatterMark(props: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FocusedScatterMark({
+  className,
+  ...props
+}: React.SVGAttributes<SVGRectElement>): import("react/jsx-runtime").JSX.Element | null;

package/ScatterChart/FocusedScatterMark.js

@@ -1,19 +1,27 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusedScatterMark = FocusedScatterMark;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _hooks = require("../hooks");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-function FocusedScatterMark(props) {
+const _excluded = ["className"];
+function FocusedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
   const scatterSeries = (0, _hooks.useScatterSeriesContext)();
@@ -25,6 +33,7 @@ function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
+  const classes = (0, _scatterClasses.useUtilityClasses)();
   if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
@@ -38,6 +47,7 @@ function FocusedScatterMark(props) {
   const y = getYPosition(scatterPoint.y);
   const size = series.markerSize + 3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,

package/ScatterChart/FocusedScatterMark.mjs

@@ -1,12 +1,20 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
 import * as React from 'react';
+import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
 import { getValueToPositionMapper, useScatterSeriesContext, useXAxes, useYAxes } from "../hooks/index.mjs";
+import { useUtilityClasses } from "./scatterClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function FocusedScatterMark(props) {
+export function FocusedScatterMark(_ref) {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const focusedItem = useFocusedItem();
   const scatterSeries = useScatterSeriesContext();
@@ -18,6 +26,7 @@ export function FocusedScatterMark(props) {
     yAxis,
     yAxisIds
   } = useYAxes();
+  const classes = useUtilityClasses();
   if (focusedItem === null || focusedItem.type !== 'scatter' || !scatterSeries) {
     return null;
   }
@@ -31,6 +40,7 @@ export function FocusedScatterMark(props) {
   const y = getYPosition(scatterPoint.y);
   const size = series.markerSize + 3;
   return /*#__PURE__*/_jsx("rect", _extends({
+    className: clsx(classes.focusedMark, className),
     fill: "none",
     stroke: (theme.vars ?? theme).palette.text.primary,
     strokeWidth: 2,

package/ScatterChart/Scatter.d.mts

@@ -3,7 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.mjs";
 import { type D3Scale } from "../models/axis.mjs";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
-import { type ScatterClasses } from "./scatterClasses.mjs";
+import type { ScatterClasses } from "./scatterClasses.mjs";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/ScatterChart/Scatter.d.ts

@@ -3,7 +3,7 @@ import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterM
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
-import { type ScatterClasses } from "./scatterClasses.js";
+import type { ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/ScatterChart/Scatter.js

@@ -11,10 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
-var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../hooks/useItemHighlightStateGetter");
 var _useChartClosestPoint = require("../internals/plugins/featurePlugins/useChartClosestPoint");
 var _ScatterMarker = require("./ScatterMarker");
 var _scatterClasses = require("./scatterClasses");
@@ -49,10 +50,7 @@ function Scatter(props) {
   const store = (0, _useStore.useStore)();
   const isVoronoiEnabled = store.use(_useChartClosestPoint.selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const scatterPlotData = (0, _useScatterPlotData.useScatterPlotData)(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? _ScatterMarker.ScatterMarker;
   const _useSlotProps = (0, _useSlotProps2.default)({
@@ -65,14 +63,18 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
-  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
+  const classes = (0, _scatterClasses.useUtilityClasses)({
+    classes: inClasses
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     "data-series": series.id,
-    className: classes.root,
+    className: classes.series,
     children: scatterPlotData.map(dataPoint => {
-      const isItemHighlighted = isHighlighted(dataPoint);
-      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const highlightState = getHighlightState(dataPoint);
+      const isItemHighlighted = highlightState === 'highlighted';
+      const isItemFaded = highlightState === 'faded';
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
+        className: (0, _clsx.default)(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,

package/ScatterChart/Scatter.mjs

@@ -5,10 +5,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { getInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
 import { useStore } from "../internals/store/useStore.mjs";
-import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.mjs";
+import { useItemHighlightStateGetter } from "../hooks/useItemHighlightStateGetter.mjs";
 import { selectorChartsIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.mjs";
 import { ScatterMarker } from "./ScatterMarker.mjs";
 import { useUtilityClasses } from "./scatterClasses.mjs";
@@ -42,10 +43,7 @@ function Scatter(props) {
   const store = useStore();
   const isVoronoiEnabled = store.use(selectorChartsIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   const scatterPlotData = useScatterPlotData(series, xScale, yScale, instance.isPointInside);
   const Marker = slots?.marker ?? ScatterMarker;
   const _useSlotProps = useSlotProps({
@@ -58,14 +56,18 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
-  const classes = useUtilityClasses(inClasses);
+  const classes = useUtilityClasses({
+    classes: inClasses
+  });
   return /*#__PURE__*/_jsx("g", {
     "data-series": series.id,
-    className: classes.root,
+    className: classes.series,
     children: scatterPlotData.map(dataPoint => {
-      const isItemHighlighted = isHighlighted(dataPoint);
-      const isItemFaded = !isItemHighlighted && isFaded(dataPoint);
+      const highlightState = getHighlightState(dataPoint);
+      const isItemHighlighted = highlightState === 'highlighted';
+      const isItemFaded = highlightState === 'faded';
       return /*#__PURE__*/_jsx(Marker, _extends({
+        className: clsx(classes.marker, markerProps.className),
         dataIndex: dataPoint.dataIndex,
         color: colorGetter(dataPoint.dataIndex),
         isHighlighted: isItemHighlighted,

package/ScatterChart/ScatterChart.js

@@ -120,12 +120,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
    */
   disableVoronoi: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -273,7 +276,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**

package/ScatterChart/ScatterChart.mjs

@@ -113,12 +113,15 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
    */
   disableVoronoi: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -266,7 +269,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**

package/ScatterChart/ScatterPlot.d.mts

@@ -7,7 +7,8 @@ export interface ScatterPlotSlotProps extends ScatterSlotProps {
   scatter?: Partial<ScatterProps>;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
-export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
+export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/ScatterChart/ScatterPlot.d.ts

@@ -7,7 +7,8 @@ export interface ScatterPlotSlotProps extends ScatterSlotProps {
   scatter?: Partial<ScatterProps>;
 }
 export type RendererType = 'svg-single' | 'svg-batch';
-export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick'> {
+export interface ScatterPlotProps extends Pick<ScatterProps, 'onItemClick' | 'classes'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/ScatterChart/ScatterPlot.js

@@ -10,13 +10,21 @@ exports.ScatterPlot = ScatterPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _styles = require("@mui/material/styles");
 var _Scatter = require("./Scatter");
 var _useScatterSeries = require("../hooks/useScatterSeries");
 var _hooks = require("../hooks");
 var _useZAxis = require("../hooks/useZAxis");
 var _seriesConfig = require("./seriesConfig");
 var _BatchScatter = require("./BatchScatter");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const ScatterPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiScatterPlot',
+  slot: 'Root'
+})();
+
 /**
  * Demos:
  *
@@ -32,7 +40,9 @@ function ScatterPlot(props) {
     slots,
     slotProps,
     onItemClick,
-    renderer
+    renderer,
+    className,
+    classes: inClasses
   } = props;
   const seriesData = (0, _useScatterSeries.useScatterSeriesContext)();
   const {
@@ -47,6 +57,9 @@ function ScatterPlot(props) {
     zAxis,
     zAxisIds
   } = (0, _useZAxis.useZAxes)();
+  const classes = (0, _scatterClasses.useUtilityClasses)({
+    classes: inClasses
+  });
   if (seriesData === undefined) {
     return null;
   }
@@ -59,7 +72,8 @@ function ScatterPlot(props) {
   const defaultZAxisId = zAxisIds[0];
   const DefaultScatterItems = renderer === 'svg-batch' ? _BatchScatter.BatchScatter : _Scatter.Scatter;
   const ScatterItems = slots?.scatter ?? DefaultScatterItems;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScatterPlotRoot, {
+    className: (0, _clsx.default)(classes.root, className),
     children: seriesOrder.map(seriesId => {
       const {
         id,

package/ScatterChart/ScatterPlot.mjs

@@ -3,13 +3,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import { Scatter } from "./Scatter.mjs";
 import { useScatterSeriesContext } from "../hooks/useScatterSeries.mjs";
 import { useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useZAxes } from "../hooks/useZAxis.mjs";
 import { scatterSeriesConfig } from "./seriesConfig/index.mjs";
 import { BatchScatter } from "./BatchScatter.mjs";
+import { useUtilityClasses } from "./scatterClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
+const ScatterPlotRoot = styled('g', {
+  name: 'MuiScatterPlot',
+  slot: 'Root'
+})();
+
 /**
  * Demos:
  *
@@ -25,7 +33,9 @@ function ScatterPlot(props) {
     slots,
     slotProps,
     onItemClick,
-    renderer
+    renderer,
+    className,
+    classes: inClasses
   } = props;
   const seriesData = useScatterSeriesContext();
   const {
@@ -40,6 +50,9 @@ function ScatterPlot(props) {
     zAxis,
     zAxisIds
   } = useZAxes();
+  const classes = useUtilityClasses({
+    classes: inClasses
+  });
   if (seriesData === undefined) {
     return null;
   }
@@ -52,7 +65,8 @@ function ScatterPlot(props) {
   const defaultZAxisId = zAxisIds[0];
   const DefaultScatterItems = renderer === 'svg-batch' ? BatchScatter : Scatter;
   const ScatterItems = slots?.scatter ?? DefaultScatterItems;
-  return /*#__PURE__*/_jsx(React.Fragment, {
+  return /*#__PURE__*/_jsx(ScatterPlotRoot, {
+    className: clsx(classes.root, className),
     children: seriesOrder.map(seriesId => {
       const {
         id,

package/ScatterChart/index.d.mts

@@ -5,5 +5,5 @@ export * from "./ScatterMarker.types.mjs";
 export * from "./ScatterMarker.mjs";
 export * from "./FocusedScatterMark.mjs";
 export * from "./ScatterChart.plugins.mjs";
-export type { ScatterClasses } from "./scatterClasses.mjs";
-export { scatterClasses } from "./scatterClasses.mjs";
+export { scatterClasses } from "./scatterClasses.mjs";
+export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.mjs";

package/ScatterChart/index.d.ts

@@ -5,5 +5,5 @@ export * from "./ScatterMarker.types.js";
 export * from "./ScatterMarker.js";
 export * from "./FocusedScatterMark.js";
 export * from "./ScatterChart.plugins.js";
-export type { ScatterClasses } from "./scatterClasses.js";
-export { scatterClasses } from "./scatterClasses.js";
+export { scatterClasses } from "./scatterClasses.js";
+export type { ScatterClassKey, ScatterClasses } from "./scatterClasses.js";

package/ScatterChart/scatterClasses.d.mts

@@ -1,8 +1,20 @@
 export interface ScatterClasses {
-  /** Styles applied to the root element. */
+  /** Styles applied to the scatter plot element. */
   root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
 }
 export type ScatterClassKey = keyof ScatterClasses;
 export declare function getScatterUtilityClass(slot: string): string;
 export declare const scatterClasses: ScatterClasses;
-export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;
+export interface UseUtilityClassesOptions {
+  classes?: Partial<ScatterClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark", string>;

package/ScatterChart/scatterClasses.d.ts

@@ -1,8 +1,20 @@
 export interface ScatterClasses {
-  /** Styles applied to the root element. */
+  /** Styles applied to the scatter plot element. */
   root: string;
+  /** Styles applied to the group surrounding a series' scatter elements. */
+  series: string;
+  /**
+   * Styles applied to an individual scatter marker element.
+   * Not applied when using the `svg-batch` renderer.
+   */
+  marker: string;
+  /** Styles applied to the focused scatter mark element. */
+  focusedMark: string;
 }
 export type ScatterClassKey = keyof ScatterClasses;
 export declare function getScatterUtilityClass(slot: string): string;
 export declare const scatterClasses: ScatterClasses;
-export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;
+export interface UseUtilityClassesOptions {
+  classes?: Partial<ScatterClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "marker" | "series" | "focusedMark", string>;

package/ScatterChart/scatterClasses.js

@@ -12,10 +12,16 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getScatterUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiScatterChart', slot);
 }
-const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root']);
-const useUtilityClasses = classes => {
+const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark']);
+const useUtilityClasses = options => {
+  const {
+    classes
+  } = options ?? {};
   const slots = {
-    root: ['root']
+    root: ['root'],
+    series: ['series'],
+    marker: ['marker'],
+    focusedMark: ['focusedMark']
   };
   return (0, _composeClasses.default)(slots, getScatterUtilityClass, classes);
 };

package/ScatterChart/scatterClasses.mjs

@@ -4,10 +4,16 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getScatterUtilityClass(slot) {
   return generateUtilityClass('MuiScatterChart', slot);
 }
-export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root']);
-export const useUtilityClasses = classes => {
+export const scatterClasses = generateUtilityClasses('MuiScatterChart', ['root', 'series', 'marker', 'focusedMark']);
+export const useUtilityClasses = options => {
+  const {
+    classes
+  } = options ?? {};
   const slots = {
-    root: ['root']
+    root: ['root'],
+    series: ['series'],
+    marker: ['marker'],
+    focusedMark: ['focusedMark']
   };
   return composeClasses(slots, getScatterUtilityClass, classes);
 };

package/SparkLineChart/SparkLineChart.js

@@ -239,11 +239,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   disableClipping: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * If true, the voronoi interaction are ignored.
    */
   disableVoronoi: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -473,7 +476,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**

package/SparkLineChart/SparkLineChart.mjs

@@ -232,11 +232,14 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default false
    */
   disableClipping: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * If true, the voronoi interaction are ignored.
    */
   disableVoronoi: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -466,7 +469,7 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**

package/context/ChartApi.d.mts

@@ -19,4 +19,4 @@ export type PluginsPerSeriesType = {
  * If the chart is being created using composition, the `composition` value can be used.
  * @example ChartApi<'composition'>
  */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
+export type ChartApi<SeriesType extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (SeriesType extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[SeriesType] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;

package/context/ChartApi.d.ts

@@ -19,4 +19,4 @@ export type PluginsPerSeriesType = {
  * If the chart is being created using composition, the `composition` value can be used.
  * @example ChartApi<'composition'>
  */
-export type ChartApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
+export type ChartApi<SeriesType extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (SeriesType extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[SeriesType] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;