@mui/x-charts-pro 8.0.0-alpha.1 → 8.0.0-alpha.10

package/modern/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -0,0 +1,303 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea } from '@mui/x-charts/internals';
+import { creatZoomLookup } from "./creatZoomLookup.js";
+import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
+import { selectorChartZoomOptionsLookup } from "./useChartProZoom.selectors.js";
+
+// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
+function initializeZoomData(options) {
+  return Object.values(options).map(({
+    axisId,
+    minStart: start,
+    maxEnd: end
+  }) => ({
+    axisId,
+    start,
+    end
+  }));
+}
+export const useChartProZoom = ({
+  store,
+  instance,
+  svgRef,
+  params
+}) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+
+  // Add events
+  const panningEventCacheRef = React.useRef([]);
+  const zoomEventCacheRef = React.useRef([]);
+  const eventPrevDiff = React.useRef(0);
+  const interactionTimeoutRef = React.useRef(undefined);
+  const setIsInteracting = React.useCallback(isInteracting => {
+    store.update(prev => _extends({}, prev, {
+      zoom: _extends({}, prev.zoom, {
+        isInteracting
+      })
+    }));
+  }, [store]);
+  const setZoomDataCallback = React.useCallback(zoomData => {
+    store.update(prevState => {
+      const newZoomData = typeof zoomData === 'function' ? zoomData(prevState.zoom.zoomData) : zoomData;
+      params.onZoomChange?.(newZoomData);
+      return _extends({}, prevState, {
+        zoom: _extends({}, prevState.zoom, {
+          zoomData: newZoomData
+        })
+      });
+    });
+  }, [params, store]);
+
+  // Add event for chart panning
+  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
+  const isDraggingRef = React.useRef(false);
+  const touchStartRef = React.useRef(null);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanEnabled) {
+      return () => {};
+    }
+    const handlePan = event => {
+      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
+        return;
+      }
+      if (touchStartRef.current == null) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      const movementX = point.x - touchStartRef.current.x;
+      const movementY = (point.y - touchStartRef.current.y) * -1;
+      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
+        const options = optionsLookup[zoom.axisId];
+        if (!options || !options.panning) {
+          return zoom;
+        }
+        const min = zoom.start;
+        const max = zoom.end;
+        const span = max - min;
+        const MIN_PERCENT = options.minStart;
+        const MAX_PERCENT = options.maxEnd;
+        const movement = options.axisDirection === 'x' ? movementX : movementY;
+        const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+        let newMinPercent = min - movement / dimension * span;
+        let newMaxPercent = max - movement / dimension * span;
+        if (newMinPercent < MIN_PERCENT) {
+          newMinPercent = MIN_PERCENT;
+          newMaxPercent = newMinPercent + span;
+        }
+        if (newMaxPercent > MAX_PERCENT) {
+          newMaxPercent = MAX_PERCENT;
+          newMinPercent = newMaxPercent - span;
+        }
+        if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
+          return zoom;
+        }
+        return _extends({}, zoom, {
+          start: newMinPercent,
+          end: newMaxPercent
+        });
+      });
+      setZoomDataCallback(newZoomData);
+    };
+    const handleDown = event => {
+      panningEventCacheRef.current.push(event);
+      const point = getSVGPoint(element, event);
+      if (!instance.isPointInside(point)) {
+        return;
+      }
+      // If there is only one pointer, prevent selecting text
+      if (panningEventCacheRef.current.length === 1) {
+        event.preventDefault();
+      }
+      isDraggingRef.current = true;
+      setIsInteracting(true);
+      touchStartRef.current = {
+        x: point.x,
+        y: point.y,
+        zoomData: store.getSnapshot().zoom.zoomData
+      };
+    };
+    const handleUp = event => {
+      panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
+      setIsInteracting(false);
+      isDraggingRef.current = false;
+      touchStartRef.current = null;
+    };
+    element.addEventListener('pointerdown', handleDown);
+    document.addEventListener('pointermove', handlePan);
+    document.addEventListener('pointerup', handleUp);
+    document.addEventListener('pointercancel', handleUp);
+    document.addEventListener('pointerleave', handleUp);
+    return () => {
+      element.removeEventListener('pointerdown', handleDown);
+      document.removeEventListener('pointermove', handlePan);
+      document.removeEventListener('pointerup', handleUp);
+      document.removeEventListener('pointercancel', handleUp);
+      document.removeEventListener('pointerleave', handleUp);
+    };
+  }, [instance, svgRef, isDraggingRef, setIsInteracting, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+
+  // Add event for chart zoom in/out
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const wheelHandler = event => {
+      if (element === null) {
+        return;
+      }
+      const point = getSVGPoint(element, event);
+      if (!instance.isPointInside(point)) {
+        return;
+      }
+      event.preventDefault();
+      if (interactionTimeoutRef.current) {
+        clearTimeout(interactionTimeoutRef.current);
+      }
+      setIsInteracting(true);
+      // Debounce transition to `isInteractive=false`.
+      // Useful because wheel events don't have an "end" event.
+      interactionTimeoutRef.current = window.setTimeout(() => {
+        setIsInteracting(false);
+      }, 166);
+      setZoomDataCallback(prevZoomData => {
+        return prevZoomData.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getWheelScaleRatio(event, option.step);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    };
+    function pointerDownHandler(event) {
+      zoomEventCacheRef.current.push(event);
+      setIsInteracting(true);
+    }
+    function pointerMoveHandler(event) {
+      if (element === null) {
+        return;
+      }
+      const index = zoomEventCacheRef.current.findIndex(cachedEv => cachedEv.pointerId === event.pointerId);
+      zoomEventCacheRef.current[index] = event;
+
+      // Not a pinch gesture
+      if (zoomEventCacheRef.current.length !== 2) {
+        return;
+      }
+      const firstEvent = zoomEventCacheRef.current[0];
+      const curDiff = getDiff(zoomEventCacheRef.current);
+      setZoomDataCallback(prevZoomData => {
+        const newZoomData = prevZoomData.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const {
+            scaleRatio,
+            isZoomIn
+          } = getPinchScaleRatio(curDiff, eventPrevDiff.current, option.step);
+
+          // If the scale ratio is 0, it means the pinch gesture is not valid.
+          if (scaleRatio === 0) {
+            return zoom;
+          }
+          const point = getSVGPoint(element, firstEvent);
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+        eventPrevDiff.current = curDiff;
+        return newZoomData;
+      });
+    }
+    function pointerUpHandler(event) {
+      zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
+      if (zoomEventCacheRef.current.length < 2) {
+        eventPrevDiff.current = 0;
+      }
+      if (event.type === 'pointerup' || event.type === 'pointercancel') {
+        setIsInteracting(false);
+      }
+    }
+    element.addEventListener('wheel', wheelHandler);
+    element.addEventListener('pointerdown', pointerDownHandler);
+    element.addEventListener('pointermove', pointerMoveHandler);
+    element.addEventListener('pointerup', pointerUpHandler);
+    element.addEventListener('pointercancel', pointerUpHandler);
+    element.addEventListener('pointerout', pointerUpHandler);
+    element.addEventListener('pointerleave', pointerUpHandler);
+
+    // Prevent zooming the entire page on touch devices
+    element.addEventListener('touchstart', preventDefault);
+    element.addEventListener('touchmove', preventDefault);
+    return () => {
+      element.removeEventListener('wheel', wheelHandler);
+      element.removeEventListener('pointerdown', pointerDownHandler);
+      element.removeEventListener('pointermove', pointerMoveHandler);
+      element.removeEventListener('pointerup', pointerUpHandler);
+      element.removeEventListener('pointercancel', pointerUpHandler);
+      element.removeEventListener('pointerout', pointerUpHandler);
+      element.removeEventListener('pointerleave', pointerUpHandler);
+      element.removeEventListener('touchstart', preventDefault);
+      element.removeEventListener('touchmove', preventDefault);
+      if (interactionTimeoutRef.current) {
+        clearTimeout(interactionTimeoutRef.current);
+      }
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, setIsInteracting, instance, setZoomDataCallback]);
+  return {
+    publicAPI: {
+      setZoomData: setZoomDataCallback
+    },
+    instance: {
+      setZoomData: setZoomDataCallback
+    }
+  };
+};
+useChartProZoom.params = {
+  initialZoom: true,
+  onZoomChange: true
+};
+useChartProZoom.getDefaultizedParams = ({
+  params
+}) => {
+  const optionsLookup = _extends({}, creatZoomLookup('x')(params.defaultizedXAxis), creatZoomLookup('y')(params.defaultizedYAxis));
+  return _extends({}, params, {
+    optionsLookup
+  });
+};
+useChartProZoom.getInitialState = params => {
+  return {
+    zoom: {
+      zoomData: params.initialZoom === undefined ? initializeZoomData(params.optionsLookup) : params.initialZoom,
+      isInteracting: false
+    }
+  };
+};

package/modern/internals/plugins/useChartProZoom/useChartProZoom.selectors.js

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createSelector, selectorChartRawXAxis, selectorChartRawYAxis } from '@mui/x-charts/internals';
+import { creatZoomLookup } from "./creatZoomLookup.js";
+export const selectorChartZoomState = state => state.zoom;
+const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x'));
+const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y'));
+export const selectorChartZoomOptionsLookup = createSelector([selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], (xLookup, yLookup) => _extends({}, xLookup, yLookup));
+export const selectorChartZoomData = createSelector(selectorChartZoomState, zoom => zoom.zoomData);
+export const selectorChartZoomIsInteracting = createSelector(selectorChartZoomState, zoom => zoom.isInteracting);
+export const selectorChartZoomIsEnabled = createSelector(selectorChartZoomOptionsLookup, optionsLookup => Object.keys(optionsLookup).length > 0);

package/modern/internals/plugins/useChartProZoom/useChartProZoom.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/plugins/useChartProZoom/useChartProZoom.utils.js

@@ -0,0 +1,126 @@
+/**
+ * Helper to get the range (in percents of a reference range) corresponding to a given scale.
+ * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
+ * @param scaleRatio {number} The target scale ratio.
+ * @returns The range to display.
+ */
+export const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
+  const MIN_RANGE = options.minStart;
+  const MAX_RANGE = options.maxEnd;
+  const MIN_ALLOWED_SPAN = options.minSpan;
+  const minRange = currentZoomData.start;
+  const maxRange = currentZoomData.end;
+  const point = minRange + centerRatio * (maxRange - minRange);
+  let newMinRange = (minRange + point * (scaleRatio - 1)) / scaleRatio;
+  let newMaxRange = (maxRange + point * (scaleRatio - 1)) / scaleRatio;
+  let minSpillover = 0;
+  let maxSpillover = 0;
+  if (newMinRange < MIN_RANGE) {
+    minSpillover = Math.abs(newMinRange);
+    newMinRange = MIN_RANGE;
+  }
+  if (newMaxRange > MAX_RANGE) {
+    maxSpillover = Math.abs(newMaxRange - MAX_RANGE);
+    newMaxRange = MAX_RANGE;
+  }
+  if (minSpillover > 0 && maxSpillover > 0) {
+    return [MIN_RANGE, MAX_RANGE];
+  }
+  newMaxRange += minSpillover;
+  newMinRange -= maxSpillover;
+  newMinRange = Math.min(MAX_RANGE - MIN_ALLOWED_SPAN, Math.max(MIN_RANGE, newMinRange));
+  newMaxRange = Math.max(MIN_ALLOWED_SPAN, Math.min(MAX_RANGE, newMaxRange));
+  return [newMinRange, newMaxRange];
+};
+
+/**
+ * Checks if the new span is valid.
+ */
+export function isSpanValid(minRange, maxRange, isZoomIn, option) {
+  const newSpanPercent = maxRange - minRange;
+  if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
+    return false;
+  }
+  if (minRange < option.minStart || maxRange > option.maxEnd) {
+    return false;
+  }
+  return true;
+}
+function getMultiplier(event) {
+  const ctrlMultiplier = event.ctrlKey ? 3 : 1;
+
+  // DeltaMode: 0 is pixel, 1 is line, 2 is page
+  // This is defined by the browser.
+  if (event.deltaMode === 1) {
+    return 1 * ctrlMultiplier;
+  }
+  if (event.deltaMode) {
+    return 10 * ctrlMultiplier;
+  }
+  return 0.2 * ctrlMultiplier;
+}
+
+/**
+ * Get the scale ratio and if it's a zoom in or out from a wheel event.
+ */
+export function getWheelScaleRatio(event, step) {
+  const deltaY = -event.deltaY;
+  const multiplier = getMultiplier(event);
+  const scaledStep = step * multiplier * deltaY / 1000;
+  // Clamp the scale ratio between 0.1 and 1.9 so that the zoom is not too big or too small.
+  const scaleRatio = Math.min(Math.max(1 + scaledStep, 0.1), 1.9);
+  const isZoomIn = deltaY > 0;
+  return {
+    scaleRatio,
+    isZoomIn
+  };
+}
+
+/**
+ * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
+ */
+export function getPinchScaleRatio(curDiff, prevDiff, step) {
+  const scaledStep = step / 1000;
+  let scaleRatio = 0;
+  let isZoomIn = false;
+  const hasMoved = prevDiff > 0;
+  if (hasMoved && curDiff > prevDiff) {
+    // The distance between the two pointers has increased
+    scaleRatio = 1 + scaledStep;
+    isZoomIn = true;
+  }
+  if (hasMoved && curDiff < prevDiff) {
+    // The distance between the two pointers has decreased
+    scaleRatio = 1 - scaledStep;
+    isZoomIn = false;
+  }
+  return {
+    scaleRatio,
+    isZoomIn
+  };
+}
+export function getDiff(eventCache) {
+  const [firstEvent, secondEvent] = eventCache;
+  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
+}
+
+/**
+ * Get the ratio of the point in the horizontal center of the area.
+ */
+export function getHorizontalCenterRatio(point, area) {
+  const {
+    left,
+    width
+  } = area;
+  return (point.x - left) / width;
+}
+export function preventDefault(event) {
+  event.preventDefault();
+}
+export function getVerticalCenterRatio(point, area) {
+  const {
+    top,
+    height
+  } = area;
+  return (point.y - top) / height * -1 + 1;
+}

package/modern/internals/plugins/useChartProZoom/zoom.types.js

@@ -0,0 +1 @@
+export {};

package/modern/internals/utils/releaseInfo.js

@@ -1,6 +1,6 @@
-import { ponyfillGlobal } from '@mui/utils';
+import ponyfillGlobal from '@mui/utils/ponyfillGlobal';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczMjIzMDAwMDAwMA==";
+  const releaseInfo = "MTczODI5OTYwMDAwMA==";
   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/models/index.js

@@ -1 +1,2 @@
-export * from "./seriesType/index.js";
+export * from "./seriesType/index.js";
+export {};

package/node/BarChartPro/BarChartPro.js

@@ -22,17 +22,16 @@ var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 var _internals = require("@mui/x-charts/internals");
-var _ChartContainerPro = require("../ChartContainerPro");
-var _ZoomSetup = require("../context/ZoomProvider/ZoomSetup");
-var _useZoom = require("../context/ZoomProvider/useZoom");
+var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
+var _zoom = require("../hooks/zoom");
+var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
+var _ChartDataProviderPro = require("../ChartDataProviderPro");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["zoom", "onZoomChange"];
+const _excluded = ["initialZoom", "onZoomChange", "apiRef"];
 function BarChartPlotZoom(props) {
-  const {
-    isInteracting
-  } = (0, _useZoom.useZoom)();
+  const isInteracting = (0, _zoom.useIsZoomInteracting)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, (0, _extends2.default)({}, props, {
-    skipAnimation: isInteracting || undefined
+    skipAnimation: isInteracting || props.skipAnimation
   }));
 }
 process.env.NODE_ENV !== "production" ? BarChartPlotZoom.propTypes = {
@@ -91,11 +90,13 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     name: 'MuiBarChartPro'
   });
   const {
-      zoom,
-      onZoomChange
+      initialZoom,
+      onZoomChange,
+      apiRef
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
+    chartsWrapperProps,
     chartContainerProps,
     barPlotProps,
     axisClickHandlerProps,
@@ -108,15 +109,23 @@ const BarChartPro = exports.BarChartPro = /*#__PURE__*/React.forwardRef(function
     legendProps,
     children
   } = (0, _internals.useBarChartProps)(other);
+  const {
+    chartDataProviderProProps,
+    chartsSurfaceProps
+  } = (0, _useChartContainerProProps.useChartContainerProProps)((0, _extends2.default)({}, chartContainerProps, {
+    initialZoom,
+    onZoomChange,
+    apiRef
+  }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainerPro.ChartContainerPro, (0, _extends2.default)({
-    ref: ref
-  }, chartContainerProps, {
-    zoom: zoom,
-    onZoomChange: onZoomChange,
-    children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BarChartPlotZoom, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomSetup.ZoomSetup, {}), children]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BarChartPlotZoom, (0, _extends2.default)({}, barPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      }))]
+    }))
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
@@ -124,6 +133,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      setZoomData: _propTypes.default.func.isRequired
+    })
+  }),
   /**
    * The configuration of axes highlight.
    * Default is set to 'band' in the bar direction.
@@ -186,12 +200,26 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   hideLegend: _propTypes.default.bool,
   /**
-   * The item currently highlighted. Turns highlighting into a controlled prop.
+   * The highlighted item.
+   * Used when the highlight is controlled.
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
+  /**
+   * The list of zoom data related to each axis.
+   */
+  initialZoom: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    end: _propTypes.default.number.isRequired,
+    start: _propTypes.default.number.isRequired
+  })),
   /**
    * The direction of the bar elements.
    * @default 'vertical'
@@ -212,7 +240,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -272,6 +299,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Indicate which axis to display the top of the charts.
@@ -314,7 +342,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -325,7 +352,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -377,7 +403,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -388,7 +413,6 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -410,11 +434,28 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     }), _propTypes.default.bool])
   })),
   /**
-   * The list of zoom data related to each axis.
+   * The configuration of the z-axes.
    */
-  zoom: _propTypes.default.arrayOf(_propTypes.default.shape({
-    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    end: _propTypes.default.number.isRequired,
-    start: _propTypes.default.number.isRequired
+  zAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      type: _propTypes.default.oneOf(['ordinal']).isRequired,
+      unknownColor: _propTypes.default.string,
+      values: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]).isRequired)
+    }), _propTypes.default.shape({
+      color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
+      max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+      type: _propTypes.default.oneOf(['continuous']).isRequired
+    }), _propTypes.default.shape({
+      colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+      thresholds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]).isRequired).isRequired,
+      type: _propTypes.default.oneOf(['piecewise']).isRequired
+    })]),
+    data: _propTypes.default.array,
+    dataKey: _propTypes.default.string,
+    id: _propTypes.default.string,
+    max: _propTypes.default.number,
+    min: _propTypes.default.number
   }))
 } : void 0;