@mui/x-charts 8.5.3 → 8.7.0

package/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors.d.ts

@@ -1,21 +1,21 @@
 import { AxisId } from "../../../../models/axis.js";
 import type { AxisItemIdentifier } from "../useChartCartesianAxis/useChartCartesianInteraction.selectors.js";
-export declare const selectorChartsInteractionRotationAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionRotationAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState>, number | null, [id?: AxisId | undefined]>;
-export declare const selectorChartsInteractionRotationAxisIndexes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionRotationAxisIndexes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState>, number[] | null, [ids: AxisId[]]>;
-export declare const selectorChartsInteractionRotationAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+export declare const selectorChartsInteractionRotationAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & Partial<{}> & Partial<import("../useChartCartesianAxis/index.js").UseChartCartesianAxisState> & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState>, any, [id?: AxisId | undefined]>;
-export declare const selectorChartsInteractionRotationAxisValues: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
+export declare const selectorChartsInteractionRotationAxisValues: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("./useChartPolarAxis.types.js").UseChartPolarAxisState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -23,7 +23,7 @@ export declare const selectorChartsInteractionRotationAxisValues: import("resele
 /**
  * Get rotation-axis ids and corresponding data index that should be display in the tooltip.
  */
-export declare const selectorChartsInteractionTooltipRotationAxes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionTooltipRotationAxes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
@@ -35,7 +35,7 @@ export declare const selectorChartsInteractionTooltipRadiusAxes: import("reselec
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export declare const selectorChartsInteractionPolarAxisTooltip: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionPolarAxisTooltip: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
@@ -138,12 +139,28 @@ const useChartVoronoi = ({
         dataIndex
       };
     }
-    const handleMouseLeave = () => {
-      instance.cleanInteraction?.();
-      instance.clearHighlight?.();
-    };
-    const handleMouseMove = event => {
-      const closestPoint = getClosestPoint(event);
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+      }
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+      }
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+        instance.clearHighlight?.();
+      }
+    });
+    const gestureHandler = event => {
+      const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (closestPoint === 'outside-chart') {
         instance.cleanInteraction?.();
         instance.clearHighlight?.();
@@ -168,32 +185,31 @@ const useChartVoronoi = ({
         dataIndex
       });
     };
-    const handleMouseClick = event => {
-      if (!onItemClick) {
-        return;
-      }
-      const closestPoint = getClosestPoint(event);
-      if (typeof closestPoint === 'string') {
-        // No point fond for any reason
-        return;
+    const tapHandler = instance.addInteractionListener('tap', event => {
+      const closestPoint = getClosestPoint(event.detail.srcEvent);
+      if (typeof closestPoint !== 'string' && onItemClick) {
+        const {
+          seriesId,
+          dataIndex
+        } = closestPoint;
+        onItemClick(event.detail.srcEvent, {
+          type: 'scatter',
+          seriesId,
+          dataIndex
+        });
       }
-      const {
-        seriesId,
-        dataIndex
-      } = closestPoint;
-      onItemClick(event, {
-        type: 'scatter',
-        seriesId,
-        dataIndex
-      });
-    };
-    element.addEventListener('pointerleave', handleMouseLeave);
-    element.addEventListener('pointermove', handleMouseMove);
-    element.addEventListener('click', handleMouseClick);
+    });
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerleave', handleMouseLeave);
-      element.removeEventListener('pointermove', handleMouseMove);
-      element.removeEventListener('click', handleMouseClick);
+      tapHandler.cleanup();
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, disableVoronoi, drawingArea, instance]);
 

package/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsVoronoiIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartVoronoi.types.js").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/plugins/featurePlugins/useChartZAxis/useChartZAxis.selectors.d.ts

@@ -1,4 +1,4 @@
-export declare const selectorChartZAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
+export declare const selectorChartZAxis: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartZAxis.types.js").UseChartZAxisState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
 } & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;

package/internals/store/useCharts.d.ts

@@ -16,7 +16,7 @@ import { ChartSeriesConfig } from "../plugins/models/seriesConfig/index.js";
  */
 export declare function useCharts<TSeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]>(inPlugins: ConvertSignaturesIntoPlugins<TSignatures>, props: Partial<UseChartBaseProps<TSignatures>>, seriesConfig: ChartSeriesConfig<TSeriesType>): {
   contextValue: {
-    store: ChartStore<readonly [import("../index.js").UseChartIdSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, ...TSignatures]> & UseChartInteractionState;
+    store: ChartStore<readonly [import("../index.js").UseChartIdSignature, import("../index.js").UseChartDimensionsSignature, import("../index.js").UseChartSeriesSignature, import("../plugins/corePlugins/useChartAnimation/index.js").UseChartAnimationSignature, import("../index.js").UseChartInteractionListenerSignature, ...TSignatures]> & UseChartInteractionState;
     publicAPI: ChartPublicAPI<TSignatures>;
     instance: ChartInstance<TSignatures>;
     svgRef: React.RefObject<SVGSVGElement | null>;

package/locales/elGR.d.ts

@@ -0,0 +1,19 @@
+import { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export declare const elGRLocaleText: Partial<ChartsLocaleText>;
+export declare const elGR: {
+  components: {
+    MuiChartsLocalizationProvider: {
+      defaultProps: {
+        localeText: {
+          loading?: string | undefined;
+          noData?: string | undefined;
+          zoomIn?: string | undefined;
+          zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
+        };
+      };
+    };
+  };
+};

package/locales/elGR.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.elGRLocaleText = exports.elGR = void 0;
+var _imageMimeTypes = require("./utils/imageMimeTypes");
+var _getChartsLocalization = require("./utils/getChartsLocalization");
+const elGRLocaleText = exports.elGRLocaleText = {
+  // Overlay
+  loading: 'Φόρτωση δεδομένων…',
+  noData: 'Δεν υπάρχουν δεδομένα για εμφάνιση',
+  // Toolbar
+  zoomIn: 'Μεγέθυνση',
+  zoomOut: 'Σμίκρυνση',
+  toolbarExport: 'Εξαγωγή',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Εκτύπωση',
+  toolbarExportImage: mimeType => `Εξαγωγή ως ${_imageMimeTypes.imageMimeTypes[mimeType] ?? mimeType}`
+};
+const elGR = exports.elGR = (0, _getChartsLocalization.getChartsLocalization)(elGRLocaleText);

package/locales/enUS.d.ts

@@ -10,6 +10,9 @@ export declare const enUS: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/locales/enUS.js

@@ -4,15 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.enUSLocaleText = exports.enUS = exports.DEFAULT_LOCALE = void 0;
+var _imageMimeTypes = require("./utils/imageMimeTypes");
 var _getChartsLocalization = require("./utils/getChartsLocalization");
 // This object is not Partial<ChartsLocaleText> because it is the default values
 
 const enUSLocaleText = exports.enUSLocaleText = {
-  // Overlay
+  /* Overlay */
   loading: 'Loading data…',
   noData: 'No data to display',
+  /* Toolbar */
   zoomIn: 'Zoom in',
-  zoomOut: 'Zoom out'
+  zoomOut: 'Zoom out',
+  toolbarExport: 'Export',
+  /* Toolbar Export Menu */
+  toolbarExportPrint: 'Print',
+  toolbarExportImage: mimeType => `Export as ${_imageMimeTypes.imageMimeTypes[mimeType] ?? mimeType}`
 };
 const DEFAULT_LOCALE = exports.DEFAULT_LOCALE = enUSLocaleText;
 const enUS = exports.enUS = (0, _getChartsLocalization.getChartsLocalization)(enUSLocaleText);

package/locales/frFR.d.ts

@@ -9,6 +9,9 @@ export declare const frFR: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/locales/frFR.js

@@ -9,7 +9,14 @@ const frFRLocalText = exports.frFRLocalText = {
   // Overlay
   loading: 'Chargement…',
   noData: 'Pas de données'
+
+  // Toolbar
   // zoomIn: 'Zoom in',
   // zoomOut: 'Zoom out',
+  // toolbarExport: 'Export',
+
+  // Toolbar Export Menu
+  // toolbarExportPrint: 'Print',
+  // toolbarExportImage: mimeType => `Export as ${imageMimeTypes[mimeType] ?? mimeType}`,
 };
 const frFR = exports.frFR = (0, _getChartsLocalization.getChartsLocalization)(frFRLocalText);

package/locales/index.d.ts

@@ -1,4 +1,5 @@
 export type { ChartsLocaleText } from "./utils/chartsLocaleTextApi.js";
+export * from "./elGR.js";
 export * from "./enUS.js";
 export * from "./frFR.js";
 export * from "./ptBR.js";

package/locales/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _elGR = require("./elGR");
+Object.keys(_elGR).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _elGR[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _elGR[key];
+    }
+  });
+});
 var _enUS = require("./enUS");
 Object.keys(_enUS).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/locales/ptBR.d.ts

@@ -9,6 +9,9 @@ export declare const ptBR: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/locales/ptBR.js

@@ -4,12 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ptBRLocaleText = exports.ptBR = void 0;
+var _imageMimeTypes = require("./utils/imageMimeTypes");
 var _getChartsLocalization = require("./utils/getChartsLocalization");
 const ptBRLocaleText = exports.ptBRLocaleText = {
   // Overlay
   loading: 'Carregando dados…',
   noData: 'Sem dados para exibir',
+  // Toolbar
   zoomIn: 'Aumentar zoom',
-  zoomOut: 'Diminuir zoom'
+  zoomOut: 'Diminuir zoom',
+  toolbarExport: 'Exportar',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Imprimir',
+  toolbarExportImage: mimeType => `Exportar como ${_imageMimeTypes.imageMimeTypes[mimeType] ?? mimeType}`
 };
 const ptBR = exports.ptBR = (0, _getChartsLocalization.getChartsLocalization)(ptBRLocaleText);

package/locales/ptPT.d.ts

@@ -9,6 +9,9 @@ export declare const ptPT: {
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./utils/imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/locales/ptPT.js

@@ -4,12 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ptPTLocaleText = exports.ptPT = void 0;
+var _imageMimeTypes = require("./utils/imageMimeTypes");
 var _getChartsLocalization = require("./utils/getChartsLocalization");
 const ptPTLocaleText = exports.ptPTLocaleText = {
   // Overlay
   loading: 'Carregando dados…',
   noData: 'Sem dados para mostrar',
+  // Toolbar
   zoomIn: 'Aumentar zoom',
-  zoomOut: 'Diminuir zoom'
+  zoomOut: 'Diminuir zoom',
+  toolbarExport: 'Exportar',
+  // Toolbar Export Menu
+  toolbarExportPrint: 'Imprimir',
+  toolbarExportImage: mimeType => `Exportar como ${_imageMimeTypes.imageMimeTypes[mimeType] ?? mimeType}`
 };
 const ptPT = exports.ptPT = (0, _getChartsLocalization.getChartsLocalization)(ptPTLocaleText);

package/locales/utils/chartsLocaleTextApi.d.ts

@@ -1,3 +1,4 @@
+import { ChartImageExportMimeType } from "./imageMimeTypes.js";
 export interface ChartsLocaleText {
   /**
    * Title displayed in the overlay if `loading` is `true`.
@@ -15,5 +16,21 @@ export interface ChartsLocaleText {
    * Tooltip text shown when hovering over the zoom out button.
    */
   zoomOut: string;
+  /**
+   * Text for the export button tooltip in the toolbar.
+   */
+  toolbarExport: string;
+  /**
+   * Text for the print button in the toolbar's export menu.
+   */
+  toolbarExportPrint: string;
+  /**
+   * Text for an "Export as {image type}" button in the toolbar's export menu.
+   * The only format supported in all browsers is 'image/png'.
+   *
+   * @param {string} mimeType The MIME type of the image to export, e.g., 'image/png'.
+   * @returns {string} The localized string for an export image button.
+   */
+  toolbarExportImage: (mimeType: ChartImageExportMimeType | (string & {})) => string;
 }
 export type ChartsTranslationKeys = keyof ChartsLocaleText;

package/locales/utils/getChartsLocalization.d.ts

@@ -13,6 +13,9 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           noData?: string | undefined;
           zoomIn?: string | undefined;
           zoomOut?: string | undefined;
+          toolbarExport?: string | undefined;
+          toolbarExportPrint?: string | undefined;
+          toolbarExportImage?: ((mimeType: import("./imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
         };
       };
     };

package/locales/utils/imageMimeTypes.d.ts

@@ -0,0 +1,2 @@
+export declare const imageMimeTypes: Record<string, string | undefined>;
+export type ChartImageExportMimeType = 'image/png' | 'image/jpeg' | 'image/webp';

package/locales/utils/imageMimeTypes.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.imageMimeTypes = void 0;
+const imageMimeTypes = exports.imageMimeTypes = {
+  'image/png': 'PNG',
+  'image/jpeg': 'JPEG',
+  'image/webp': 'WebP'
+};

package/models/slots/chartsBaseSlotProps.d.ts

@@ -7,14 +7,18 @@ export type ChartBaseCommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
 };
 export type ChartBaseIconProps = ChartBaseCommonProps<SVGSVGElement> & {
   titleAccess?: string;
+  fontSize?: 'small' | 'medium' | 'large' | 'inherit';
 };
 export type ChartBaseButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
   disabled?: boolean;
   tabIndex?: number;
 };
 export type ChartBaseIconButtonProps = ChartBaseCommonProps & {
   ref?: React.Ref<HTMLButtonElement>;
+  id?: string;
   disabled?: boolean;
   tabIndex?: number;
+  size?: 'small' | 'medium' | 'large';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts",
-  "version": "8.5.3",
+  "version": "8.7.0",
   "author": "MUI Team",
   "description": "The community edition of MUI X Charts components.",
   "main": "./index.js",
@@ -37,7 +37,8 @@
     "reselect": "^5.1.1",
     "use-sync-external-store": "^1.5.0",
     "@mui/x-charts-vendor": "8.5.3",
-    "@mui/x-internals": "8.5.3"
+    "@mui/x-internal-gestures": "0.2.0",
+    "@mui/x-internals": "8.7.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",