@mui/x-charts-pro 8.7.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,104 @@
 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_

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 = "MTc1MTU4MDAwMDAwMA==";
+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/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,38 +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})`,
     style: {
       touchAction: 'none'
     },
-    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, {
+    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,

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -12,6 +12,7 @@ var _styles = require("@mui/material/styles");
 var _internals = require("@mui/x-charts/internals");
 var React = _interopRequireWildcard(require("react"));
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _system = require("@mui/system");
 var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
 var _ChartAxisZoomSliderThumb = require("./ChartAxisZoomSliderThumb");
 var _ChartsTooltipZoomSliderValue = require("./ChartsTooltipZoomSliderValue");
@@ -19,18 +20,31 @@ var _zoomUtils = require("./zoom-utils");
 var _constants = require("./constants");
 var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect')(({
+const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
+  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'preview'
+})(({
   theme
 }) => ({
-  '&': {
-    fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
-    cursor: 'grab'
-  }
+  fill: theme.palette.mode === 'dark' ? (theme.vars || theme).palette.grey[500] : (theme.vars || theme).palette.grey[600],
+  cursor: 'grab',
+  variants: [{
+    props: {
+      preview: true
+    },
+    style: {
+      fill: 'transparent',
+      rx: 4,
+      ry: 4,
+      stroke: theme.palette.grey[500]
+    }
+  }]
 }));
 function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
+  size,
+  preview,
   zoomData,
   reverse,
   showTooltip,
@@ -169,11 +183,11 @@ function ChartAxisZoomSliderActiveTrack({
     previewX = (zoomStart - minStart) / range * drawingArea.width;
     previewY = 0;
     previewWidth = drawingArea.width * (zoomEnd - zoomStart) / range;
-    previewHeight = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewHeight = size;
     startThumbX = (zoomStart - minStart) / range * drawingArea.width;
-    startThumbY = 0;
+    startThumbY = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     endThumbX = (zoomEnd - minStart) / range * drawingArea.width;
-    endThumbY = 0;
+    endThumbY = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     if (reverse) {
       previewX = drawingArea.width - previewX - previewWidth;
       startThumbX = drawingArea.width - startThumbX;
@@ -184,11 +198,11 @@ function ChartAxisZoomSliderActiveTrack({
   } else {
     previewX = 0;
     previewY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
-    previewWidth = _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE;
+    previewWidth = size;
     previewHeight = drawingArea.height * (zoomEnd - zoomStart) / range;
-    startThumbX = 0;
+    startThumbX = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     startThumbY = drawingArea.height - (zoomStart - minStart) / range * drawingArea.height;
-    endThumbX = 0;
+    endThumbX = _constants.ZOOM_SLIDER_THUMB_HEIGHT < size ? (size - _constants.ZOOM_SLIDER_THUMB_HEIGHT) / 2 : 0;
     endThumbY = drawingArea.height - (zoomEnd - minStart) / range * drawingArea.height;
     if (reverse) {
       previewY = drawingArea.height - previewY - previewHeight;
@@ -198,12 +212,13 @@ function ChartAxisZoomSliderActiveTrack({
     startThumbY -= previewThumbHeight / 2;
     endThumbY -= previewThumbHeight / 2;
   }
-  const previewOffset = (_constants.ZOOM_SLIDER_THUMB_HEIGHT - _constants.ZOOM_SLIDER_ACTIVE_TRACK_SIZE) / 2;
+  const previewOffset = _constants.ZOOM_SLIDER_THUMB_HEIGHT > size ? (_constants.ZOOM_SLIDER_THUMB_HEIGHT - size) / 2 : 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomSliderActiveTrackRect, {
       ref: activePreviewRectRef,
       x: previewX + (axisDirection === 'x' ? 0 : previewOffset),
       y: previewY + (axisDirection === 'x' ? previewOffset : 0),
+      preview: preview,
       width: previewWidth,
       height: previewHeight,
       onPointerEnter: onPointerEnter,

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AxisId } from '@mui/x-charts/internals';
+interface ChartAxisZoomSliderPreviewProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  reverse: boolean;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartAxisZoomSliderPreview({
+  axisId,
+  axisDirection,
+  reverse,
+  ...props
+}: ChartAxisZoomSliderPreviewProps): React.JSX.Element;
+export {};

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartAxisZoomSliderPreview = ChartAxisZoomSliderPreview;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var _system = require("@mui/system");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
+var _ChartAxisZoomSliderPreviewContent = require("./ChartAxisZoomSliderPreviewContent");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["axisId", "axisDirection", "reverse"];
+const PreviewBackgroundRect = (0, _styles.styled)('rect')(({
+  theme
+}) => ({
+  rx: 4,
+  ry: 4,
+  stroke: theme.palette.grey[700],
+  fill: (0, _system.alpha)(theme.palette.grey[700], 0.4)
+}));
+function ChartAxisZoomSliderPreview(_ref) {
+  let {
+      axisId,
+      axisDirection
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, props, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewRectangles, (0, _extends2.default)({}, props, {
+      axisId: axisId,
+      axisDirection: axisDirection
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, props, {
+      fill: "transparent",
+      rx: 4,
+      ry: 4
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartAxisZoomSliderPreviewContent.ChartAxisZoomSliderPreviewContent, (0, _extends2.default)({
+      axisId: axisId
+    }, props))]
+  }));
+}
+function PreviewRectangles(props) {
+  const {
+    axisId,
+    axisDirection
+  } = props;
+  const store = (0, _internals.useStore)();
+  const zoomData = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartAxisZoomData, [axisId]);
+  const zoomOptions = (0, _internals.useSelector)(store, _internals.selectorChartAxisZoomOptionsLookup, [axisId]);
+  const id = (0, _useId.default)();
+  if (!zoomData) {
+    return null;
+  }
+  const maskId = `zoom-preview-mask-${axisId}-${id}`;
+  let x;
+  let y;
+  let width;
+  let height;
+  const range = zoomOptions.maxEnd - zoomOptions.minStart;
+  if (axisDirection === 'x') {
+    x = props.x + (zoomData.start - zoomOptions.minStart) / range * props.width;
+    y = props.y;
+    width = (zoomData.end - zoomData.start) / range * props.width;
+    height = props.height;
+  } else {
+    x = props.x;
+    y = props.y + (1 - zoomData.end / range) * props.height;
+    width = props.width;
+    height = (zoomData.end - zoomData.start) / range * props.height;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("mask", {
+      id: maskId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: props.x,
+        y: props.y,
+        width: props.width,
+        height: props.height,
+        fill: "white"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        fill: "black",
+        rx: 4,
+        ry: 4
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewBackgroundRect, {
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      mask: `url(#${maskId})`
+    })]
+  });
+}

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { AxisId } from '@mui/x-charts/internals';
+interface ChartAxisZoomSliderPreviewContentProps {
+  axisId: AxisId;
+  x: number;
+  y: number;
+  height: number;
+  width: number;
+}
+export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): React.JSX.Element;
+export {};