From 4dc48a960ed8c18ab6257db429eea1e746bd2921 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Wed, 15 May 2024 10:21:36 +0200
Subject: [PATCH 1/2] [charts] Fix TS bottle neck

---
 packages/x-charts/src/BarChart/BarElement.tsx | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
index 247e1b0344ab0..358173bcb0154 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,
@@ -60,11 +60,20 @@ export const BarElementPath = styled(animated.rect, {
     : ownerState.color,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: (ownerState.isFaded && 0.3) || 1,
-}));
-
-interface BarProps extends Omit<React.ComponentPropsWithoutRef<'path'>, 'id' | 'color'> {
+})) as React.ElementType<BarProps>;
+
+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 {

From e15d286d0aa060401bbd7b4398f2bdabc70ed532 Mon Sep 17 00:00:00 2001
From: alexandre <alex.fauquette@gmail.com>
Date: Wed, 15 May 2024 10:28:52 +0200
Subject: [PATCH 2/2] do not fake the type of exported component

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

diff --git a/packages/x-charts/src/BarChart/BarElement.tsx b/packages/x-charts/src/BarChart/BarElement.tsx
index 358173bcb0154..81a0f86d434e9 100644
--- a/packages/x-charts/src/BarChart/BarElement.tsx
+++ b/packages/x-charts/src/BarChart/BarElement.tsx
@@ -60,7 +60,7 @@ export const BarElementPath = styled(animated.rect, {
     : ownerState.color,
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: (ownerState.isFaded && 0.3) || 1,
-})) as React.ElementType<BarProps>;
+}));
 
 interface BarProps
   extends Omit<
@@ -139,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,