@mui/x-charts-pro 8.17.0 → 8.19.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
@@ -14,10 +14,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const Rect = styled('rect')(({
   theme
 }) => ({
-  [`&.${chartAxisZoomSliderThumbClasses.root}`]: {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[300] : (theme.vars || theme).palette.common.white,
-    stroke: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[600] : (theme.vars || theme).palette.grey[500]
-  },
+  [`&.${chartAxisZoomSliderThumbClasses.root}`]: _extends({
+    fill: (theme.vars || theme).palette.common.white,
+    stroke: (theme.vars || theme).palette.grey[500]
+  }, theme.applyStyles('dark', {
+    fill: (theme.vars || theme).palette.grey[300],
+    stroke: (theme.vars || theme).palette.grey[600]
+  })),
   [`&.${chartAxisZoomSliderThumbClasses.horizontal}`]: {
     cursor: 'ew-resize'
   },

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 import * as React from 'react';
 import { useChartContext, getSVGPoint, selectorChartAxisZoomOptionsLookup, useStore } from '@mui/x-charts/internals';
@@ -16,8 +16,11 @@ const ZoomSliderTrack = styled('rect', {
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
 })(({
   theme
-}) => ({
-  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[800] : (theme.vars || theme).palette.grey[300],
+}) => _extends({
+  fill: (theme.vars || theme).palette.grey[300]
+}, theme.applyStyles('dark', {
+  fill: (theme.vars || theme).palette.grey[800]
+}), {
   cursor: 'pointer',
   variants: [{
     props: {

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -58,6 +58,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propType
   options: PropTypes.shape({
     copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    nonce: PropTypes.string,
     onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -58,6 +58,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propType
   options: PropTypes.shape({
     copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    nonce: PropTypes.string,
     onBeforeExport: PropTypes.func
   }),
   /**

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -153,6 +153,7 @@ process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
   imageExportOptions: PropTypes.arrayOf(PropTypes.shape({
     copyStyles: PropTypes.bool,
     fileName: PropTypes.string,
+    nonce: PropTypes.string,
     onBeforeExport: PropTypes.func,
     quality: PropTypes.number,
     type: PropTypes.string.isRequired

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.js

@@ -1,8 +1,8 @@
-import { createSelectorMemoized } from '@mui/x-internals/store';
-import { createSelector, selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { selectorChartSeriesConfig, selectorChartSeriesProcessed, selectorChartDrawingArea, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
 import { computeAxisValue } from "./computeAxisValue.js";
 export const selectorFunnel = state => state.funnel;
-export const selectorFunnelGap = createSelector([selectorFunnel], funnel => funnel?.gap ?? 0);
+export const selectorFunnelGap = createSelector(selectorFunnel, funnel => funnel?.gap ?? 0);
 export const selectorChartXAxis = createSelectorMemoized(selectorChartRawXAxis, selectorChartDrawingArea, selectorChartSeriesProcessed, selectorChartSeriesConfig, selectorFunnelGap, (axis, drawingArea, formattedSeries, seriesConfig, gap) => computeAxisValue({
   drawingArea,
   formattedSeries,

package/esm/LineChartPro/LineChartPro.js

@@ -1441,7 +1441,7 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * Configuration for zoom interactions.
    */
   zoomInteractionConfig: PropTypes.shape({
-    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -1449,6 +1449,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
+    }), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.any,

package/esm/SankeyChart/calculateSankeyLayout.js

@@ -24,11 +24,11 @@ export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
     width: nodeWidth = 15,
     padding: nodePadding = 10,
     align: nodeAlign = 'justify',
-    sort: nodeSort = null
+    sort: nodeSort
   } = nodeOptions ?? {};
   const {
     color: linkColor = 'source',
-    sort: linkSort = null,
+    sort: linkSort,
     curveCorrection = 10
   } = linkOptions ?? {};
   const {
@@ -53,12 +53,21 @@ export function calculateSankeyLayout(data, drawingArea, theme, series = {}) {
   };
 
   // Create the sankey layout generator
-  let sankeyGenerator = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign(getNodeAlignFunction(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
-  if (nodeSort) {
-    sankeyGenerator = sankeyGenerator.nodeSort(nodeSort);
+  const sankeyGenerator = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).nodeAlign(getNodeAlignFunction(nodeAlign)).extent([[left, top], [width + right, height + bottom]]).nodeId(d => d.id).iterations(iterations);
+
+  // For 'auto' or undefined, don't set anything (use d3-sankey default behavior)
+  if (typeof nodeSort === 'function') {
+    sankeyGenerator.nodeSort(nodeSort);
+  } else if (nodeSort === 'fixed') {
+    // Null is not accepted by the types.
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/73953
+    sankeyGenerator.nodeSort(null);
   }
-  if (linkSort) {
-    sankeyGenerator = sankeyGenerator.linkSort(linkSort);
+  if (typeof linkSort === 'function') {
+    sankeyGenerator.linkSort(linkSort);
+  } else if (linkSort === 'fixed') {
+    // Null is not accepted by the types.
+    sankeyGenerator.linkSort(null);
   }
 
   // Generate the layout

package/esm/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -1,7 +1,7 @@
-import { createSelector } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
 const selectorSankeyHighlight = state => state.highlight;
 const selectSeries = state => state.series;
-const selectorSankeySeries = createSelector([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const selectorSankeySeries = createSelector(selectSeries, series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
 const DEFAULT_NODE_HIGHLIGHT = 'links';
 const DEFAULT_LINK_HIGHLIGHT = 'links';
 const DEFAULT_FADE = 'none';
@@ -10,32 +10,32 @@ const DEFAULT_FADE = 'none';
  * Get the node highlight configuration from the Sankey series.
  * Defaults to 'nodes' if not specified.
  */
-export const selectorNodeHighlightConfig = createSelector([selectorSankeySeries], series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
+export const selectorNodeHighlightConfig = createSelector(selectorSankeySeries, series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
 
 /**
  * Get the node fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export const selectorNodeFadeConfig = createSelector([selectorSankeySeries], series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
+export const selectorNodeFadeConfig = createSelector(selectorSankeySeries, series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
 
 /**
  * Get the link highlight configuration from the Sankey series.
  * Defaults to 'links' if not specified.
  */
-export const selectorLinkHighlightConfig = createSelector([selectorSankeySeries], series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
+export const selectorLinkHighlightConfig = createSelector(selectorSankeySeries, series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
 
 /**
  * Get the link fade configuration from the Sankey series.
  * Defaults to 'none' if not specified.
  */
-export const selectorLinkFadeConfig = createSelector([selectorSankeySeries], series => series?.linkOptions?.fade ?? DEFAULT_FADE);
+export const selectorLinkFadeConfig = createSelector(selectorSankeySeries, series => series?.linkOptions?.fade ?? DEFAULT_FADE);
 
 /**
  * Get the currently highlighted item in the Sankey chart.
  * @param {UseSankeyHighlightSignature['state']} state The state of the chart.
  * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
  */
-export const selectorSankeyHighlightedItem = createSelector([selectorSankeyHighlight], highlight => highlight.item);
+export const selectorSankeyHighlightedItem = createSelector(selectorSankeyHighlight, highlight => highlight.item);
 
 /**
  * Determines if a specific node should be highlighted.
@@ -43,7 +43,7 @@ export const selectorSankeyHighlightedItem = createSelector([selectorSankeyHighl
  * - It's the highlighted node (unless highlight mode is 'none')
  * - It's connected to a highlighted link (based on linkOptions.highlight)
  */
-export const selectorIsNodeHighlighted = createSelector([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
+export const selectorIsNodeHighlighted = createSelector(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
   if (!highlightedItem) {
     return false;
   }
@@ -78,7 +78,7 @@ export const selectorIsNodeHighlighted = createSelector([selectorSankeyHighlight
  * - It's the highlighted link (unless highlight mode is 'none')
  * - It's connected to a highlighted node (based on nodeOptions.highlight)
  */
-export const selectorIsLinkHighlighted = createSelector([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig], (highlightedItem, nodeHighlight, linkHighlight, link) => {
+export const selectorIsLinkHighlighted = createSelector(selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (highlightedItem, nodeHighlight, linkHighlight, link) => {
   if (!highlightedItem) {
     return false;
   }
@@ -111,7 +111,7 @@ export const selectorIsLinkHighlighted = createSelector([selectorSankeyHighlight
  * - This item is not highlighted
  * - The fade mode is 'global' for the highlighted element type
  */
-export const selectorIsSankeyItemFaded = createSelector([selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig], (highlightedItem, nodeFade, linkFade, isHighlighted) => {
+export const selectorIsSankeyItemFaded = createSelector(selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (highlightedItem, nodeFade, linkFade, isHighlighted) => {
   if (!highlightedItem || isHighlighted) {
     return false;
   }

package/esm/SankeyChart/sankey.types.d.ts

@@ -74,12 +74,19 @@ export type SankeyNodeOptions = {
    */
   showLabels?: boolean;
   /**
-   * Custom sort function for nodes
+   * Custom sort mode for nodes
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the nodes array (disables automatic sorting)
+   * - or a custom function
+   *
    * @param {SankeyLayoutNode} a - First node to compare
    * @param {SankeyLayoutNode} b - Second node to compare
    * @returns {number} Comparison result
+   *
+   * @default 'auto'
    */
-  sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutNode, b: SankeyLayoutNode) => number);
 } & SankeyNodeHighlightScope;
 export type SankeyLinkOptions = {
   /**
@@ -99,12 +106,18 @@ export type SankeyLinkOptions = {
    */
   showValues?: boolean;
   /**
-   * Custom sort function for links
+   * Custom sort mode for links
+   *
+   * - 'auto': Automatic sorting behavior (default)
+   * - 'fixed': Preserve the order from the links array (disables automatic sorting)
+   * - or a custom function
+   *
    * @param {SankeyLayoutLink} a - First link to compare
    * @param {SankeyLayoutLink} b - Second link to compare
    * @returns {number} Comparison result
+     * @default 'auto'
    */
-  sort?: (a: SankeyLayoutLink, b: SankeyLayoutLink) => number | null;
+  sort?: 'auto' | 'fixed' | ((a: SankeyLayoutLink, b: SankeyLayoutLink) => number);
   /**
    * Applies the given number to the X dimension of the control points of the link's curve function.
    * This can create better looking links between nodes, but is dependent on the graph layout.

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -1423,7 +1423,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * Configuration for zoom interactions.
    */
   zoomInteractionConfig: PropTypes.shape({
-    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag']), PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag', 'pressAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['drag']).isRequired
@@ -1431,6 +1431,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       pointerMode: PropTypes.oneOf(['mouse', 'touch']),
       requiredKeys: PropTypes.arrayOf(PropTypes.string),
       type: PropTypes.oneOf(['pressAndDrag']).isRequired
+    }), PropTypes.shape({
+      allowedDirection: PropTypes.oneOf(['x', 'xy', 'y']),
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
     })]).isRequired),
     zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['brush', 'doubleTapReset', 'pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
       pointerMode: PropTypes.any,

package/esm/hooks/useFunnelSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
-const useSelectorSeries = createSeriesSelectorsOfType('funnel');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('funnel');
+import { useSeriesOfType, useAllSeriesOfType } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of funnel series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('funnel');
  */
 
 export function useFunnelSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('funnel', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useFunnelSeries(seriesIds) {
  * @returns the funnel series
  */
 export function useFunnelSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('funnel');
 }

package/esm/hooks/useHeatmapSeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
-const useSelectorSeries = createSeriesSelectorsOfType('heatmap');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('heatmap');
+import { useSeriesOfType, useAllSeriesOfType } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of heatmap series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('heatmap');
  */
 
 export function useHeatmapSeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('heatmap', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useHeatmapSeries(seriesIds) {
  * @returns the heatmap series
  */
 export function useHeatmapSeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('heatmap');
 }

package/esm/hooks/useSankeySeries.js

@@ -1,8 +1,6 @@
 'use client';
 
-import { createAllSeriesSelectorOfType, createSeriesSelectorsOfType } from '@mui/x-charts/internals';
-const useSelectorSeries = createSeriesSelectorsOfType('sankey');
-const useSelectorSeriesContext = createAllSeriesSelectorOfType('sankey');
+import { useSeriesOfType, useAllSeriesOfType } from '@mui/x-charts/internals';
 
 /**
  * Get access to the internal state of sankey series.
@@ -27,7 +25,7 @@ const useSelectorSeriesContext = createAllSeriesSelectorOfType('sankey');
  */
 
 export function useSankeySeries(seriesIds) {
-  return useSelectorSeries(seriesIds);
+  return useSeriesOfType('sankey', seriesIds);
 }
 
 /**
@@ -38,5 +36,5 @@ export function useSankeySeries(seriesIds) {
  * @returns the sankey series
  */
 export function useSankeySeriesContext() {
-  return useSelectorSeriesContext();
+  return useAllSeriesOfType('sankey');
 }

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.17.0
+ * @mui/x-charts-pro v8.19.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

@@ -18,7 +18,8 @@ export async function exportImage(element, svg, params) {
     type = 'image/png',
     quality = 0.9,
     onBeforeExport = defaultOnBeforeExport,
-    copyStyles = true
+    copyStyles = true,
+    nonce
   } = params ?? {};
   const drawDocumentPromise = getDrawDocument();
   const doc = ownerDocument(element);
@@ -45,7 +46,7 @@ export async function exportImage(element, svg, params) {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
-      await Promise.all(loadStyleSheets(exportDoc, root));
+      await Promise.all(loadStyleSheets(exportDoc, root, nonce));
     }
     resolve();
   };
@@ -65,7 +66,8 @@ export async function exportImage(element, svg, params) {
   try {
     await drawDocument(iframe.contentDocument, canvas, {
       // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
-      zoom: ratio
+      zoom: ratio,
+      nonce
     });
   } finally {
     doc.body.removeChild(iframe);

package/esm/internals/plugins/useChartProExport/print.d.ts

@@ -2,5 +2,6 @@ import { ChartPrintExportOptions } from "./useChartProExport.types.js";
 export declare function printChart(element: HTMLElement | SVGElement, {
   fileName,
   onBeforeExport,
-  copyStyles
+  copyStyles,
+  nonce
 }?: ChartPrintExportOptions): void;

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

@@ -5,7 +5,8 @@ import { defaultOnBeforeExport } from "./defaults.js";
 export function printChart(element, {
   fileName,
   onBeforeExport = defaultOnBeforeExport,
-  copyStyles = true
+  copyStyles = true,
+  nonce
 } = {}) {
   const printWindow = createExportIframe(fileName);
   const doc = ownerDocument(element);
@@ -17,7 +18,7 @@ export function printChart(element, {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     if (copyStyles) {
-      await Promise.all(loadStyleSheets(printDoc, root));
+      await Promise.all(loadStyleSheets(printDoc, root, nonce));
     }
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {

package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -24,6 +24,11 @@ export interface ChartExportOptions {
    * @default true
    */
   copyStyles?: boolean;
+  /**
+   * A nonce to be used for Content Security Policy (CSP) compliance.
+   * If provided, this nonce will be added to any style elements created during the export process.
+   */
+  nonce?: string;
 }
 /**
  * The options to apply on the Print export.

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

@@ -8,10 +8,11 @@ export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-char
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+  allowedDirection?: "x" | "y" | "xy";
 }) | null;
 export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, interactionName: "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
+}, interactionName: "wheel" | "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
   mouse: {
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
@@ -19,15 +20,6 @@ export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-chart
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+  allowedDirection?: "x" | "y" | "xy";
 }) | null;
-export declare const selectorIsZoomBrushEnabled: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
-  cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}) => false | (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
-  mouse: {
-    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
-  };
-  touch: {
-    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
-  };
-  pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
-});
+export declare const selectorIsZoomBrushEnabled: (args_0: {}, zoomInteractionConfig: any) => any;

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js

@@ -1,5 +1,6 @@
-import { createSelector, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { createSelector } from '@mui/x-internals/store';
+import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorChartZoomState } from "./useChartProZoom.selectors.js";
-export const selectorZoomInteractionConfig = createSelector([selectorChartZoomState], (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
-export const selectorPanInteractionConfig = createSelector([selectorChartZoomState], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
-export const selectorIsZoomBrushEnabled = createSelector([selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush')], (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);
+export const selectorZoomInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
+export const selectorPanInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
+export const selectorIsZoomBrushEnabled = createSelector(selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush'), (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);

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

@@ -15,8 +15,9 @@ export type ZoomInteractionConfig = {
    * Defines the interactions that trigger panning.
    * - `drag`: Pans the chart when dragged with the mouse.
    * - `pressAndDrag`: Pans the chart by pressing and holding, then dragging. Useful for avoiding conflicts with selection gestures.
+   * - `wheel`: Pans the chart when the mouse wheel is scrolled (horizontal by default).
    *
-   * @default ['drag']
+   * @default ['drag', 'wheel']
    */
   pan?: readonly (PanInteraction | PanInteraction['type'])[];
 };
@@ -28,13 +29,14 @@ type Entry<T extends AnyInteraction> = { [K in T['type']]?: Omit<T, 'pointerMode
     requiredKeys?: KeyboardKey[];
   };
   pointerMode?: PointerMode[];
+  allowedDirection?: 'x' | 'y' | 'xy';
 } };
 export type DefaultizedZoomInteractionConfig = {
   zoom: Entry<ZoomInteraction>;
   pan: Entry<PanInteraction>;
 };
 export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction | DoubleTapResetInteraction | BrushInteraction;
-export type PanInteraction = DragInteraction | PressAndDragInteraction;
+export type PanInteraction = DragInteraction | PressAndDragInteraction | WheelPanInteraction;
 export type ZoomInteractionName = ZoomInteraction['type'];
 export type PanInteractionName = PanInteraction['type'];
 export type InteractionMode = Exclude<PointerMode, 'pen'>;
@@ -81,6 +83,17 @@ export type TapAndDragInteraction = Unpack<{
 export type PressAndDragInteraction = Unpack<{
   type: 'pressAndDrag';
 } & AllModeProp & AllKeysProp>;
+export type WheelPanInteraction = Unpack<{
+  type: 'wheel';
+  /**
+   * Defines which axes are affected by pan on wheel.
+   * - `'x'`: Only pan horizontally
+   * - `'y'`: Only pan vertically
+   * - `'xy'`: Pan both axes
+   * @default 'x'
+   */
+  allowedDirection?: 'x' | 'y' | 'xy';
+} & NoModeProp & AllKeysProp>;
 export type DoubleTapResetInteraction = Unpack<{
   type: 'doubleTapReset';
 } & AllModeProp & AllKeysProp>;
@@ -91,6 +104,7 @@ export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;
   requiredKeys?: KeyboardKey[];
+  allowedDirection?: 'x' | 'y' | 'xy';
 };
 export type AnyEntry = Omit<AnyInteraction, 'pointerMode'> & {
   mouse: {
@@ -100,5 +114,6 @@ export type AnyEntry = Omit<AnyInteraction, 'pointerMode'> & {
     requiredKeys?: KeyboardKey[];
   };
   pointerMode?: PointerMode[];
+  allowedDirection?: 'x' | 'y' | 'xy';
 };
 export {};

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnWheel.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const usePanOnWheel: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;