Merge branch 'master' into export-use-funnel-series

Author: JCQuintas

package.json

@@ -94,7 +94,7 @@
     "@mui/monorepo": "github:mui/material-ui#adb0a76b09080d02f899789266336b297850d86b",
     "@mui/utils": "^7.0.2",
     "@next/eslint-plugin-next": "15.3.2",
-    "@octokit/plugin-retry": "^7.2.1",
+    "@octokit/plugin-retry": "^8.0.1",
     "@octokit/rest": "^21.1.1",
     "@playwright/test": "^1.52.0",
     "@types/babel__core": "^7.20.5",
@@ -104,7 +104,7 @@
     "@types/karma": "^6.3.9",
     "@types/lodash": "^4.17.16",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.15.18",
+    "@types/node": "^22.15.21",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "@types/requestidlecallback": "^0.3.7",
@@ -173,7 +173,7 @@
     "lodash": "^4.17.21",
     "magic-string": "^0.30.17",
     "markdownlint-cli2": "^0.18.1",
-    "mocha": "^11.3.0",
+    "mocha": "^11.5.0",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.48",
     "null-loader": "^4.0.1",

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSlider.tsx

@@ -32,6 +32,7 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
   const store = useStore();
   const drawingArea = useDrawingArea();
   const zoomData = useSelector(store, selectorChartAxisZoomData, axisId);
+  const [showTooltip, setShowTooltip] = React.useState(false);
   const { xAxis } = useXAxes();
   const { yAxis } = useYAxes();
 
@@ -92,13 +93,18 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
         axisId={axisId}
         axisDirection={axisDirection}
         reverse={reverse}
+        onSelectStart={() => setShowTooltip(true)}
+        onSelectEnd={() => setShowTooltip(false)}
       />
       <ChartAxisZoomSliderActiveTrack
         zoomData={zoomData}
         axisId={axisId}
         axisPosition={axisPosition}
         axisDirection={axisDirection}
         reverse={reverse}
+        showTooltip={showTooltip}
+        onPointerEnter={() => setShowTooltip(true)}
+        onPointerLeave={() => setShowTooltip(false)}
       />
     </g>
   );

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.tsx

@@ -37,28 +37,35 @@ const ZoomSliderActiveTrackRect = styled('rect')(({ theme }) => ({
 const formatter = Intl.NumberFormat(undefined, { maximumFractionDigits: 0 });
 const zoomValueFormatter = (value: number) => formatter.format(value);
 
+export interface ChartAxisZoomSliderActiveTrackProps {
+  axisId: AxisId;
+  axisDirection: 'x' | 'y';
+  axisPosition: 'top' | 'bottom' | 'left' | 'right';
+  zoomData: ZoomData;
+  reverse?: boolean;
+  valueFormatter?: (value: number) => string;
+  showTooltip: boolean;
+  onPointerEnter?: () => void;
+  onPointerLeave?: () => void;
+}
+
 export function ChartAxisZoomSliderActiveTrack({
   axisId,
   axisDirection,
   axisPosition,
   zoomData,
   reverse,
   valueFormatter = zoomValueFormatter,
-}: {
-  axisId: AxisId;
-  axisDirection: 'x' | 'y';
-  axisPosition: 'top' | 'bottom' | 'left' | 'right';
-  zoomData: ZoomData;
-  reverse: boolean;
-  valueFormatter?: (value: number) => string;
-}) {
+  showTooltip,
+  onPointerEnter,
+  onPointerLeave,
+}: ChartAxisZoomSliderActiveTrackProps) {
   const { instance, svgRef } = useChartContext<[UseChartProZoomSignature]>();
   const store = useStore<[UseChartProZoomSignature]>();
   const drawingArea = useDrawingArea();
   const activePreviewRectRef = React.useRef<SVGRectElement>(null);
   const [startThumbEl, setStartThumbEl] = React.useState<SVGRectElement | null>(null);
   const [endThumbEl, setEndThumbEl] = React.useState<SVGRectElement | null>(null);
-  const [showTooltip, setShowTooltip] = React.useState<null | 'start' | 'end' | 'both'>(null);
 
   const previewThumbWidth =
     axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
@@ -102,7 +109,6 @@ export function ChartAxisZoomSliderActiveTrack({
     const onPointerUp = () => {
       activePreviewRect.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
-      setShowTooltip(null);
     };
 
     const onPointerDown = (event: PointerEvent) => {
@@ -128,7 +134,6 @@ export function ChartAxisZoomSliderActiveTrack({
       pointerZoomMin = pointerDownZoom - axisZoomData.start;
       pointerZoomMax = 100 - (axisZoomData.end - pointerDownZoom);
 
-      setShowTooltip('both');
       document.addEventListener('pointerup', onPointerUp);
       activePreviewRect.addEventListener('pointermove', onPointerMove);
     };
@@ -272,8 +277,8 @@ export function ChartAxisZoomSliderActiveTrack({
         y={previewY + (axisDirection === 'x' ? previewOffset : 0)}
         width={previewWidth}
         height={previewHeight}
-        onPointerEnter={() => setShowTooltip('both')}
-        onPointerLeave={() => setShowTooltip(null)}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
       />
       <ChartAxisZoomSliderThumb
         ref={setStartThumbEl}
@@ -283,8 +288,8 @@ export function ChartAxisZoomSliderActiveTrack({
         height={previewThumbHeight}
         orientation={axisDirection === 'x' ? 'horizontal' : 'vertical'}
         onMove={onStartThumbMove}
-        onPointerEnter={() => setShowTooltip('start')}
-        onPointerLeave={() => setShowTooltip(null)}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
         placement="start"
       />
       <ChartAxisZoomSliderThumb
@@ -295,20 +300,20 @@ export function ChartAxisZoomSliderActiveTrack({
         height={previewThumbHeight}
         orientation={axisDirection === 'x' ? 'horizontal' : 'vertical'}
         onMove={onEndThumbMove}
-        onPointerEnter={() => setShowTooltip('end')}
-        onPointerLeave={() => setShowTooltip(null)}
+        onPointerEnter={onPointerEnter}
+        onPointerLeave={onPointerLeave}
         placement="end"
       />
       <ChartsTooltipZoomSliderValue
         anchorEl={startThumbEl}
-        open={showTooltip === 'start' || showTooltip === 'both'}
+        open={showTooltip}
         placement={axisPosition}
       >
         {valueFormatter(zoomData.start)}
       </ChartsTooltipZoomSliderValue>
       <ChartsTooltipZoomSliderValue
         anchorEl={endThumbEl}
-        open={showTooltip === 'end' || showTooltip === 'both'}
+        open={showTooltip}
         placement={axisPosition}
       >
         {valueFormatter(zoomData.end)}

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.tsx

@@ -41,12 +41,16 @@ interface ChartAxisZoomSliderTrackProps extends React.ComponentProps<'rect'> {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
   reverse: boolean;
+  onSelectStart?: () => void;
+  onSelectEnd?: () => void;
 }
 
 export function ChartAxisZoomSliderTrack({
   axisId,
   axisDirection,
   reverse,
+  onSelectStart,
+  onSelectEnd,
   ...other
 }: ChartAxisZoomSliderTrackProps) {
   const ref = React.useRef<SVGRectElement>(null);
@@ -133,6 +137,7 @@ export function ChartAxisZoomSliderTrack({
       rect.removeEventListener('pointermove', onPointerMove);
       document.removeEventListener('pointerup', onPointerUp);
       setIsSelecting(false);
+      onSelectEnd?.();
 
       if (pointerMoved) {
         return;
@@ -163,6 +168,7 @@ export function ChartAxisZoomSliderTrack({
     document.addEventListener('pointerup', onPointerUp);
     rect.addEventListener('pointermove', onPointerMove);
 
+    onSelectStart?.();
     setIsSelecting(true);
     instance.setAxisZoomData(axisId, (prev) => ({
       ...prev,