@mui/x-charts-pro 9.8.0 → 9.10.0

package/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import type { AxisId } from '@mui/x-charts/internals';
 import type { RangeButtonValue } from "./rangeButtonValueToZoom.js";
@@ -42,7 +43,7 @@ declare function ChartsToolbarPro({
   rangeButtons,
   rangeButtonsAxisId,
   ...other
-}: ChartsToolbarProProps): import("react/jsx-runtime").JSX.Element | null;
+}: ChartsToolbarProProps): React.JSX.Element | null;
 declare namespace ChartsToolbarPro {
   var propTypes: any;
 }

package/ChartsToolbarPro/Toolbar.types.d.mts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ToolbarPropsOverrides } from '@mui/x-charts/models';
 import type { ChartsToolbarProProps } from "./ChartsToolbarPro.mjs";
 export interface ChartsToolbarProSlots {
@@ -12,5 +13,5 @@ export interface ChartsToolbarProSlotProps {
   /**
    * Props for the toolbar component.
    */
-  toolbar?: Partial<ChartsToolbarProProps> & ToolbarPropsOverrides;
+  toolbar?: WithDataAttributes<Partial<ChartsToolbarProProps> & ToolbarPropsOverrides>;
 }

package/ChartsToolbarPro/Toolbar.types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { ToolbarPropsOverrides } from '@mui/x-charts/models';
 import type { ChartsToolbarProProps } from "./ChartsToolbarPro.js";
 export interface ChartsToolbarProSlots {
@@ -12,5 +13,5 @@ export interface ChartsToolbarProSlotProps {
   /**
    * Props for the toolbar component.
    */
-  toolbar?: Partial<ChartsToolbarProProps> & ToolbarPropsOverrides;
+  toolbar?: WithDataAttributes<Partial<ChartsToolbarProProps> & ToolbarPropsOverrides>;
 }

package/ChartsToolbarPro/internals/ChartsMenu.d.mts

@@ -7,7 +7,7 @@ export interface ChartsMenuProps extends Pick<ChartBasePopperProps, 'className'
   position?: Placement;
   children: React.ReactNode;
 }
-declare function ChartsMenu(props: ChartsMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsMenu(props: ChartsMenuProps): React.JSX.Element;
 declare namespace ChartsMenu {
   var propTypes: any;
 }

package/ChartsToolbarPro/internals/ChartsMenu.d.ts

@@ -7,7 +7,7 @@ export interface ChartsMenuProps extends Pick<ChartBasePopperProps, 'className'
   position?: Placement;
   children: React.ReactNode;
 }
-declare function ChartsMenu(props: ChartsMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartsMenu(props: ChartsMenuProps): React.JSX.Element;
 declare namespace ChartsMenu {
   var propTypes: any;
 }

package/ChartsZoomSlider/ChartsZoomSlider.d.mts

@@ -1,4 +1,5 @@
+import * as React from 'react';
 /**
  * Renders the zoom slider for all x and y axes that have it enabled.
  */
-export declare function ChartsZoomSlider(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsZoomSlider(): React.JSX.Element;

package/ChartsZoomSlider/ChartsZoomSlider.d.ts

@@ -1,4 +1,5 @@
+import * as React from 'react';
 /**
  * Renders the zoom slider for all x and y axes that have it enabled.
  */
-export declare function ChartsZoomSlider(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsZoomSlider(): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId } from '@mui/x-charts/internals';
 interface ChartsZoomSliderProps {
   /**
@@ -16,5 +17,5 @@ interface ChartsZoomSliderProps {
 export declare function ChartsAxisZoomSlider({
   axisDirection,
   axisId
-}: ChartsZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
+}: ChartsZoomSliderProps): React.JSX.Element | null;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSlider.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId } from '@mui/x-charts/internals';
 interface ChartsZoomSliderProps {
   /**
@@ -16,5 +17,5 @@ interface ChartsZoomSliderProps {
 export declare function ChartsAxisZoomSlider({
   axisDirection,
   axisId
-}: ChartsZoomSliderProps): import("react/jsx-runtime").JSX.Element | null;
+}: ChartsZoomSliderProps): React.JSX.Element | null;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, ZoomData } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
@@ -26,4 +27,4 @@ export declare function ChartsAxisZoomSliderActiveTrack({
   onPointerLeave,
   onInteractionStart,
   onInteractionEnd
-}: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderActiveTrackProps): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderActiveTrack.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, ZoomData } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
@@ -26,4 +27,4 @@ export declare function ChartsAxisZoomSliderActiveTrack({
   onPointerLeave,
   onInteractionStart,
   onInteractionEnd
-}: ChartsAxisZoomSliderActiveTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderActiveTrackProps): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, SeriesId } from '@mui/x-charts/internals';
 interface ChartsAxisZoomSliderPreviewProps {
   axisId: AxisId;
@@ -18,5 +19,5 @@ export declare function ChartsAxisZoomSliderPreview({
   reverse,
   seriesIds,
   ...props
-}: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderPreviewProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreview.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, SeriesId } from '@mui/x-charts/internals';
 interface ChartsAxisZoomSliderPreviewProps {
   axisId: AxisId;
@@ -18,5 +19,5 @@ export declare function ChartsAxisZoomSliderPreview({
   reverse,
   seriesIds,
   ...props
-}: ChartsAxisZoomSliderPreviewProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderPreviewProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, SeriesId } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
@@ -10,4 +11,4 @@ export interface ChartsAxisZoomSliderPreviewContentProps {
    */
   seriesIds?: SeriesId[];
 }
-export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderPreviewContent.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { AxisId, SeriesId } from '@mui/x-charts/internals';
 export interface ChartsAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
@@ -10,4 +11,4 @@ export interface ChartsAxisZoomSliderPreviewContentProps {
    */
   seriesIds?: SeriesId[];
 }
-export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChartsAxisZoomSliderPreviewContent(props: ChartsAxisZoomSliderPreviewContentProps): React.JSX.Element;

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.mts

@@ -14,5 +14,5 @@ export declare function ChartsAxisZoomSliderTrack({
   onSelectStart,
   onSelectEnd,
   ...other
-}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderTrackProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsAxisZoomSliderTrack.d.ts

@@ -14,5 +14,5 @@ export declare function ChartsAxisZoomSliderTrack({
   onSelectStart,
   onSelectEnd,
   ...other
-}: ChartsAxisZoomSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsAxisZoomSliderTrackProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsTooltipZoomSliderValue.d.mts

@@ -7,5 +7,5 @@ export declare function ChartsTooltipZoomSliderValue({
   placement,
   modifiers,
   children
-}: ChartsTooltipZoomSliderValueProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsTooltipZoomSliderValueProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/ChartsTooltipZoomSliderValue.d.ts

@@ -7,5 +7,5 @@ export declare function ChartsTooltipZoomSliderValue({
   placement,
   modifiers,
   children
-}: ChartsTooltipZoomSliderValueProps): import("react/jsx-runtime").JSX.Element;
+}: ChartsTooltipZoomSliderValueProps): React.JSX.Element;
 export {};

package/ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.d.mts

@@ -12,4 +12,4 @@ export interface ChartsAxisZoomSliderTrackClasses {
 export type ChartsAxisZoomSliderTrackClassKey = keyof ChartsAxisZoomSliderTrackClasses;
 export declare const chartsAxisZoomSliderTrackClasses: ChartsAxisZoomSliderTrackClasses;
 export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
-export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;
+export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"active" | "background", string>;

package/ChartsZoomSlider/internals/chartsAxisZoomSliderTrackClasses.d.ts

@@ -12,4 +12,4 @@ export interface ChartsAxisZoomSliderTrackClasses {
 export type ChartsAxisZoomSliderTrackClassKey = keyof ChartsAxisZoomSliderTrackClasses;
 export declare const chartsAxisZoomSliderTrackClasses: ChartsAxisZoomSliderTrackClasses;
 export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
-export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;
+export declare const useUtilityClasses: (props: Partial<ChartsAxisZoomSliderActiveTrackProps>) => Record<"active" | "background", string>;

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.d.mts

@@ -5,7 +5,7 @@ interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function AreaPreviewPlot({
   axisId,
   seriesIds
-}: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: AreaPreviewPlotProps): React.JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -5,7 +5,7 @@ interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function AreaPreviewPlot({
   axisId,
   seriesIds
-}: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: AreaPreviewPlotProps): React.JSX.Element;
 export interface PreviewAreaElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/BarPreviewPlot.d.mts

@@ -5,5 +5,5 @@ interface BarPreviewPlotProps extends PreviewPlotProps {
   height: number;
   width: number;
 }
-export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react").JSX.Element;
 export {};

package/ChartsZoomSlider/internals/previews/BarPreviewPlot.d.ts

@@ -5,5 +5,5 @@ interface BarPreviewPlotProps extends PreviewPlotProps {
   height: number;
   width: number;
 }
-export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarPreviewPlot(props: BarPreviewPlotProps): import("react").JSX.Element;
 export {};

package/ChartsZoomSlider/internals/previews/LineAreaPreviewPlot.d.mts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.mjs";
 export declare function LineAreaPreviewPlot({
   axisId,
   seriesIds
-}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: PreviewPlotProps): React.JSX.Element;

package/ChartsZoomSlider/internals/previews/LineAreaPreviewPlot.d.ts

@@ -1,5 +1,6 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.js";
 export declare function LineAreaPreviewPlot({
   axisId,
   seriesIds
-}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: PreviewPlotProps): React.JSX.Element;

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.d.mts

@@ -5,7 +5,7 @@ interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function LinePreviewPlot({
   axisId,
   seriesIds
-}: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: LinePreviewPlotProps): React.JSX.Element;
 export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -5,7 +5,7 @@ interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId' | 'series
 export declare function LinePreviewPlot({
   axisId,
   seriesIds
-}: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;
+}: LinePreviewPlotProps): React.JSX.Element;
 export interface PreviewLineElementProps extends Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   seriesId: SeriesId;
   gradientId?: string;

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.js

@@ -60,5 +60,20 @@ function useLinePreviewData(axisId) {
   const store = (0, _internals.useStore)();
   const xAxes = store.use(_internals.selectorChartPreviewComputedXAxis, axisId);
   const yAxes = store.use(_internals.selectorChartPreviewComputedYAxis, axisId);
-  return (0, _internals.useLinePlotData)(xAxes, yAxes);
+  const zoomOptions = store.use(_internals.selectorChartAxisZoomOptionsLookup, axisId);
+
+  // The preview is a full-range overview, so sample against its own range and width rather than the
+  // active zoom — otherwise the main chart's zoom would change the preview's point density.
+  const samplingOverride = React.useMemo(() => {
+    const range = xAxes[axisId]?.scale.range() ?? [0, 0];
+    return {
+      zoomMap: new Map([[axisId, {
+        axisId,
+        start: zoomOptions.minStart,
+        end: zoomOptions.maxEnd
+      }]]),
+      availableSize: Math.abs(range[range.length - 1] - range[0])
+    };
+  }, [xAxes, axisId, zoomOptions.minStart, zoomOptions.maxEnd]);
+  return (0, _internals.useLinePlotData)(xAxes, yAxes, samplingOverride);
 }

package/ChartsZoomSlider/internals/previews/LinePreviewPlot.mjs

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["seriesId", "color", "gradientId", "onClick"];
 import * as React from 'react';
-import { useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis } from '@mui/x-charts/internals';
+import { useStore, useLinePlotData, selectorChartPreviewComputedXAxis, selectorChartPreviewComputedYAxis, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function LinePreviewPlot({
   axisId,
@@ -52,5 +52,20 @@ function useLinePreviewData(axisId) {
   const store = useStore();
   const xAxes = store.use(selectorChartPreviewComputedXAxis, axisId);
   const yAxes = store.use(selectorChartPreviewComputedYAxis, axisId);
-  return useLinePlotData(xAxes, yAxes);
+  const zoomOptions = store.use(selectorChartAxisZoomOptionsLookup, axisId);
+
+  // The preview is a full-range overview, so sample against its own range and width rather than the
+  // active zoom — otherwise the main chart's zoom would change the preview's point density.
+  const samplingOverride = React.useMemo(() => {
+    const range = xAxes[axisId]?.scale.range() ?? [0, 0];
+    return {
+      zoomMap: new Map([[axisId, {
+        axisId,
+        start: zoomOptions.minStart,
+        end: zoomOptions.maxEnd
+      }]]),
+      availableSize: Math.abs(range[range.length - 1] - range[0])
+    };
+  }, [xAxes, axisId, zoomOptions.minStart, zoomOptions.maxEnd]);
+  return useLinePlotData(xAxes, yAxes, samplingOverride);
 }

package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.d.mts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.mjs";
 interface ScatterPreviewPlotProps extends PreviewPlotProps {
   x: number;
@@ -12,5 +13,5 @@ export declare function ScatterPreviewPlot({
   height,
   width,
   seriesIds
-}: ScatterPreviewPlotProps): import("react/jsx-runtime").JSX.Element | null;
+}: ScatterPreviewPlotProps): React.JSX.Element | null;
 export {};

package/ChartsZoomSlider/internals/previews/ScatterPreviewPlot.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { PreviewPlotProps } from "./PreviewPlot.types.js";
 interface ScatterPreviewPlotProps extends PreviewPlotProps {
   x: number;
@@ -12,5 +13,5 @@ export declare function ScatterPreviewPlot({
   height,
   width,
   seriesIds
-}: ScatterPreviewPlotProps): import("react/jsx-runtime").JSX.Element | null;
+}: ScatterPreviewPlotProps): React.JSX.Element | null;
 export {};

package/FunnelChart/FocusedFunnelSection.d.mts

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

package/FunnelChart/FocusedFunnelSection.d.ts

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

package/FunnelChart/FunnelPlot.d.mts

@@ -13,7 +13,7 @@ export interface FunnelPlotProps extends FunnelPlotSlotExtension {
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
 }
-declare function FunnelPlot(props: FunnelPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function FunnelPlot(props: FunnelPlotProps): React.JSX.Element;
 declare namespace FunnelPlot {
   var propTypes: any;
 }

package/FunnelChart/FunnelPlot.d.ts

@@ -13,7 +13,7 @@ export interface FunnelPlotProps extends FunnelPlotSlotExtension {
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, funnelItemIdentifier: FunnelItemIdentifier) => void;
 }
-declare function FunnelPlot(props: FunnelPlotProps): import("react/jsx-runtime").JSX.Element;
+declare function FunnelPlot(props: FunnelPlotProps): React.JSX.Element;
 declare namespace FunnelPlot {
   var propTypes: any;
 }

package/FunnelChart/curves/getFunnelCurve.d.mts

@@ -5,4 +5,4 @@ import { Linear } from "./linear.mjs";
 import { Bump } from "./bump.mjs";
 import { Pyramid } from "./pyramid.mjs";
 import { StepPyramid } from "./step-pyramid.mjs";
-export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => (context: CanvasRenderingContext2D | Path) => Step | Linear | Bump | Pyramid | StepPyramid;
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => (context: CanvasRenderingContext2D | Path) => Bump | Linear | Pyramid | Step | StepPyramid;

package/FunnelChart/curves/getFunnelCurve.d.ts

@@ -5,4 +5,4 @@ import { Linear } from "./linear.js";
 import { Bump } from "./bump.js";
 import { Pyramid } from "./pyramid.js";
 import { StepPyramid } from "./step-pyramid.js";
-export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => (context: CanvasRenderingContext2D | Path) => Step | Linear | Bump | Pyramid | StepPyramid;
+export declare const getFunnelCurve: (curve: FunnelCurveType | undefined, options: CurveOptions) => (context: CanvasRenderingContext2D | Path) => Bump | Linear | Pyramid | Step | StepPyramid;

package/FunnelChart/funnelClasses.d.mts

@@ -26,4 +26,4 @@ export interface UseUtilityClassesOptions {
   variant?: 'filled' | 'outlined';
   classes?: Partial<FunnelClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"section" | "sectionLabel" | "root", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "section" | "sectionLabel", string>;

package/FunnelChart/funnelClasses.d.ts

@@ -26,4 +26,4 @@ export interface UseUtilityClassesOptions {
   variant?: 'filled' | 'outlined';
   classes?: Partial<FunnelClasses>;
 }
-export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"section" | "sectionLabel" | "root", string>;
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"root" | "section" | "sectionLabel", string>;

package/FunnelChart/funnelPlotSlots.types.d.mts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { FunnelSectionProps } from "./FunnelSection.mjs";
 import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.mjs";
 import type { FunnelSectionPropsOverrides, FunnelSectionLabelPropsOverrides } from "../models/chartsSlotsComponentsPropsPro.mjs";
@@ -15,8 +16,8 @@ export interface FunnelPlotSlots {
   funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps & FunnelSectionLabelPropsOverrides>;
 }
 export interface FunnelPlotSlotProps {
-  funnelSection?: Partial<FunnelSectionProps> & FunnelSectionPropsOverrides;
-  funnelSectionLabel?: Partial<FunnelSectionLabelProps> & FunnelSectionLabelPropsOverrides;
+  funnelSection?: WithDataAttributes<Partial<FunnelSectionProps> & FunnelSectionPropsOverrides>;
+  funnelSectionLabel?: WithDataAttributes<Partial<FunnelSectionLabelProps> & FunnelSectionLabelPropsOverrides>;
 }
 export interface FunnelPlotSlotExtension {
   /**

package/FunnelChart/funnelPlotSlots.types.d.ts

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { WithDataAttributes } from '@mui/utils/types';
 import type { FunnelSectionProps } from "./FunnelSection.js";
 import type { FunnelSectionLabelProps } from "./FunnelSectionLabel.js";
 import type { FunnelSectionPropsOverrides, FunnelSectionLabelPropsOverrides } from "../models/chartsSlotsComponentsPropsPro.js";
@@ -15,8 +16,8 @@ export interface FunnelPlotSlots {
   funnelSectionLabel?: React.ElementType<FunnelSectionLabelProps & FunnelSectionLabelPropsOverrides>;
 }
 export interface FunnelPlotSlotProps {
-  funnelSection?: Partial<FunnelSectionProps> & FunnelSectionPropsOverrides;
-  funnelSectionLabel?: Partial<FunnelSectionLabelProps> & FunnelSectionLabelPropsOverrides;
+  funnelSection?: WithDataAttributes<Partial<FunnelSectionProps> & FunnelSectionPropsOverrides>;
+  funnelSectionLabel?: WithDataAttributes<Partial<FunnelSectionLabelProps> & FunnelSectionLabelPropsOverrides>;
 }
 export interface FunnelPlotSlotExtension {
   /**

package/FunnelChart/labelUtils.d.mts

@@ -13,7 +13,7 @@ export declare const alignLabel: ({
   position,
   textAnchor,
   dominantBaseline
-}: Omit<FunnelLabelOptions, "margin">) => AlignReturnType;
+}: Omit<FunnelLabelOptions, 'margin'>) => AlignReturnType;
 /**
  * This function calculates the position of the label based on the position and margin.
  *
@@ -27,7 +27,7 @@ export declare const positionLabel: ({
   offset,
   isHorizontal,
   values
-}: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
+}: Omit<FunnelLabelOptions, 'textAnchor' | 'dominantBaseline'> & {
   isHorizontal: boolean;
   values: readonly Point[];
 }) => {

package/FunnelChart/labelUtils.d.ts

@@ -13,7 +13,7 @@ export declare const alignLabel: ({
   position,
   textAnchor,
   dominantBaseline
-}: Omit<FunnelLabelOptions, "margin">) => AlignReturnType;
+}: Omit<FunnelLabelOptions, 'margin'>) => AlignReturnType;
 /**
  * This function calculates the position of the label based on the position and margin.
  *
@@ -27,7 +27,7 @@ export declare const positionLabel: ({
   offset,
   isHorizontal,
   values
-}: Omit<FunnelLabelOptions, "textAnchor" | "dominantBaseline"> & {
+}: Omit<FunnelLabelOptions, 'textAnchor' | 'dominantBaseline'> & {
   isHorizontal: boolean;
   values: readonly Point[];
 }) => {

package/FunnelChart/seriesConfig/index.js

@@ -12,7 +12,7 @@ var _getColor = _interopRequireDefault(require("./getColor"));
 var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
-var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _tooltipPosition = require("./tooltipPosition");
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 const funnelSeriesConfig = exports.funnelSeriesConfig = {
@@ -20,7 +20,7 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   colorProcessor: _getColor.default,
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
-  tooltipItemPositionGetter: _tooltipPosition.default,
+  selectorTooltipItemPosition: _tooltipPosition.selectorTooltipItemPosition,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,

package/FunnelChart/seriesConfig/index.mjs

@@ -5,7 +5,7 @@ import getColor from "./getColor.mjs";
 import legendGetter from "./legend.mjs";
 import tooltipGetter from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
-import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import { selectorTooltipItemPosition } from "./tooltipPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import descriptionGetter from "./descriptionGetter.mjs";
 export const funnelSeriesConfig = {
@@ -13,7 +13,7 @@ export const funnelSeriesConfig = {
   colorProcessor: getColor,
   legendGetter,
   tooltipGetter,
-  tooltipItemPositionGetter,
+  selectorTooltipItemPosition,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,

package/FunnelChart/seriesConfig/tooltipPosition.d.mts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'funnel'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'funnel'>;

package/FunnelChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,2 @@
-import type { TooltipItemPositionGetter } from '@mui/x-charts/internals';
-declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'funnel'>;
-export default tooltipItemPositionGetter;
+import type { TooltipItemPositionSelector } from '@mui/x-charts/internals';
+export declare const selectorTooltipItemPosition: TooltipItemPositionSelector<'funnel'>;

package/FunnelChart/seriesConfig/tooltipPosition.js

@@ -3,34 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.selectorTooltipItemPosition = void 0;
+var _store = require("@mui/x-internals/store");
 var _internals = require("@mui/x-charts/internals");
 var _coordinateMapper = require("../coordinateMapper");
-const tooltipItemPositionGetter = params => {
-  const {
-    series,
-    identifier,
-    axesConfig,
-    placement
-  } = params;
-  if (!identifier || identifier.dataIndex === undefined) {
+const selectorTooltipItemPosition = exports.selectorTooltipItemPosition = (0, _store.createSelectorMemoized)(_internals.selectorChartsTooltipItem, _internals.selectorChartSeriesProcessed, _internals.selectorChartXAxis, _internals.selectorChartYAxis, (identifier, series, xAxes, yAxes, placement) => {
+  if (!identifier || identifier.type !== 'funnel' || identifier.dataIndex === undefined) {
     return null;
   }
   const itemSeries = series.funnel?.series[identifier.seriesId];
   if (itemSeries == null) {
     return null;
   }
-  if (axesConfig.x === undefined || axesConfig.y === undefined) {
+  const xAxis = xAxes.axis[itemSeries.xAxisId ?? xAxes.axisIds[0]];
+  const yAxis = yAxes.axis[itemSeries.yAxisId ?? yAxes.axisIds[0]];
+  if (xAxis === undefined || yAxis === undefined) {
     return null;
   }
   const isHorizontal = itemSeries.layout === 'horizontal';
-  const baseScaleConfig = isHorizontal ? axesConfig.x : axesConfig.y;
+  const baseScaleConfig = isHorizontal ? xAxis : yAxis;
 
   // FIXME gap should be obtained from the store.
   // Maybe moving it to the series would be a good idea similar to what we do with bar charts and their stackingGroups
   const gap = 0;
-  const xPosition = (0, _coordinateMapper.createPositionGetter)(axesConfig.x.scale, isHorizontal, gap, baseScaleConfig.data);
-  const yPosition = (0, _coordinateMapper.createPositionGetter)(axesConfig.y.scale, !isHorizontal, gap, baseScaleConfig.data);
+  const xPosition = (0, _coordinateMapper.createPositionGetter)(xAxis.scale, isHorizontal, gap, baseScaleConfig.data);
+  const yPosition = (0, _coordinateMapper.createPositionGetter)(yAxis.scale, !isHorizontal, gap, baseScaleConfig.data);
   const allY = itemSeries.dataPoints[identifier.dataIndex].map(v => yPosition(v.y, identifier.dataIndex, v.stackOffset, v.useBandWidth));
   const allX = itemSeries.dataPoints[identifier.dataIndex].map(v => xPosition(v.x, identifier.dataIndex, v.stackOffset, v.useBandWidth));
   const [x0, x1] = (0, _internals.findMinMax)(allX);
@@ -58,5 +55,4 @@ const tooltipItemPositionGetter = params => {
         y: y0
       };
   }
-};
-var _default = exports.default = tooltipItemPositionGetter;
+});