Update src/client/components/common/componentUtils.tsx

Co-authored-by: Przemysław Żydek <[email protected]>

src/client/components/common/componentUtils.tsx

@@ -1,25 +1,20 @@
 import classnames from 'classnames';
-import React from 'react';
+import React, { ComponentType, RefAttributes } from 'react';
 
 /**
  * Reusable function if you just need to extend an unstyled primitive (like a Radix component) with a classname
  * https://www.radix-ui.com/primitives/docs/guides/styling#extending-a-primitive
  */
-export function extendUnstyledPrimitiveWithClass<T extends React.ElementType>(
-  Component: T,
+export function extendUnstyledPrimitiveWithClass<P extends { className?: string }, R>(
+  Component: ComponentType<P & RefAttributes<R>>,
   className: string,
   displayName: string,
 ) {
-  type ComponentRef = React.ElementRef<T>;
-  type ComponentProps = React.ComponentPropsWithoutRef<T & React.RefAttributes<T>>;
-
-  const WrappedComponent = React.forwardRef<ComponentRef, ComponentProps>(
-    ({ className: incomingClassName, ...props }, ref) => (
-      // @ts-ignore Don't know how to fix this
-      <Component ref={ref} className={classnames(className, incomingClassName)} {...props} />
-    ),
-  );
+  const WrappedComponent = React.forwardRef<R, P>(({ className: incomingClassName, ...props }, ref) => (
+    <Component ref={ref} className={classnames(className, incomingClassName)} {...(props as P)} />
+  ));
 
   WrappedComponent.displayName = displayName;
   return WrappedComponent;
 }
+