@mui/x-charts-pro 7.0.0-alpha.1 → 7.0.0-alpha.3

package/BarChartPro/BarChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -28,7 +29,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(props, ref) {
+const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiBarChartPro'
+  });
   const {
       zoom,
       onZoomChange

package/CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.15.0
+
+_Aug 29, 2024_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Support Material UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii
+
+You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid-pro@7.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [DataGridPro] Export `GridRowReorderCell` component (#14079) @genepaul
+
+#### `@mui/x-data-grid-premium@7.15.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.15.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.15.0`
+
+- [pickers] Add `onTouchStart` handler for `TimeClock` (#14305) @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.15.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.15.0`, plus:
+
+- [DateTimeRangePicker] Fix date format resolving from views on 24hr locales (#14341) @arthurbalduini
+
+### Charts
+
+#### `@mui/x-charts@7.15.0`
+
+- [charts] Add missing `themeAugmentation` in pro plan (#14313) @lhilgert9
+- [charts] Fix `LineChart` transition stopping before completion (#14366) @JCQuintas
+- [charts] Fix tooltip with horizontal layout (#14337) @alexfauquette
+- [charts] Keep axis root classe usage explicit (#14378) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-alpha.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.15.0`, plus:
+
+- [charts pro] Avoid relative reference to `@mui/x-charts` package (#14335) @LukasTy
+
+### Docs
+
+- [docs] Fix sentence case `h2` @oliviertassinari
+- [docs] Clarify contribution guide references @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix outdated link to support page @oliviertassinari
+- [docs] Fix use of Material UI @oliviertassinari
+- [docs] Update deprecated props in docs (#14295) @JCQuintas
+
+### Core
+
+- [core] Allow only v5.x for `MUI Core` renovate group (#14382) @LukasTy
+- [core] Avoid visual regression when using `@mui/material@6` (#14357) @cherniavskii
+- [core] Remove renovate rule targeting only `next` releases of `@mui/docs` (#14364) @LukasTy
+- [core] Support `@mui/material@6` peer dependency (#14142) @cherniavskii
+- [core] Use `useRtl` instead of `useTheme` to access direction (#14359) @LukasTy
+- [code-infra] Typecheck nested folders in playground (#14352) @JCQuintas
+- [infra] Fix Issue cleanup action @oliviertassinari
+- [license] Prepare renaming of argument names @oliviertassinari
+
+## 7.14.0
+
+_Aug 23, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow [filtering the axis on zoom](https://mui.com/x/react-charts/zoom-and-pan/#zoom-filtering), making the axis adapt by removing values outside the view.
+
+  <img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
+
+- 📊 Improve bar chart performances
+- 🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
+- 🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.14.0`
+
+- [DataGrid] Use readonly array result for `getTreeDataPath` (#11743) @pcorpet
+- [DataGrid] Use `event.key` for `Tab` and `Escape` keys (#14170) @k-rajat19
+- [DataGrid] Introduce selectors with arguments (#14236) @MBilalShafi
+- [DataGrid] include `api` in `gridCellParams` interface (#14201) @k-rajat19
+- [l10n] Improve Czech (cs-CZ) locale (#14135) @chirimiri22
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+
+#### `@mui/x-data-grid-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.14.0`.
+
+#### `@mui/x-data-grid-premium@7.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working for a single cell on non-first page (#14261) @arminmeh
+- [DataGridPremium] Fix `onCellSelectionModelChange` not triggered when additional cell range is selected (#14199) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.14.0`
+
+- [l10n] Improve Chinese (zh-HK) locale (#13289) @yeeharn
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+- [l10n] Improve Vietnamese (vi-VN) locale (#14238) @locnbk2002
+- [TimePicker] Handle `Space` and `Enter` on the `TimeClock` component @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.14.0`
+
+- [charts] Fix grid overflow with zooming (#14280) @alexfauquette
+- [charts] Improve bar chart performances (#14278) @alexfauquette
+- [charts] Test pointer events (#14042) @alexfauquette
+- [charts] Use `isPointInside` function for both graphs and axis (#14222) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.14.0`, plus:
+
+- [charts-pro] Zoom axis filtering (#14121) @JCQuintas
+
+### Docs
+
+- [docs] Consistent use of UTC and timezones (#14250) @oliviertassinari
+- [docs] Fix missing leading slashes in URLs (#14249) @oliviertassinari
+- [docs] Dash usage revision on pickers pages (#14260) @arthurbalduini
+
+### Core
+
+- [core] Follow JSDocs convention @oliviertassinari
+- [core] Prepare for material v6 (#14143) @LukasTy
+- [code-infra] Set up `eslint-plugin-testing-library` (#14232) @LukasTy
+- [infra] Updated mui-x roadmap links with new project URL (#14271) @michelengelen
+
 ## 7.13.0
 
 _Aug 16, 2024_
@@ -58,7 +207,7 @@ Same changes as in `@mui/x-date-pickers@7.13.0`.
 - [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
 - [charts] Support axis with the same value for all data points (#14191) @alexfauquette
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.13.0`.
 
@@ -132,7 +281,7 @@ Same changes as in `@mui/x-date-pickers@7.12.1`.
 - [charts] Fix charts vendor publish config (#14073) @JCQuintas
 - [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.12.1`, plus:
 

package/ChartContainerPro/ChartContainerPro.js

@@ -178,6 +178,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -239,6 +240,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/Heatmap/Heatmap.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import { useThemeProps } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
@@ -15,7 +16,11 @@ import { DefaultHeatmapTooltip } from './DefaultHeatmapTooltip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
-const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(props, ref) {
+const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiHeatmap'
+  });
   const {
     xAxis,
     yAxis,
@@ -289,6 +294,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -352,6 +358,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/LineChartPro/LineChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot, LineHighlightPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -27,7 +28,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(props, ref) {
+const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLineChartPro'
+  });
   const {
       zoom,
       onZoomChange

package/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -216,6 +217,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/ScatterChartPro/ScatterChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { ChartsOverlay } from '@mui/x-charts/ChartsOverlay';
 import { ScatterPlot } from '@mui/x-charts/ScatterChart';
 import { ZAxisContextProvider } from '@mui/x-charts/context';
@@ -26,7 +27,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(props, ref) {
+const ScatterChartPro = /*#__PURE__*/React.forwardRef(function ScatterChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiScatterChartPro'
+  });
   const {
       zoom,
       onZoomChange
@@ -284,6 +289,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -345,6 +351,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/context/CartesianProviderPro/CartesianProviderPro.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useDrawingArea, useSeries, CartesianContext, cartesianProviderUtils, useXExtremumGetter, useYExtremumGetter } from '@mui/x-charts/internals';
 import { useZoom } from '../ZoomProvider/useZoom';
+import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper';
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   computeValue
@@ -9,34 +11,68 @@ function CartesianProviderPro(props) {
   const {
     xAxis,
     yAxis,
-    dataset,
     children
   } = props;
   const formattedSeries = useSeries();
   const drawingArea = useDrawingArea();
   const {
-    zoomData
+    zoomData,
+    options
   } = useZoom();
   const xExtremumGetters = useXExtremumGetter();
   const yExtremumGetters = useYExtremumGetter();
+  const getFilters = React.useMemo(() => {
+    const xMapper = createAxisFilterMapper({
+      zoomData,
+      extremumGetter: xExtremumGetters,
+      formattedSeries,
+      direction: 'x'
+    });
+    const yMapper = createAxisFilterMapper({
+      zoomData,
+      extremumGetter: yExtremumGetters,
+      formattedSeries,
+      direction: 'y'
+    });
+    const xFilters = xAxis.reduce((acc, axis, index) => {
+      const filter = xMapper(axis, index);
+      if (filter !== null) {
+        acc[axis.id] = filter;
+      }
+      return acc;
+    }, {});
+    const yFilters = yAxis.reduce((acc, axis, index) => {
+      const filter = yMapper(axis, index);
+      if (filter !== null) {
+        acc[axis.id] = filter;
+      }
+      return acc;
+    }, {});
+    if (Object.keys(xFilters).length === 0 && Object.keys(yFilters).length === 0) {
+      return undefined;
+    }
+    return createGetAxisFilters(_extends({}, xFilters, yFilters));
+  }, [formattedSeries, xAxis, xExtremumGetters, yAxis, yExtremumGetters, zoomData]);
   const xValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
-    dataset,
     axisDirection: 'x',
-    zoomData
-  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, dataset, zoomData]);
+    zoomData,
+    zoomOptions: options,
+    getFilters
+  }), [drawingArea, formattedSeries, xAxis, xExtremumGetters, zoomData, options, getFilters]);
   const yValues = React.useMemo(() => computeValue({
     drawingArea,
     formattedSeries,
     axis: yAxis,
     extremumGetters: yExtremumGetters,
-    dataset,
     axisDirection: 'y',
-    zoomData
-  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, dataset, zoomData]);
+    zoomData,
+    zoomOptions: options,
+    getFilters
+  }), [drawingArea, formattedSeries, yAxis, yExtremumGetters, zoomData, options, getFilters]);
   const value = React.useMemo(() => ({
     isInitialized: true,
     data: {

package/context/CartesianProviderPro/createAxisFilterMapper.d.ts

@@ -0,0 +1,12 @@
+import { FormattedSeries, ExtremumGettersConfig, ExtremumFilter, ZoomAxisFilters, GetZoomAxisFilters } from '@mui/x-charts/internals';
+import { ChartsAxisProps, ScaleName, AxisConfig } from '@mui/x-charts';
+import { ZoomData } from '../ZoomProvider';
+type CreateAxisFilterMapperParams = {
+    zoomData: ZoomData[];
+    extremumGetter: ExtremumGettersConfig;
+    formattedSeries: FormattedSeries;
+    direction: 'x' | 'y';
+};
+export declare const createAxisFilterMapper: ({ zoomData, extremumGetter, formattedSeries, direction }: CreateAxisFilterMapperParams) => (axis: AxisConfig<ScaleName, any, ChartsAxisProps>, axisIndex: number) => ExtremumFilter | null;
+export declare const createGetAxisFilters: (filters: ZoomAxisFilters) => GetZoomAxisFilters;
+export {};

package/context/CartesianProviderPro/createAxisFilterMapper.js

@@ -0,0 +1,60 @@
+import { getAxisExtremum, isDefined, getScale } from '@mui/x-charts/internals';
+export const createAxisFilterMapper = ({
+  zoomData,
+  extremumGetter,
+  formattedSeries,
+  direction
+}) => (axis, axisIndex) => {
+  if (typeof axis.zoom !== 'object' || axis.zoom.filterMode !== 'discard') {
+    return null;
+  }
+  const zoom = zoomData?.find(({
+    axisId
+  }) => axisId === axis.id);
+  if (zoom === undefined || zoom.start <= 0 && zoom.end >= 100) {
+    // No zoom, or zoom with all data visible
+    return null;
+  }
+  let extremums = [];
+  const scaleType = axis.scaleType;
+  if (scaleType === 'point' || scaleType === 'band') {
+    extremums = [0, (axis.data?.length ?? 1) - 1];
+  } else {
+    extremums = getAxisExtremum(axis, extremumGetter, axisIndex === 0, formattedSeries);
+  }
+  let min;
+  let max;
+
+  // @ts-expect-error The function defaults to linear scale if the scaleType is not recognized.
+  [min, max] = getScale(scaleType, extremums, [0, 100]).nice().domain();
+  min = min instanceof Date ? min.getTime() : min;
+  max = max instanceof Date ? max.getTime() : max;
+  const minVal = min + zoom.start * (max - min) / 100;
+  const maxVal = min + zoom.end * (max - min) / 100;
+  return (value, dataIndex) => {
+    const val = value[direction] ?? axis.data?.[dataIndex];
+    if (val == null) {
+      // If the value does not exist because of missing data point, or out of range index, we just ignore.
+      return true;
+    }
+    if (axis.scaleType === 'point' || axis.scaleType === 'band' || typeof val === 'string') {
+      return dataIndex >= minVal && dataIndex <= maxVal;
+    }
+    return val >= minVal && val <= maxVal;
+  };
+};
+export const createGetAxisFilters = filters => ({
+  currentAxisId,
+  seriesXAxisId,
+  seriesYAxisId,
+  isDefaultAxis
+}) => {
+  return (value, dataIndex) => {
+    const axisId = currentAxisId === seriesXAxisId ? seriesYAxisId : seriesXAxisId;
+    if (!axisId || isDefaultAxis) {
+      return Object.values(filters ?? {})[0]?.(value, dataIndex) ?? true;
+    }
+    const data = [seriesYAxisId, seriesXAxisId].filter(id => id !== currentAxisId).map(id => filters[id ?? '']).filter(isDefined);
+    return data.every(f => f(value, dataIndex));
+  };
+};

package/context/ZoomProvider/Zoom.types.d.ts

@@ -93,6 +93,16 @@ export type ZoomOptions = {
      * @default true
      */
     panning?: boolean;
+    /**
+     * Defines how to filter the axis data when it is outside of the zoomed range of this axis.
+     *
+     * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same.
+     * - `discard`: The data outside the zoomed range is discarded for the other axes.
+     *    The other axes will be adjusted to fit the zoomed range.
+     *
+     * @default 'keep'
+     */
+    filterMode?: 'discard' | 'keep';
 };
 export type ZoomData = {
     /**

package/context/ZoomProvider/defaultizeZoom.js

@@ -6,7 +6,8 @@ const defaultZoomOptions = {
   step: 5,
   minSpan: 10,
   maxSpan: 100,
-  panning: true
+  panning: true,
+  filterMode: 'keep'
 };
 export const defaultizeZoom = (axis, axisDirection) => {
   if (!axis) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v7.0.0-alpha.1
+ * @mui/x-charts-pro v7.0.0-alpha.3
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyMzc1NTYwMDAwMA==";
+  const releaseInfo = "MTcyNDg4MjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/BarChartPro/BarChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from '@mui/x-charts/BarChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -28,7 +29,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [BarChart API](https://mui.com/x/api/charts/bar-chart/)
  */
-const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(props, ref) {
+const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiBarChartPro'
+  });
   const {
       zoom,
       onZoomChange

package/modern/ChartContainerPro/ChartContainerPro.js

@@ -178,6 +178,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -239,6 +240,7 @@ process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/modern/Heatmap/Heatmap.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
+import { useThemeProps } from '@mui/material/styles';
 import useId from '@mui/utils/useId';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import { ChartsAxis } from '@mui/x-charts/ChartsAxis';
 import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';
 import { ChartsClipPath } from '@mui/x-charts/ChartsClipPath';
@@ -15,7 +16,11 @@ import { DefaultHeatmapTooltip } from './DefaultHeatmapTooltip';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The GnBu: https://github.com/d3/d3-scale-chromatic/blob/main/src/sequential-multi/GnBu.js
 const defaultColorMap = interpolateRgbBasis(['#f7fcf0', '#e0f3db', '#ccebc5', '#a8ddb5', '#7bccc4', '#4eb3d3', '#2b8cbe', '#0868ac', '#084081']);
-const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(props, ref) {
+const Heatmap = /*#__PURE__*/React.forwardRef(function Heatmap(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiHeatmap'
+  });
   const {
     xAxis,
     yAxis,
@@ -289,6 +294,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -352,6 +358,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,

package/modern/LineChartPro/LineChartPro.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["zoom", "onZoomChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 import { AreaPlot, LineHighlightPlot, LinePlot, MarkPlot } from '@mui/x-charts/LineChart';
 import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler';
 import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
@@ -27,7 +28,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * - [LineChart API](https://mui.com/x/api/charts/line-chart/)
  */
-const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(props, ref) {
+const LineChartPro = /*#__PURE__*/React.forwardRef(function LineChartPro(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiLineChartPro'
+  });
   const {
       zoom,
       onZoomChange

package/modern/ResponsiveChartContainerPro/ResponsiveChartContainerPro.js

@@ -155,6 +155,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,
@@ -216,6 +217,7 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainerPro.propTypes =
     tickSize: PropTypes.number,
     valueFormatter: PropTypes.func,
     zoom: PropTypes.oneOfType([PropTypes.shape({
+      filterMode: PropTypes.oneOf(['discard', 'keep']),
       maxEnd: PropTypes.number,
       maxSpan: PropTypes.number,
       minSpan: PropTypes.number,