Refactor

Author: bernardobelchior

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

@@ -16,7 +16,7 @@ import {
 import { styled } from '@mui/material/styles';
 import { useXAxes, useYAxes } from '@mui/x-charts/hooks';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
-import { ChartsZoomValueTooltip } from './ChartsZoomValueTooltip';
+import { ChartsTooltipZoomSliderValue } from './ChartsTooltipZoomSliderValue';
 import {
   selectorChartAxisZoomData,
   UseChartProZoomSignature,
@@ -82,7 +82,7 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
   let x: number;
   let y: number;
   let reverse: boolean;
-  let position: 'top' | 'bottom' | 'left' | 'right';
+  let axisPosition: 'top' | 'bottom' | 'left' | 'right';
 
   if (axisDirection === 'x') {
     const axis = xAxis[axisId];
@@ -99,7 +99,7 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
         ? drawingArea.top + drawingArea.height + axis.offset + axisSize + ZOOM_SLIDER_MARGIN
         : drawingArea.top - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
     reverse = axis.reverse ?? false;
-    position = axis.position ?? 'bottom';
+    axisPosition = axis.position ?? 'bottom';
   } else {
     const axis = yAxis[axisId];
 
@@ -115,7 +115,7 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
         : drawingArea.left - axis.offset - axisSize - ZOOM_SLIDER_SIZE - ZOOM_SLIDER_MARGIN;
     y = drawingArea.top;
     reverse = axis.reverse ?? false;
-    position = axis.position ?? 'left';
+    axisPosition = axis.position ?? 'left';
   }
 
   const backgroundRectOffset = (ZOOM_SLIDER_SIZE - ZOOM_SLIDER_BACKGROUND_SIZE) / 2;
@@ -133,7 +133,7 @@ export function ChartAxisZoomSlider({ axisDirection, axisId }: ChartZoomSliderPr
       <ChartAxisZoomSliderSpan
         zoomData={zoomData}
         axisId={axisId}
-        position={position}
+        axisPosition={axisPosition}
         axisDirection={axisDirection}
         reverse={reverse}
       />
@@ -147,14 +147,14 @@ const zoomValueFormatter = (value: number) => formatter.format(value);
 function ChartAxisZoomSliderSpan({
   axisId,
   axisDirection,
-  position,
+  axisPosition,
   zoomData,
   reverse,
   valueFormatter = zoomValueFormatter,
 }: {
   axisId: AxisId;
   axisDirection: 'x' | 'y';
-  position: 'top' | 'bottom' | 'left' | 'right';
+  axisPosition: 'top' | 'bottom' | 'left' | 'right';
   zoomData: ZoomData;
   reverse: boolean;
   valueFormatter?: (value: number) => string;
@@ -429,20 +429,20 @@ function ChartAxisZoomSliderSpan({
         onPointerLeave={() => setShowTooltip(null)}
         placement="end"
       />
-      <ChartsZoomValueTooltip
+      <ChartsTooltipZoomSliderValue
         anchorEl={startHandleEl}
         open={showTooltip === 'start' || showTooltip === 'both'}
-        placement={position}
+        placement={axisPosition}
       >
         {valueFormatter(zoomData.start)}
-      </ChartsZoomValueTooltip>
-      <ChartsZoomValueTooltip
+      </ChartsTooltipZoomSliderValue>
+      <ChartsTooltipZoomSliderValue
         anchorEl={endHandleEl}
         open={showTooltip === 'end' || showTooltip === 'both'}
-        placement={position}
+        placement={axisPosition}
       >
         {valueFormatter(zoomData.end)}
-      </ChartsZoomValueTooltip>
+      </ChartsTooltipZoomSliderValue>
     </React.Fragment>
   );
 }

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

@@ -5,6 +5,7 @@ import { styled } from '@mui/material/styles';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import clsx from 'clsx';
 import {
   chartAxisZoomSliderHandleClasses,
   useUtilityClasses,
@@ -47,7 +48,7 @@ export const ChartAxisZoomSliderHandle = React.forwardRef<
   SVGRectElement,
   ChartZoomSliderHandleProps
 >(function ChartPreviewHandle(
-  { onMove, orientation, placement, rx = 4, ry = 4, ...rest },
+  { className, onMove, orientation, placement, rx = 4, ry = 4, ...rest },
   forwardedRef,
 ) {
   const classes = useUtilityClasses({ onMove, orientation, placement });
@@ -91,5 +92,5 @@ export const ChartAxisZoomSliderHandle = React.forwardRef<
     };
   }, [onMoveEvent, orientation]);
 
-  return <Rect className={classes.root} ref={ref} rx={rx} ry={ry} {...rest} />;
+  return <Rect className={clsx(classes.root, className)} ref={ref} rx={rx} ry={ry} {...rest} />;
 });

packages/x-charts-pro/src/ChartZoomSlider/internals/ChartsZoomValueTooltip.tsx renamed to packages/x-charts-pro/src/ChartZoomSlider/internals/ChartsTooltipZoomSliderValue.tsx

@@ -1,38 +1,27 @@
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
-import { styled } from '@mui/material/styles';
-import Popper, { PopperProps } from '@mui/material/Popper';
-import { ChartsTooltipPaper } from '@mui/x-charts/ChartsTooltip';
+import { PopperProps } from '@mui/material/Popper';
+import { ChartsTooltipPaper, ChartsTooltipRoot } from '@mui/x-charts/ChartsTooltip';
 import Typography from '@mui/material/Typography';
 
-const ChartsTooltipRoot = styled(Popper, {
-  name: 'MuiChartsTooltip',
-  slot: 'Root',
-})(({ theme }) => ({
-  pointerEvents: 'none',
-  zIndex: theme.zIndex.modal,
-}));
-
 const MODIFIERS = [
   {
     name: 'offset',
-    options: {
-      offset: [0, 4],
-    },
+    options: { offset: [0, 4] },
   },
 ];
 
-interface ChartsZoomValueTooltipProps
+interface ChartsTooltipZoomSliderValueProps
   extends Pick<PopperProps, 'anchorEl' | 'open' | 'modifiers' | 'placement'>,
     React.PropsWithChildren {}
 
-export function ChartsZoomValueTooltip({
+export function ChartsTooltipZoomSliderValue({
   anchorEl,
   open,
   placement,
   modifiers = MODIFIERS,
   children,
-}: ChartsZoomValueTooltipProps) {
+}: ChartsTooltipZoomSliderValueProps) {
   return (
     <NoSsr>
       {open ? (

packages/x-charts/src/ChartsTooltip/ChartsTooltipContainer.tsx

@@ -3,9 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { styled, useThemeProps } from '@mui/material/styles';
-import Popper, { PopperProps } from '@mui/material/Popper';
+import { useThemeProps } from '@mui/material/styles';
+import { PopperProps } from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
+import { ChartsTooltipRoot } from './ChartsTooltipRoot';
 import { useSvgRef } from '../hooks/useSvgRef';
 import { TriggerOptions, usePointerType } from './utils';
 import { ChartsTooltipClasses } from './chartsTooltipClasses';
@@ -37,14 +38,6 @@ export interface ChartsTooltipContainerProps extends Partial<PopperProps> {
   children?: React.ReactNode;
 }
 
-const ChartsTooltipRoot = styled(Popper, {
-  name: 'MuiChartsTooltip',
-  slot: 'Root',
-})(({ theme }) => ({
-  pointerEvents: 'none',
-  zIndex: theme.zIndex.modal,
-}));
-
 /**
  * Demos:
  *

packages/x-charts/src/ChartsTooltip/ChartsTooltipRoot.tsx

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import Popper from '@mui/material/Popper';
+
+export const ChartsTooltipRoot = styled(Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+})(({ theme }) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal,
+}));

packages/x-charts/src/ChartsTooltip/index.ts

@@ -3,6 +3,7 @@ export * from './ChartsTooltipContainer';
 export type { ChartsTooltipClasses, ChartsTooltipClassKey } from './chartsTooltipClasses';
 export { getChartsTooltipUtilityClass, chartsTooltipClasses } from './chartsTooltipClasses';
 
+export * from './ChartsTooltipRoot';
 export * from './ChartsAxisTooltipContent';
 export * from './ChartsItemTooltipContent';