From 81a3142974d56ae3d7095955a3586772b027a1c4 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,