From 49c099ee87819ad5babd4e75d0960c359d6e235c Mon Sep 17 00:00:00 2001
From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Date: Wed, 15 May 2024 12:21:37 +0200
Subject: [PATCH] [charts] Fix TS bottle neck (#13137)

---
 packages/x-charts/src/BarChart/BarElement.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
index 247e1b0344ab0..81a0f86d434e9 100644
--- a/packages/x-charts/src/BarChart/BarElement.tsx
+++ b/packages/x-charts/src/BarChart/BarElement.tsx
@@ -6,7 +6,7 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { animated } from '@react-spring/web';
+import { AnimatedProps, animated } from '@react-spring/web';
 import {
   getIsFaded,
   getIsHighlighted,
@@ -62,9 +62,18 @@ export const BarElementPath = styled(animated.rect, {
   opacity: (ownerState.isFaded && 0.3) || 1,
 }));
 
-interface BarProps extends Omit<React.ComponentPropsWithoutRef<'path'>, 'id' | 'color'> {
+interface BarProps
+  extends Omit<
+      React.SVGProps<SVGRectElement>,
+      'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'
+    >,
+    AnimatedProps<{
+      x?: string | number | undefined;
+      y?: string | number | undefined;
+      height?: string | number | undefined;
+      width?: string | number | undefined;
+    }> {
   highlightScope?: Partial<HighlightScope>;
-  onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
   ownerState: BarElementOwnerState;
 }
 
@@ -73,7 +82,7 @@ export interface BarElementSlots {
    * The component that renders the bar.
    * @default BarElementPath
    */
-  bar?: React.JSXElementConstructor<BarProps>;
+  bar?: React.ElementType<BarProps>;
 }
 
 export interface BarElementSlotProps {
@@ -130,7 +139,7 @@ function BarElement(props: BarElementProps) {
   };
   const classes = useUtilityClasses(ownerState);
 
-  const Bar = slots?.bar ?? BarElementPath;
+  const Bar = slots?.bar ?? (BarElementPath as React.ElementType<BarProps>);
 
   const barProps = useSlotProps({
     elementType: Bar,