From acd7b00f2ac7f3e6a2bbce131ccddf7b691b141b Mon Sep 17 00:00:00 2001
From: SimeonC <1085899+SimeonC@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:33:06 +0900
Subject: [PATCH] fix: typescript definition of withComponent

Corrects merging of both parent and passed component props, and supports not passing fixedProps at all (due to generics)
---
 system/react-css/src/utils.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/system/react-css/src/utils.tsx b/system/react-css/src/utils.tsx
index d6b6a2ad..b8e50e21 100644
--- a/system/react-css/src/utils.tsx
+++ b/system/react-css/src/utils.tsx
@@ -47,15 +47,17 @@ export type PropsOf<
 export interface WithComponentType<ComponentProps extends {}> {
   withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
     component: C,
-    fixedProps?: Partial<ComponentProps>
+    fixedProps?: Partial<ComponentProps> & Partial<React.ComponentProps<C>>
   ): React.ForwardRefExoticComponent<ComponentProps & PropsOf<C>>;
+
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C,
-    fixedProps?: Partial<ComponentProps>
+    fixedProps?: Partial<ComponentProps> & Partial<React.ComponentProps<C>>
   ): React.ForwardRefExoticComponent<ComponentProps & PropsOf<C>>;
+
   withComponent<Tag extends keyof ReactJSXIntrinsicElements>(
     tag: Tag,
-    fixedProps?: Partial<ComponentProps>
+    fixedProps?: Partial<ComponentProps> & Partial<React.ComponentProps<Tag>>
   ): React.ForwardRefExoticComponent<
     ComponentProps & ReactJSXIntrinsicElements[Tag]
   >;
@@ -109,9 +111,13 @@ export function buildWithComponent<
   Component.withComponent = function withComponentImplementation<
     P extends { className: string },
     T extends React.ComponentType<P>
-  >(withComponent: T, extraProps: TProps) {
-    const wrappedClassName = [extraProps.className, className].join(' ').trim();
-    const mergedStyles = mergeStyles(style, extraProps.style);
+  >(withComponent: T, extraProps?: TProps) {
+    const wrappedClassName = extraProps?.className
+      ? [extraProps.className, className].join(' ').trim()
+      : className;
+    const mergedStyles = extraProps
+      ? mergeStyles(style, extraProps.style)
+      : style;
     const WrappedComponent = React.forwardRef<T, TProps>((props, ref) =>
       React.createElement(withComponent, {
         ...additionalProps,