@mui/x-charts-pro 8.27.4 → 8.28.0

package/esm/SankeyChart/sankeyClasses.js

@@ -1,20 +1,39 @@
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getSankeyPlotUtilityClass(slot) {
+
+/**
+ * @deprecated Use `SankeyClasses` instead.
+ */
+
+export function getSankeyUtilityClass(slot) {
   return generateUtilityClass('MuiSankeyChart', slot);
 }
-export const sankeyPlotClasses = generateUtilityClasses('MuiSankeyChart', ['root', 'nodes', 'nodeLabels', 'links', 'linkLabels']);
-export const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `getSankeyUtilityClass` instead.
+ */
+export const getSankeyPlotUtilityClass = getSankeyUtilityClass;
+export const sankeyClasses = generateUtilityClasses('MuiSankeyChart', ['root', 'nodes', 'nodeLabels', 'links', 'linkLabels', 'node', 'link', 'nodeLabel', 'linkLabel']);
+
+/**
+ * @deprecated Use `sankeyClasses` instead.
+ */
+export const sankeyPlotClasses = sankeyClasses;
+export const useUtilityClasses = options => {
   const {
     classes
-  } = ownerState;
+  } = options ?? {};
   const slots = {
     root: ['root'],
     nodes: ['nodes'],
     nodeLabels: ['nodeLabels'],
     links: ['links'],
-    linkLabels: ['linkLabels']
+    linkLabels: ['linkLabels'],
+    node: ['node'],
+    link: ['link'],
+    nodeLabel: ['nodeLabel'],
+    linkLabel: ['linkLabel']
   };
-  return composeClasses(slots, getSankeyPlotUtilityClass, classes);
+  return composeClasses(slots, getSankeyUtilityClass, classes);
 };

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -1563,8 +1563,8 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['doubleTapReset']).isRequired
     }), PropTypes.shape({
-      pointerMode: PropTypes.any,
-      requiredKeys: PropTypes.array,
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['brush']).isRequired
     })]).isRequired)
   })

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.4
+ * @mui/x-charts-pro v8.28.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/plugins/useChartProExport/exportImage.js

@@ -23,6 +23,7 @@ export async function exportImage(element, svg, params) {
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = ownerDocument(element);
+  const ratio = Math.max(window.devicePixelRatio || 1, 1);
   const iframe = createExportIframe(fileName);
   /* We apply the min/max width and height to ensure the SVG doesn't resize in the export.
    * We apply to the original SVG so that the cloned tree will contain the styles and revert these
@@ -62,7 +63,6 @@ export async function exportImage(element, svg, params) {
   /* Use the size from the export body in case `onBeforeExport` adds some elements that should be in the export. */
   const exportDocBodySize = iframe.contentDocument.body.getBoundingClientRect();
   const canvas = document.createElement('canvas');
-  const ratio = window.devicePixelRatio || 1;
   canvas.width = exportDocBodySize.width * ratio;
   canvas.height = exportDocBodySize.height * ratio;
   canvas.style.width = `${exportDocBodySize.width}px`;

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -16,6 +16,19 @@ export const useZoomOnBrush = ({
   React.useEffect(() => {
     instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {

package/esm/themeAugmentation/components.d.ts

@@ -1,5 +1,15 @@
 import { type ComponentsProps, type ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
+  MuiFunnelChart?: {
+    defaultProps?: ComponentsProps['MuiFunnelChart'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiFunnelChart'];
+  };
+  MuiFunnelSection?: {
+    defaultProps?: ComponentsProps['MuiFunnelSection'];
+  };
+  MuiFunnelSectionLabel?: {
+    defaultProps?: ComponentsProps['MuiFunnelSection'];
+  };
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];
   };
@@ -8,11 +18,19 @@ export interface ChartsProComponents<Theme = unknown> {
   };
   MuiHeatmap?: {
     defaultProps?: ComponentsProps['MuiHeatmap'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
+  };
+  MuiHeatmapPlot?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmapPlot'];
   };
   MuiScatterChartPro?: {
     defaultProps?: ComponentsProps['MuiScatterChartPro'];
   };
+  MuiSankeyChart?: {
+    defaultProps?: ComponentsProps['MuiSankeyChart'];
+  };
+  MuiSankeyPlot?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiSankeyPlot'];
+  };
 }
 declare module '@mui/material/styles' {
   interface Components<Theme = unknown> extends ChartsProComponents<Theme> {}

package/esm/themeAugmentation/overrides.d.ts

@@ -1,6 +1,9 @@
-import { type HeatmapClassKey } from "../Heatmap/index.js";
+import { type FunnelClasses } from "../FunnelChart/index.js";
+type ExtractSafe<T, U extends T> = T extends U ? T : never;
 export interface ChartsProComponentNameToClassKey {
-  MuiHeatmap: HeatmapClassKey;
+  MuiFunnelChart: ExtractSafe<keyof FunnelClasses, 'section' | 'sectionLabel'>;
+  MuiHeatmapPlot: 'root';
+  MuiSankeyPlot: 'root';
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}

package/esm/themeAugmentation/props.d.ts

@@ -2,11 +2,19 @@ import { type ScatterChartProProps } from "../ScatterChartPro/index.js";
 import { type BarChartProProps } from "../BarChartPro/index.js";
 import { type HeatmapProps } from "../Heatmap/Heatmap.js";
 import { type LineChartProProps } from "../LineChartPro/index.js";
+import { type FunnelChartProps } from "../FunnelChart/index.js";
+import { type FunnelSectionProps } from "../FunnelChart/FunnelSection.js";
+import { type FunnelSectionLabelProps } from "../FunnelChart/FunnelSectionLabel.js";
+import { type SankeyChartProps } from "../SankeyChart/SankeyChart.js";
 export interface ChartsProComponentsPropsList {
   MuiBarChartPro: BarChartProProps;
   MuiLineChartPro: LineChartProProps;
   MuiHeatmap: HeatmapProps;
   MuiScatterChartPro: ScatterChartProProps;
+  MuiFunnelChart: FunnelChartProps;
+  MuiFunnelSection: FunnelSectionProps;
+  MuiFunnelSectionLabel: FunnelSectionLabelProps;
+  MuiSankeyChart: SankeyChartProps;
 }
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends ChartsProComponentsPropsList {}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.27.4
+ * @mui/x-charts-pro v8.28.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/plugins/useChartProExport/exportImage.js

@@ -33,6 +33,7 @@ async function exportImage(element, svg, params) {
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = (0, _ownerDocument.default)(element);
+  const ratio = Math.max(window.devicePixelRatio || 1, 1);
   const iframe = (0, _common.createExportIframe)(fileName);
   /* We apply the min/max width and height to ensure the SVG doesn't resize in the export.
    * We apply to the original SVG so that the cloned tree will contain the styles and revert these
@@ -72,7 +73,6 @@ async function exportImage(element, svg, params) {
   /* Use the size from the export body in case `onBeforeExport` adds some elements that should be in the export. */
   const exportDocBodySize = iframe.contentDocument.body.getBoundingClientRect();
   const canvas = document.createElement('canvas');
-  const ratio = window.devicePixelRatio || 1;
   canvas.width = exportDocBodySize.width * ratio;
   canvas.height = exportDocBodySize.height * ratio;
   canvas.style.width = `${exportDocBodySize.width}px`;

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts

@@ -99,7 +99,7 @@ export type DoubleTapResetInteraction = Unpack<{
 } & AllModeProp & AllKeysProp>;
 export type BrushInteraction = Unpack<{
   type: 'brush';
-} & NoModeProp & NoKeysProp>;
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnBrush.js

@@ -22,6 +22,19 @@ const useZoomOnBrush = ({
   React.useEffect(() => {
     instance.setZoomBrushEnabled(isZoomOnBrushEnabled);
   }, [isZoomOnBrushEnabled, instance]);
+  React.useEffect(() => {
+    if (!isZoomOnBrushEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('brush', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isZoomOnBrushEnabled, config, instance]);
 
   // Zoom on brush
   React.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.27.4",
+  "version": "8.28.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -31,7 +31,7 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.27.4",
+    "@mui/x-charts": "8.28.0",
     "@mui/x-charts-vendor": "8.26.0",
     "@mui/x-internals": "8.26.0",
     "@mui/x-internal-gestures": "0.4.0",

package/themeAugmentation/components.d.ts

@@ -1,5 +1,15 @@
 import { type ComponentsProps, type ComponentsOverrides } from '@mui/material/styles';
 export interface ChartsProComponents<Theme = unknown> {
+  MuiFunnelChart?: {
+    defaultProps?: ComponentsProps['MuiFunnelChart'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiFunnelChart'];
+  };
+  MuiFunnelSection?: {
+    defaultProps?: ComponentsProps['MuiFunnelSection'];
+  };
+  MuiFunnelSectionLabel?: {
+    defaultProps?: ComponentsProps['MuiFunnelSection'];
+  };
   MuiBarChartPro?: {
     defaultProps?: ComponentsProps['MuiBarChartPro'];
   };
@@ -8,11 +18,19 @@ export interface ChartsProComponents<Theme = unknown> {
   };
   MuiHeatmap?: {
     defaultProps?: ComponentsProps['MuiHeatmap'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmap'];
+  };
+  MuiHeatmapPlot?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiHeatmapPlot'];
   };
   MuiScatterChartPro?: {
     defaultProps?: ComponentsProps['MuiScatterChartPro'];
   };
+  MuiSankeyChart?: {
+    defaultProps?: ComponentsProps['MuiSankeyChart'];
+  };
+  MuiSankeyPlot?: {
+    styleOverrides?: ComponentsOverrides<Theme>['MuiSankeyPlot'];
+  };
 }
 declare module '@mui/material/styles' {
   interface Components<Theme = unknown> extends ChartsProComponents<Theme> {}

package/themeAugmentation/overrides.d.ts

@@ -1,6 +1,9 @@
-import { type HeatmapClassKey } from "../Heatmap/index.js";
+import { type FunnelClasses } from "../FunnelChart/index.js";
+type ExtractSafe<T, U extends T> = T extends U ? T : never;
 export interface ChartsProComponentNameToClassKey {
-  MuiHeatmap: HeatmapClassKey;
+  MuiFunnelChart: ExtractSafe<keyof FunnelClasses, 'section' | 'sectionLabel'>;
+  MuiHeatmapPlot: 'root';
+  MuiSankeyPlot: 'root';
 }
 declare module '@mui/material/styles' {
   interface ComponentNameToClassKey extends ChartsProComponentNameToClassKey {}

package/themeAugmentation/props.d.ts

@@ -2,11 +2,19 @@ import { type ScatterChartProProps } from "../ScatterChartPro/index.js";
 import { type BarChartProProps } from "../BarChartPro/index.js";
 import { type HeatmapProps } from "../Heatmap/Heatmap.js";
 import { type LineChartProProps } from "../LineChartPro/index.js";
+import { type FunnelChartProps } from "../FunnelChart/index.js";
+import { type FunnelSectionProps } from "../FunnelChart/FunnelSection.js";
+import { type FunnelSectionLabelProps } from "../FunnelChart/FunnelSectionLabel.js";
+import { type SankeyChartProps } from "../SankeyChart/SankeyChart.js";
 export interface ChartsProComponentsPropsList {
   MuiBarChartPro: BarChartProProps;
   MuiLineChartPro: LineChartProProps;
   MuiHeatmap: HeatmapProps;
   MuiScatterChartPro: ScatterChartProProps;
+  MuiFunnelChart: FunnelChartProps;
+  MuiFunnelSection: FunnelSectionProps;
+  MuiFunnelSectionLabel: FunnelSectionLabelProps;
+  MuiSankeyChart: SankeyChartProps;
 }
 declare module '@mui/material/styles' {
   interface ComponentsPropsList extends ChartsProComponentsPropsList {}

package/Heatmap/internals/HeatmapCell.d.ts

@@ -1,21 +0,0 @@
-import type * as React from 'react';
-import type { SeriesId } from '@mui/x-charts/models';
-import type { HeatmapClasses } from "../heatmapClasses.js";
-export interface HeatmapItemOwnerState {
-  seriesId: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  classes?: Partial<HeatmapClasses>;
-}
-export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  ownerState: HeatmapItemOwnerState;
-}
-export declare const HeatmapCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-  ownerState: HeatmapItemOwnerState;
-}, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;

package/Heatmap/internals/HeatmapCell.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.HeatmapCell = void 0;
-var _styles = require("@mui/material/styles");
-const HeatmapCell = exports.HeatmapCell = (0, _styles.styled)('rect', {
-  name: 'MuiHeatmap',
-  slot: 'Cell',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
-})(({
-  ownerState
-}) => ({
-  filter: ownerState.isHighlighted && 'saturate(120%)' || ownerState.isFaded && 'saturate(80%)' || undefined,
-  fill: ownerState.color,
-  shapeRendering: 'crispEdges'
-}));

package/esm/Heatmap/internals/HeatmapCell.d.ts

@@ -1,21 +0,0 @@
-import type * as React from 'react';
-import type { SeriesId } from '@mui/x-charts/models';
-import type { HeatmapClasses } from "../heatmapClasses.js";
-export interface HeatmapItemOwnerState {
-  seriesId: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  classes?: Partial<HeatmapClasses>;
-}
-export interface HeatmapCellProps extends React.ComponentPropsWithRef<'rect'> {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  ownerState: HeatmapItemOwnerState;
-}
-export declare const HeatmapCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-  ownerState: HeatmapItemOwnerState;
-}, Pick<React.SVGProps<SVGRectElement>, keyof React.SVGProps<SVGRectElement>>, {}>;

package/esm/Heatmap/internals/HeatmapCell.js

@@ -1,12 +0,0 @@
-import { styled } from '@mui/material/styles';
-export const HeatmapCell = styled('rect', {
-  name: 'MuiHeatmap',
-  slot: 'Cell',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
-})(({
-  ownerState
-}) => ({
-  filter: ownerState.isHighlighted && 'saturate(120%)' || ownerState.isFaded && 'saturate(80%)' || undefined,
-  fill: ownerState.color,
-  shapeRendering: 'crispEdges'
-}));