Address feedback

Author: bernardobelchior

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

@@ -29,27 +29,25 @@ import {
 import { ChartAxisZoomSliderThumb } from './ChartAxisZoomSliderThumb';
 
 const ZoomSliderTrack = styled('rect', {
-  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'axisDirection',
-})<{ axisDirection: 'x' | 'y' }>(({ theme }) => ({
-  [`&.${chartAxisZoomSliderTrackClasses.root}`]: {
-    fill:
-      theme.palette.mode === 'dark'
-        ? (theme.vars || theme).palette.grey[800]
-        : (theme.vars || theme).palette.grey[300],
-    cursor: 'pointer',
-
-    [`&.${chartAxisZoomSliderTrackClasses.selecting}`]: {
-      cursor: 'ew-resize',
-    },
-  },
+  shouldForwardProp: (prop) =>
+    shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting',
+})<{ axisDirection: 'x' | 'y'; isSelecting: boolean }>(({ theme }) => ({
+  fill:
+    theme.palette.mode === 'dark'
+      ? (theme.vars || theme).palette.grey[800]
+      : (theme.vars || theme).palette.grey[300],
+  cursor: 'pointer',
   variants: [
     {
-      props: { axisDirection: 'y' },
+      props: { axisDirection: 'x', isSelecting: true },
+      style: {
+        cursor: 'ew-resize',
+      },
+    },
+    {
+      props: { axisDirection: 'y', isSelecting: true },
       style: {
-        [`&.${chartAxisZoomSliderTrackClasses.root}.${chartAxisZoomSliderTrackClasses.selecting}`]:
-          {
-            cursor: 'ns-resize',
-          },
+        cursor: 'ns-resize',
       },
     },
   ],
@@ -311,6 +309,7 @@ function ChartAxisZoomSliderTrack({
       className={className}
       onPointerDown={onPointerDown}
       axisDirection={axisDirection}
+      isSelecting={isSelecting}
       {...other}
     />
   );