@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/hooks/useAxisCoordinates.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getXAxisCoordinates = getXAxisCoordinates;
+exports.getYAxisCoordinates = getYAxisCoordinates;
+exports.useXAxisCoordinates = useXAxisCoordinates;
+exports.useYAxisCoordinates = useYAxisCoordinates;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _useDrawingArea = require("./useDrawingArea");
+var _useAxis = require("./useAxis");
+var _utilities = require("../ChartsXAxis/utilities");
+function getXAxisCoordinates(drawingArea, computedAxis) {
+  const {
+    position,
+    offset,
+    height: axisHeight
+  } = computedAxis;
+  if (position === 'none') {
+    return null;
+  }
+  let top;
+  if (position === 'top') {
+    top = drawingArea.top - axisHeight - offset;
+  } else {
+    top = drawingArea.top + drawingArea.height + offset;
+  }
+  const left = drawingArea.left;
+  const bottom = top + axisHeight;
+  const right = drawingArea.left + drawingArea.width;
+  return {
+    left,
+    top,
+    right,
+    bottom
+  };
+}
+
+/**
+ * Get the coordinates of the given X axis. The coordinates are relative to the SVG's origin.
+ * @param axisId The id of the X axis.
+ * @returns {AxisCoordinates | null} The coordinates of the X axis or null if the axis does not exist or has position: 'none'.
+ */
+function useXAxisCoordinates(axisId) {
+  const {
+    xAxis: xAxes
+  } = (0, _useAxis.useXAxes)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const axis = xAxes[axisId];
+
+  // FIXME(v9): Remove
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsXAxis'
+  });
+  if (!axis) {
+    return null;
+  }
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return getXAxisCoordinates(drawingArea, defaultizedProps);
+}
+function getYAxisCoordinates(drawingArea, computedAxis) {
+  const {
+    position,
+    offset,
+    width: axisWidth
+  } = computedAxis;
+  if (position === 'none') {
+    return null;
+  }
+  let left;
+  if (position === 'right') {
+    left = drawingArea.left + drawingArea.width + offset;
+  } else {
+    left = drawingArea.left - axisWidth - offset;
+  }
+  const top = drawingArea.top;
+  const bottom = drawingArea.top + drawingArea.height;
+  const right = left + axisWidth;
+  return {
+    left,
+    top,
+    right,
+    bottom
+  };
+}
+
+/**
+ * Returns the coordinates of the given Y axis. The coordinates are relative to the SVG's origin.
+ * @param axisId The id of the Y axis.
+ * @returns {AxisCoordinates | null} The coordinates of the Y axis or null if the axis does not exist or has position: 'none'.
+ */
+function useYAxisCoordinates(axisId) {
+  const {
+    yAxis: yAxes
+  } = (0, _useAxis.useYAxes)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const axis = yAxes[axisId];
+
+  // FIXME(v9): Remove
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsYAxis'
+  });
+  if (!axis) {
+    return null;
+  }
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return getYAxisCoordinates(drawingArea, defaultizedProps);
+}

package/hooks/useAxisTicks.d.ts

@@ -0,0 +1,14 @@
+import { type TickItem } from "./useTicks.js";
+import { type AxisId } from "../models/axis.js";
+/**
+ * Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the X axis.
+ */
+export declare function useXAxisTicks(axisId: AxisId): TickItem[];
+/**
+ * Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the Y axis.
+ */
+export declare function useYAxisTicks(axisId: AxisId): TickItem[];

package/hooks/useAxisTicks.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXAxisTicks = useXAxisTicks;
+exports.useYAxisTicks = useYAxisTicks;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _useAxis = require("./useAxis");
+var _useTicks = require("./useTicks");
+var _utilities = require("../ChartsXAxis/utilities");
+/**
+ * Returns the ticks for the given X axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the X axis.
+ */
+function useXAxisTicks(axisId) {
+  const {
+    xAxis: xAxes
+  } = (0, _useAxis.useXAxes)();
+  const axis = xAxes[axisId];
+
+  // FIXME: `useAxisTicksProps` does this, but should we do it here?
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsXAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return (0, _useTicks.useTicks)({
+    scale: axis.scale,
+    tickNumber: axis.tickNumber,
+    valueFormatter: defaultizedProps.valueFormatter,
+    tickInterval: defaultizedProps.tickInterval,
+    tickPlacement: defaultizedProps.tickPlacement,
+    tickLabelPlacement: defaultizedProps.tickLabelPlacement,
+    tickSpacing: defaultizedProps.tickSpacing,
+    direction: 'x',
+    ordinalTimeTicks: 'ordinalTimeTicks' in defaultizedProps ? defaultizedProps.ordinalTimeTicks : undefined
+  });
+}
+
+/**
+ * Returns the ticks for the given Y axis. Ticks outside the drawing area are not included.
+ * The ticks returned from this hook are not grouped, i.e., they don't follow the `groups` prop of the axis.
+ * @param axisId The id of the Y axis.
+ */
+function useYAxisTicks(axisId) {
+  const {
+    yAxis: yAxes
+  } = (0, _useAxis.useYAxes)();
+  const axis = yAxes[axisId];
+
+  // FIXME: `useAxisTicksProps` does this, but should we do it here?
+  // eslint-disable-next-line mui/material-ui-name-matches-component-name
+  const themedProps = (0, _styles.useThemeProps)({
+    props: axis,
+    name: 'MuiChartsYAxis'
+  });
+  const defaultizedProps = (0, _extends2.default)({}, _utilities.defaultProps, themedProps);
+  return (0, _useTicks.useTicks)({
+    scale: axis.scale,
+    tickNumber: axis.tickNumber,
+    valueFormatter: defaultizedProps.valueFormatter,
+    tickInterval: defaultizedProps.tickInterval,
+    tickPlacement: defaultizedProps.tickPlacement,
+    tickLabelPlacement: defaultizedProps.tickLabelPlacement,
+    tickSpacing: defaultizedProps.tickSpacing,
+    direction: 'y',
+    // @ts-expect-error
+    ordinalTimeTicks: defaultizedProps.ordinalTimeTicks
+  });
+}

package/hooks/useChartRootRef.d.ts

@@ -3,4 +3,4 @@ import type * as React from 'react';
  * Get the ref for the root chart element.
  * @returns The root chart element ref.
  */
-export declare function useChartRootRef(): React.RefObject<HTMLDivElement | null>;
+export declare function useChartRootRef<T extends Element = HTMLDivElement>(): React.RefObject<T | null>;

package/hooks/useChartRootRef.js

@@ -11,6 +11,8 @@ var _ChartProvider = require("../context/ChartProvider");
  * @returns The root chart element ref.
  */
 function useChartRootRef() {
-  const context = (0, _ChartProvider.useChartContext)();
-  return context.chartRootRef;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  return instance.chartRootRef;
 }

package/hooks/useInteractionItemProps.d.ts

@@ -3,15 +3,15 @@ import { type SeriesItemIdentifierWithData } from "../models/index.js";
 import type { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import type { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import type { ChartSeriesType } from "../models/seriesType/config.js";
-import type { SeriesItemIdentifier } from "../models/seriesType/index.js";
+import type { SeriesItemIdentifierWithType } from "../models/seriesType/index.js";
 import type { ChartInstance } from "../internals/plugins/models/index.js";
 import type { UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
-export declare const useInteractionItemProps: (data: SeriesItemIdentifierWithData, skip?: boolean) => {
+export declare const useInteractionItemProps: <SeriesType extends ChartSeriesType>(data: SeriesItemIdentifierWithData<SeriesType>, skip?: boolean) => {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;
 };
-export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: SeriesItemIdentifier<ChartSeriesType>): {
+export declare function getInteractionItemProps(instance: ChartInstance<[UseChartInteractionSignature, UseChartHighlightSignature, UseChartTooltipSignature]>, item: SeriesItemIdentifierWithType<ChartSeriesType>): {
   onPointerEnter?: () => void;
   onPointerLeave?: () => void;
   onPointerDown?: (event: React.PointerEvent) => void;

package/hooks/useLegend.d.ts

@@ -1,4 +1,4 @@
-import type { LegendItemParams } from "../ChartsLegend/index.js";
+import type { SeriesLegendItemParams } from "../ChartsLegend/index.js";
 /**
  * Get the legend items to display.
  *
@@ -9,5 +9,5 @@ import type { LegendItemParams } from "../ChartsLegend/index.js";
  * @returns legend data
  */
 export declare function useLegend(): {
-  items: LegendItemParams[];
+  items: SeriesLegendItemParams[];
 };

package/hooks/useLegend.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useLegend = useLegend;
-var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries");
+var _useChartSeriesConfig = require("../internals/plugins/corePlugins/useChartSeriesConfig");
 var _useSeries = require("./useSeries");
 var _useStore = require("../internals/store/useStore");
 function getSeriesToDisplay(series, seriesConfig) {
@@ -27,7 +27,7 @@ function getSeriesToDisplay(series, seriesConfig) {
 function useLegend() {
   const series = (0, _useSeries.useSeries)();
   const store = (0, _useStore.useStore)();
-  const seriesConfig = store.use(_useChartSeries.selectorChartSeriesConfig);
+  const seriesConfig = store.use(_useChartSeriesConfig.selectorChartSeriesConfig);
   return {
     items: getSeriesToDisplay(series, seriesConfig)
   };

package/hooks/useScale.d.ts

@@ -1,15 +1,4 @@
-import { type AxisId, type AxisScaleConfig, type D3Scale, type ScaleName } from "../models/axis.js";
-/**
- * For a given scale return a function that map value to their position.
- * Useful when dealing with specific scale such as band.
- * @param {D3Scale} scale The scale to use
- * @returns {(value: any) => number} A function that map value to their position
- */
-export declare function getValueToPositionMapper<Domain extends {
-  toString(): string;
-} = {
-  toString(): string;
-}, Range = number>(scale: D3Scale<Domain, Range>): (value: any) => number;
+import type { AxisId, AxisScaleConfig, ScaleName } from "../models/axis.js";
 /**
  * Get the X scale.
  *

package/hooks/useScale.js

@@ -4,32 +4,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getValueToPositionMapper = getValueToPositionMapper;
 exports.useRadiusScale = useRadiusScale;
 exports.useRotationScale = useRotationScale;
 exports.useXScale = useXScale;
 exports.useYScale = useYScale;
-var _scaleGuards = require("../internals/scaleGuards");
 var _useAxis = require("./useAxis");
-/**
- * For a given scale return a function that map value to their position.
- * Useful when dealing with specific scale such as band.
- * @param {D3Scale} scale The scale to use
- * @returns {(value: any) => number} A function that map value to their position
- */
-function getValueToPositionMapper(scale) {
-  if ((0, _scaleGuards.isOrdinalScale)(scale)) {
-    return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
-  }
-  const domain = scale.domain();
-
-  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
-  if (domain[0] === domain[1]) {
-    return value => value === domain[0] ? scale(value) : NaN;
-  }
-  return value => scale(value);
-}
-
 /**
  * Get the X scale.
  *

package/hooks/useSvgRef.js

@@ -11,9 +11,8 @@ var _ChartProvider = require("../context/ChartProvider");
  * @returns The SVG ref.
  */
 function useSvgRef() {
-  const context = (0, _ChartProvider.useChartContext)();
-  if (!context) {
-    throw new Error(['MUI X Charts: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartContainer parent component.'].join('\n'));
-  }
-  return context.svgRef;
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  return instance.svgRef;
 }

package/hooks/useTicks.d.ts

@@ -46,13 +46,28 @@ export interface TickParams {
    */
   tickSpacing?: number;
 }
-export type TickItemType = {
+export type TickItem = {
   /**
-   * This property is undefined only if it's the tick closing the last band
+   * The value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
    */
   value?: any;
+  /**
+   * The formatted value of the tick.
+   * It is only `undefined` if it's the tick closing the last band.
+   */
   formattedValue?: string;
+  /**
+   * The offset in pixels relative to the SVG origin.
+   * For an x-axis, it is relative to the left side of the SVG.
+   * For a y-axis, it is relative to the top side of the SVG.
+   */
   offset: number;
+  /**
+   * The offset in pixels relative to the tick position.
+   * For an x-axis, a positive value means the label is shifted to the right of the tick.
+   * For a y-axis, a positive value means the label is shifted downwards from the tick.
+   */
   labelOffset: number;
 };
 /**
@@ -69,8 +84,8 @@ interface GetTicksOptions extends Pick<TickParams, 'tickInterval' | 'tickPlaceme
   isInside: (offset: number) => boolean;
   ordinalTimeTicks?: OrdinalTimeTicks;
 }
-export declare function getTicks(options: GetTicksOptions): TickItemType[];
+export declare function getTicks(options: GetTicksOptions): TickItem[];
 export declare function useTicks(options: Omit<GetTicksOptions, 'isInside'> & {
   direction: 'x' | 'y';
-}): TickItemType[];
+}): TickItem[];
 export {};

package/index.d.ts

@@ -24,8 +24,10 @@ export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
 export * from "./RadarChart/index.js";
 export * from "./ChartsSurface/index.js";
+export { ChartsContainer } from "./ChartsContainer/index.js";
+export type { ChartsContainerProps, ChartsContainerSlots, ChartsContainerSlotProps } from "./ChartsContainer/index.js";
 export { ChartContainer } from "./ChartContainer/index.js";
-export type { ChartContainerProps } from "./ChartContainer/index.js";
+export type { ChartContainerProps, ChartContainerSlots, ChartContainerSlotProps } from "./ChartContainer/index.js";
 export * from "./ChartDataProvider/index.js";
 export * from "./Toolbar/index.js";
 export * from "./ChartsWrapper/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.27.0
+ * @mui/x-charts v9.0.0-alpha.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  ChartsContainer: true,
   ChartContainer: true
 };
 Object.defineProperty(exports, "ChartContainer", {
@@ -19,6 +20,12 @@ Object.defineProperty(exports, "ChartContainer", {
     return _ChartContainer.ChartContainer;
   }
 });
+Object.defineProperty(exports, "ChartsContainer", {
+  enumerable: true,
+  get: function () {
+    return _ChartsContainer.ChartsContainer;
+  }
+});
 var _constants = require("./constants");
 Object.keys(_constants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -331,6 +338,7 @@ Object.keys(_ChartsSurface).forEach(function (key) {
     }
   });
 });
+var _ChartsContainer = require("./ChartsContainer");
 var _ChartContainer = require("./ChartContainer");
 var _ChartDataProvider = require("./ChartDataProvider");
 Object.keys(_ChartDataProvider).forEach(function (key) {

package/internals/commonNextFocusItem.d.ts

@@ -36,4 +36,6 @@ export declare function createGetPreviousSeriesFocusedItem<InSeriesType extends
  * The set of series types compatible with this navigation action.
  */
 compatibleSeriesTypes: Set<OutSeriesType>): (currentItem: SeriesItemIdentifier<InSeriesType> | null, state: StateParameters<InSeriesType>) => ReturnedItem<OutSeriesType>;
+export type ComposableCartesianChartSeriesType = 'bar' | 'line' | 'scatter' | ('rangeBar' extends ChartSeriesType ? 'rangeBar' : never);
+export declare const composableCartesianSeriesTypes: Set<ComposableCartesianChartSeriesType>;
 export {};

package/internals/commonNextFocusItem.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.composableCartesianSeriesTypes = void 0;
 exports.createGetNextIndexFocusedItem = createGetNextIndexFocusedItem;
 exports.createGetNextSeriesFocusedItem = createGetNextSeriesFocusedItem;
 exports.createGetPreviousIndexFocusedItem = createGetPreviousIndexFocusedItem;
 exports.createGetPreviousSeriesFocusedItem = createGetPreviousSeriesFocusedItem;
 var _getPreviousNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getPreviousNonEmptySeries");
 var _getMaxSeriesLength = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getMaxSeriesLength");
-var _useChartSeries = require("./plugins/corePlugins/useChartSeries");
 var _getNextNonEmptySeries = require("./plugins/featurePlugins/useChartKeyboardNavigation/utils/getNextNonEmptySeries");
 var _seriesHasData = require("./seriesHasData");
+var _useChartSeries = require("./plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 function createGetNextIndexFocusedItem(
 /**
  * The set of series types compatible with this navigation action.
@@ -128,4 +129,5 @@ compatibleSeriesTypes) {
       dataIndex
     };
   };
-}
+}
+const composableCartesianSeriesTypes = exports.composableCartesianSeriesTypes = new Set(['bar', 'line', 'scatter', 'rangeBar']);

package/internals/components/WebGLContext.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function useWebGLContext(): WebGL2RenderingContext | null;
+export declare const WebGLProvider: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<React.DetailedHTMLProps<React.CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>>, "ref"> & React.RefAttributes<HTMLCanvasElement>>;

package/internals/components/WebGLContext.js

@@ -0,0 +1,116 @@
+"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.WebGLProvider = void 0;
+exports.useWebGLContext = useWebGLContext;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _hooks = require("../../hooks");
+var _useChartDimensions = require("../plugins/corePlugins/useChartDimensions");
+var _useStore = require("../store/useStore");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children"];
+const WebGLContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") WebGLContext.displayName = "WebGLContext";
+function useWebGLContext() {
+  return React.useContext(WebGLContext);
+}
+const WebGLProvider = exports.WebGLProvider = /*#__PURE__*/React.forwardRef(function WebGLProvider(_ref, ref) {
+  let {
+      children
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const canvasRef = React.useRef(null);
+  const [context, setContext] = React.useState(null);
+  const handleRef = (0, _useForkRef.default)(canvasRef, ref);
+  const chartRoot = (0, _hooks.useChartRootRef)().current;
+  const drawingArea = (0, _hooks.useDrawingArea)();
+  const [, rerender] = React.useReducer(s => s + 1, 0);
+  React.useEffect(() => {
+    /* The chart root isn't available on first render because the ref is only set after mounting the root component. */
+    if (!chartRoot) {
+      rerender();
+    }
+  }, [chartRoot]);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return undefined;
+    }
+    const handleContextLost = event => {
+      // Must prevent default otherwise the context won't be marked as restorable
+      // https://registry.khronos.org/webgl/extensions/WEBGL_lose_context/
+      event.preventDefault();
+      setContext(null);
+    };
+    const initializeContext = () => {
+      const ctx = canvas.getContext('webgl2', {
+        /* Fixes blurry lines when drawing sharp edges */
+        antialias: false,
+        /* Required so we can export the WebGL plot */
+        preserveDrawingBuffer: true
+      });
+      if (!ctx) {
+        return;
+      }
+      setContext(ctx);
+    };
+    canvas.addEventListener('webglcontextlost', handleContextLost);
+    canvas.addEventListener('webglcontextrestored', initializeContext);
+    initializeContext();
+    return () => {
+      canvas.removeEventListener('webglcontextlost', handleContextLost);
+      canvas.removeEventListener('webglcontextrestored', initializeContext);
+    };
+  }, [chartRoot]);
+  if (!chartRoot) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(WebGLContext.Provider, {
+    value: context,
+    children: [/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)(CanvasPositioner, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", (0, _extends2.default)({
+        ref: handleRef
+      }, props, {
+        style: {
+          position: 'relative',
+          left: drawingArea.left,
+          top: drawingArea.top,
+          width: drawingArea.width,
+          height: drawingArea.height
+        }
+      }))
+    }), chartRoot), children]
+  });
+});
+if (process.env.NODE_ENV !== "production") WebGLProvider.displayName = "WebGLProvider";
+function CanvasPositioner({
+  children
+}) {
+  const store = (0, _useStore.useStore)();
+  const svgWidth = store.use(_useChartDimensions.selectorChartSvgWidth);
+  const svgHeight = store.use(_useChartDimensions.selectorChartSvgHeight);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      position: 'relative',
+      pointerEvents: 'none',
+      /* Ensures the canvas occupies the same space as the SVG */
+      gridArea: 'chart',
+      /* This property ensures the canvas renders below the SVG */
+      order: -1,
+      maxWidth: svgWidth,
+      maxHeight: svgHeight,
+      width: '100%',
+      height: '100%'
+    },
+    children: children
+  });
+}

package/internals/consumeSlots.js

@@ -61,7 +61,7 @@ const consumeSlots = (name, slotPropName, options, InComponent) => {
   function ConsumeSlotsInternal(props, ref) {
     const themedProps = (0, _styles.useThemeProps)({
       props,
-      // eslint-disable-next-line material-ui/mui-name-matches-component-name
+      // eslint-disable-next-line mui/material-ui-name-matches-component-name
       name
     });
     const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};

package/internals/consumeThemeProps.js

@@ -60,7 +60,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 const consumeThemeProps = (name, options, InComponent) => /*#__PURE__*/React.forwardRef(function ConsumeThemeInternal(props, ref) {
   const themedProps = (0, _styles.useThemeProps)({
     props,
-    // eslint-disable-next-line material-ui/mui-name-matches-component-name
+    // eslint-disable-next-line mui/material-ui-name-matches-component-name
     name
   });
   const defaultProps = typeof options.defaultProps === 'function' ? options.defaultProps(themedProps) : options.defaultProps ?? {};

package/internals/createCommonKeyboardFocusHandler.d.ts

@@ -0,0 +1,25 @@
+import type { ChartSeriesType } from "../models/seriesType/config.js";
+/**
+ * Create a keyboard focus handler for common use cases where focused item are defined by the series is and data index.
+ */
+export declare function createCommonKeyboardFocusHandler<TSeriesType extends Exclude<ChartSeriesType, 'sankey'>, TInputSeriesType extends Exclude<ChartSeriesType, 'sankey'> = TSeriesType>(outSeriesTypes: Set<TSeriesType>, allowCycles?: boolean): (event: KeyboardEvent) => ((currentItem: import("../index.js").FocusedItemIdentifier<TInputSeriesType> | null, state: {
+  series: {
+    defaultizedSeries: import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").DefaultizedSeriesGroups<TInputSeriesType>;
+    idToType: import("./index.js").SeriesIdToType;
+    dataset?: Readonly<import("./index.js").DatasetType>;
+  };
+}) => {
+  type: TSeriesType;
+  seriesId: import("../index.js").SeriesId;
+  dataIndex: number;
+} | null) | ((currentItem: import("../index.js").SeriesItemIdentifier<TInputSeriesType> | null, state: {
+  series: {
+    defaultizedSeries: import("./plugins/corePlugins/useChartSeries/useChartSeries.types.js").DefaultizedSeriesGroups<TInputSeriesType>;
+    idToType: import("./index.js").SeriesIdToType;
+    dataset?: Readonly<import("./index.js").DatasetType>;
+  };
+}) => {
+  type: TSeriesType;
+  seriesId: import("../index.js").SeriesId;
+  dataIndex: number;
+} | null) | null;