@mui/x-charts-pro 8.6.0 → 8.8.0

package/BarChartPro/BarChartPro.d.ts

@@ -6,7 +6,7 @@ import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
 export interface BarChartProSlots extends Omit<BarChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface BarChartProSlotProps extends Omit<BarChartSlotProps, 'toolbar'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {}
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * Overridable component slots.
    * @default {}

package/BarChartPro/BarChartPro.js

@@ -157,6 +157,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: _propTypes.default.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -218,6 +226,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when a bar item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.
@@ -329,6 +345,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -394,6 +411,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -454,6 +472,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -514,6 +533,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -574,6 +594,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -634,6 +655,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -694,6 +716,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -754,6 +777,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -826,6 +850,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -890,6 +915,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -949,6 +975,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1008,6 +1035,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1067,6 +1095,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1126,6 +1155,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1185,6 +1215,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),
@@ -1244,6 +1275,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
         enabled: _propTypes.default.bool,
+        preview: _propTypes.default.bool,
         showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
         size: _propTypes.default.number
       }),

package/CHANGELOG.md

@@ -5,6 +5,207 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.8.0
+
+_Jul 11, 2025_
+
+We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Chart zoom preview can be enabled
+
+  <img width="758" alt="chart with x-axis preview" src="https://github.com/user-attachments/assets/50ce6f61-16dc-4e9b-a727-ca65d80927d7" />
+
+- 🌎 Add Indonesian (id-ID) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@kennarddh
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.8.0`
+
+- [DataGrid] Fix `useGridSelector` missing subscription in `React.StrictMode` (#18676) @cherniavskii
+- [DataGrid] Fix scrollbar filler `z-index` (#18688) @KenanYusuf
+- [DataGrid] Set correct data source cache chunk size when pagination is disabled (#18636) @arminmeh
+- [l10n] Add Indonesian (id-ID) locale (#18710) @kennarddh
+
+#### `@mui/x-data-grid-pro@8.8.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@8.8.0`, plus:
+
+- [DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport (#18557) @MBilalShafi
+- [DataGridPro] Set correct parent paths when tree is refreshed with data source tree data and row grouping (#18715) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.8.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@8.8.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.8.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.8.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@8.8.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.8.0`
+
+- [charts] Add control to the axis highlight (#17900) @alexfauquette
+- [charts] Avoid processing area plot data if area isn't used in series (#18712) @bernardobelchior
+- [charts] Make smarter default domain limit (#18506) @alexfauquette
+
+#### `@mui/x-charts-pro@8.8.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@8.8.0`, plus:
+
+- [charts-pro] Add `funnelDirection` to control pyramid direction (#18568) @JCQuintas
+- [charts-pro] Add `onBeforeExport` callback (#18722) @bernardobelchior
+- [charts-pro] Add chart zoom preview (#18267) @bernardobelchior
+- [charts-pro] Allow customizing scatter preview marker size (#18726) @bernardobelchior
+- [charts-pro] Allow disabling the copy of styles in charts export (#18753) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.8.0`
+
+- [tree view] Fix state update that caused scrolling bug when lazy loading and `checkboxSelection` are enabled (#18749) @rita-codes
+
+#### `@mui/x-tree-view-pro@8.8.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-tree-view@8.8.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.8.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add standalone Pyramid chart page to improve SEO (#18527) @prakhargupta1
+- [docs] Add example to customise line interaction (#18539) @alexfauquette
+- [docs] Fix `size` column filtering in files tree demo (#17952) @cherniavskii
+- [docs] Generate `llms.txt` for X and their products (#18595) @siriwatknp
+- [docs] Improve bar chart demos on mobile (#18721) @alexfauquette
+- [docs] Refine charts overview page (#17447) @noraleonte
+
+### Miscellaneous
+
+- [code-infra] Ensure all `@mui/*` packages are picked by `Material UI` renovate group (#18711) @LukasTy
+- [code-infra] Fix broken CI (#18716) @LukasTy
+- [code-infra] Refactor `prettier` config resolving (#18720) @LukasTy
+- [test] Increase data points in chart benchmarks (#18714) @bernardobelchior
+
+## 8.7.0
+
+_Jul 4, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add `useChartProApiRef` for easier access to the API
+- 📆 Support different start and end `referenceDate` props on range components
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+- 🌎 Improve Greek (el-GR) translations on the Charts
+- 🌎 Improve Danish (da-DK) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimkuragkovskiy, @whythecode
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @brijeshb42, @mapache-salvaje, @arminmeh, @bernardobelchior, @bharatkashyap, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.7.0`
+
+- [DataGrid] Fix column state restore with controlled column visibility model (#18567) @arminmeh
+- [DataGrid] Fix styling virtualized column headers (#18603) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18537) @ShahrazH
+
+#### `@mui/x-data-grid-pro@8.7.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@8.7.0`.
+
+#### `@mui/x-data-grid-premium@8.7.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@8.7.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.7.0`
+
+- [pickers] Support different `start` and `end` `referenceDate` props on range components (#18549) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.7.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@8.7.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.7.0`
+
+- [charts] Export `ChartsReferenceLineProps` (#18598) @bernardobelchior
+- [charts] Extract bar and line plot logic into reusable hooks (#18541) @bernardobelchior
+- [charts] Extract plot logic into separate files for reuse (#18522) @bernardobelchior
+- [charts] Profile charts benchmarks using chromium (#18528) @bernardobelchior
+- [l10n] Add Greek (el-GR) locale to charts (#18548) @whythecode
+
+#### `@mui/x-charts-pro@8.7.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@8.7.0`, plus:
+
+- [charts-pro] Add `useChartProApiRef` for easier refs (#18013) @JCQuintas
+- [charts-pro] Add tests and classes to zoom slider (#18660) @JCQuintas
+- [charts-pro] Fix geometry not handling gestures in specific scenarios (#18651) @JCQuintas
+- [charts-pro] Rename `useChartApiContext` to `useChartProApiContext` (#18565) @JCQuintas
+- [charts-pro] Zoom pointer improvements (#17480) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.7.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.7.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-tree-view@8.7.0`, plus:
+
+- [tree view pro] Add missing `dataSource` JSDoc (#18650) @LukasTy
+
+### Docs
+
+- [docs] Add MCP stub (#18204) @bharatkashyap
+- [docs] Fix AI Assistant proxy rewrite prefix (#18661) @arminmeh
+- [docs] Improve test README.MD (#18634) @LukasTy
+- [docs] Provide workaround for pie chart composition (#18600) @alexfauquette
+- [docs][charts] Add donut chart as a special case of a pie chart (#18652) @bernardobelchior
+- [docs][charts] Centralize country and continent data (#18604) @bernardobelchior
+- [docs][data grid] Audit and revise the Pro row docs (#17926) @mapache-salvaje
+- [docs][pickers] Add mention of theme augmentation in relevant migration section (#18608) @LukasTy
+
+### Core
+
+- [core] Avoid stringifying `document` object (#18657) @vadimkuragkovskiy
+
+### Miscellaneous
+
+- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
+- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
+- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
+- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
+- [infra] Move pushArgos script to code-infra (#18667) @Janpot
+- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
+- [release] Add missing contributor to changelog (#18561) @bernardobelchior
+
 ## 8.6.0
 
 _Jun 27, 2025_
@@ -19,7 +220,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 🌎 Improve German (de-DE) locale
 
 Special thanks go out to the community members for their valuable contributions:
-@ShahrazH, @vadimka123
+@omalyutin, @ShahrazH, @vadimka123
 
 The following are all team members who have contributed to this release:
 @arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855

package/ChartContainerPro/index.d.ts

@@ -1,3 +1,9 @@
 import "../typeOverloads/index.js";
+import type { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import type { ChartProApi as ChartProApiOriginal, ProPluginsPerSeriesType } from "../context/ChartProApi.js";
+import type { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export * from "./ChartContainerPro.js";
-export * from "./ChartProApi.js";
+/**
+ * @deprecated Use `ChartProApi` from `@mui/x-charts/context` instead.
+ */
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartProApiOriginal<ChartType, Signatures>;

package/ChartContainerPro/index.js

@@ -14,15 +14,4 @@ Object.keys(_ChartContainerPro).forEach(function (key) {
       return _ChartContainerPro[key];
     }
   });
-});
-var _ChartProApi = require("./ChartProApi");
-Object.keys(_ChartProApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartProApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartProApi[key];
-    }
-  });
 });

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
+const releaseInfo = "MTc1MjE4NDgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -90,6 +90,12 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.shape({
+    preferStrictDomainInLineCharts: _propTypes.default.bool
+  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartZoomSlider/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./ChartZoomSlider.js";
-export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { type ChartAxisZoomSliderThumbClasses, type ChartAxisZoomSliderThumbClassKey, chartAxisZoomSliderThumbClasses } from "./internals/chartAxisZoomSliderThumbClasses.js";
+export { type ChartAxisZoomSliderTrackClasses, type ChartAxisZoomSliderTrackClassKey, chartAxisZoomSliderTrackClasses } from "./internals/chartAxisZoomSliderTrackClasses.js";

package/ChartZoomSlider/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  chartAxisZoomSliderThumbClasses: true
+  chartAxisZoomSliderThumbClasses: true,
+  chartAxisZoomSliderTrackClasses: true
 };
 Object.defineProperty(exports, "chartAxisZoomSliderThumbClasses", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "chartAxisZoomSliderThumbClasses", {
     return _chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses;
   }
 });
+Object.defineProperty(exports, "chartAxisZoomSliderTrackClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartAxisZoomSliderTrackClasses.chartAxisZoomSliderTrackClasses;
+  }
+});
 var _ChartZoomSlider = require("./ChartZoomSlider");
 Object.keys(_ChartZoomSlider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,4 +31,5 @@ Object.keys(_ChartZoomSlider).forEach(function (key) {
     }
   });
 });
-var _chartAxisZoomSliderThumbClasses = require("./internals/chartAxisZoomSliderThumbClasses");
+var _chartAxisZoomSliderThumbClasses = require("./internals/chartAxisZoomSliderThumbClasses");
+var _chartAxisZoomSliderTrackClasses = require("./internals/chartAxisZoomSliderTrackClasses");

package/ChartZoomSlider/internals/ChartAxisZoomSlider.js

@@ -9,6 +9,7 @@ exports.ChartAxisZoomSlider = ChartAxisZoomSlider;
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
+var _ChartAxisZoomSliderPreview = require("./ChartAxisZoomSliderPreview");
 var _constants = require("./constants");
 var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
 var _ChartAxisZoomSliderTrack = require("./ChartAxisZoomSliderTrack");
@@ -25,6 +26,7 @@ function ChartAxisZoomSlider({
   const store = (0, _internals.useStore)();
   const drawingArea = (0, _internals.useDrawingArea)();
   const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = (0, _internals.useSelector)(store, _internals.selectorChartAxisZoomOptionsLookup, [axisId]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const {
     xAxis
@@ -32,6 +34,7 @@ function ChartAxisZoomSlider({
   const {
     yAxis
   } = (0, _hooks.useYAxes)();
+  const showPreview = zoomOptions.slider.preview;
   if (!zoomData) {
     return null;
   }
@@ -40,6 +43,7 @@ function ChartAxisZoomSlider({
   let reverse;
   let axisPosition;
   let tooltipConditions;
+  const sliderSize = showPreview ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : _constants.ZOOM_SLIDER_SIZE;
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
     if (!axis || axis.position === 'none') {
@@ -47,7 +51,7 @@ function ChartAxisZoomSlider({
     }
     const axisSize = axis.height;
     x = drawingArea.left;
-    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - _constants.ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
+    y = axis.position === 'bottom' ? drawingArea.top + drawingArea.height + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.top - axis.offset - axisSize - sliderSize - _internals.ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'bottom';
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? _internals.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
@@ -57,34 +61,49 @@ function ChartAxisZoomSlider({
       return null;
     }
     const axisSize = axis.width;
-    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - _constants.ZOOM_SLIDER_SIZE - _internals.ZOOM_SLIDER_MARGIN;
+    x = axis.position === 'right' ? drawingArea.left + drawingArea.width + axis.offset + axisSize + _internals.ZOOM_SLIDER_MARGIN : drawingArea.left - axis.offset - axisSize - sliderSize - _internals.ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
     axisPosition = axis.position ?? 'left';
     tooltipConditions = axis.zoom?.slider?.showTooltip ?? _internals.DEFAULT_ZOOM_SLIDER_SHOW_TOOLTIP;
   }
-  const backgroundRectOffset = (_constants.ZOOM_SLIDER_SIZE - _constants.ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const backgroundRectOffset = (sliderSize - _constants.ZOOM_SLIDER_TRACK_SIZE) / 2;
+  const track = showPreview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderPreview.ChartAxisZoomSliderPreview, {
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    x: 0,
+    y: 0,
+    height: axisDirection === 'x' ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : _internals.ZOOM_SLIDER_PREVIEW_SIZE
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderTrack.ChartAxisZoomSliderTrack, {
+    x: axisDirection === 'x' ? 0 : backgroundRectOffset,
+    y: axisDirection === 'x' ? backgroundRectOffset : 0,
+    height: axisDirection === 'x' ? _constants.ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
+    width: axisDirection === 'x' ? drawingArea.width : _constants.ZOOM_SLIDER_TRACK_SIZE,
+    rx: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
+    ry: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
+    axisId: axisId,
+    axisDirection: axisDirection,
+    reverse: reverse,
+    onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
+    onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    "data-charts-zoom-slider": true,
     transform: `translate(${x} ${y})`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderTrack.ChartAxisZoomSliderTrack, {
-      x: axisDirection === 'x' ? 0 : backgroundRectOffset,
-      y: axisDirection === 'x' ? backgroundRectOffset : 0,
-      height: axisDirection === 'x' ? _constants.ZOOM_SLIDER_TRACK_SIZE : drawingArea.height,
-      width: axisDirection === 'x' ? drawingArea.width : _constants.ZOOM_SLIDER_TRACK_SIZE,
-      rx: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
-      ry: _constants.ZOOM_SLIDER_TRACK_SIZE / 2,
-      axisId: axisId,
-      axisDirection: axisDirection,
-      reverse: reverse,
-      onSelectStart: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
-      onSelectEnd: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderActiveTrack.ChartAxisZoomSliderActiveTrack, {
+    style: {
+      touchAction: 'none'
+    },
+    children: [track, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderActiveTrack.ChartAxisZoomSliderActiveTrack, {
       zoomData: zoomData,
       axisId: axisId,
       axisPosition: axisPosition,
       axisDirection: axisDirection,
       reverse: reverse,
       showTooltip: showTooltip && tooltipConditions !== 'never' || tooltipConditions === 'always',
+      size: showPreview ? _internals.ZOOM_SLIDER_PREVIEW_SIZE : _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE,
+      preview: showPreview,
       onPointerEnter: tooltipConditions === 'hover' ? () => setShowTooltip(true) : undefined,
       onPointerLeave: tooltipConditions === 'hover' ? () => setShowTooltip(false) : undefined
     })]

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.d.ts

@@ -4,6 +4,8 @@ export interface ChartAxisZoomSliderActiveTrackProps {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   axisPosition: 'top' | 'bottom' | 'left' | 'right';
+  size: number;
+  preview: boolean;
   zoomData: ZoomData;
   reverse?: boolean;
   showTooltip: boolean;
@@ -14,6 +16,8 @@ export declare function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,