Fixed an issue with wrapped class components not having a type for the ref prop

.changeset/cyan-apes-join.md

@@ -0,0 +1,5 @@
+---
+'@emotion/styled': patch
+---
+
+Fixed an issue with wrapped class components not having a type for the `ref` prop.

packages/styled/types/base.d.ts

@@ -35,8 +35,18 @@ export interface StyledOptions<Props> {
  */
 export interface StyledComponent<
   ComponentProps extends {},
-  SpecificComponentProps extends {} = {}
-> extends React.FC<ComponentProps & SpecificComponentProps>, ComponentSelector {
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {}
+>
+  extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>,
+    ComponentSelector {
+  withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C
+  ): StyledComponent<
+    ComponentProps & PropsOf<C>,
+    {},
+    { ref?: React.Ref<InstanceType<C>> }
+  >
   withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C
   ): StyledComponent<ComponentProps & PropsOf<C>>
@@ -51,7 +61,8 @@ export interface StyledComponent<
  */
 export interface CreateStyledComponent<
   ComponentProps extends {},
-  SpecificComponentProps extends {} = {}
+  SpecificComponentProps extends {} = {},
+  JSXProps extends {} = {}
 > {
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
@@ -64,14 +75,18 @@ export interface CreateStyledComponent<
           AdditionalProps & { theme: Theme }
       >
     >
-  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
+  ): StyledComponent<
+    ComponentProps & AdditionalProps,
+    SpecificComponentProps,
+    JSXProps
+  >
 
   (
     template: TemplateStringsArray,
     ...styles: Array<
       Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
     >
-  ): StyledComponent<ComponentProps, SpecificComponentProps>
+  ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
 
   /**
    * @typeparam AdditionalProps  Additional props to add to your styled component
@@ -85,7 +100,11 @@ export interface CreateStyledComponent<
           AdditionalProps & { theme: Theme }
       >
     >
-  ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps>
+  ): StyledComponent<
+    ComponentProps & AdditionalProps,
+    SpecificComponentProps,
+    JSXProps
+  >
 }
 
 /**
@@ -98,6 +117,39 @@ export interface CreateStyledComponent<
  * @example styled('div')<Props>(props => ({ width: props.width })
  */
 export interface CreateStyled {
+  <
+    C extends React.ComponentClass<React.ComponentProps<C>>,
+    ForwardedProps extends keyof React.ComponentProps<
+      C
+    > = keyof React.ComponentProps<C>
+  >(
+    component: C,
+    options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>
+    }
+  >
+
+  <C extends React.ComponentClass<React.ComponentProps<C>>>(
+    component: C,
+    options?: StyledOptions<React.ComponentProps<C>>
+  ): CreateStyledComponent<
+    PropsOf<C> & {
+      theme?: Theme
+      as?: React.ElementType
+    },
+    {},
+    {
+      ref?: React.Ref<InstanceType<C>>
+    }
+  >
+
   <
     C extends React.ComponentType<React.ComponentProps<C>>,
     ForwardedProps extends keyof React.ComponentProps<

packages/styled/types/tests-base.tsx

@@ -261,7 +261,6 @@ const StyledClass0 = styled(ReactClassComponent0)({})
 declare const ref0_0: (element: ReactClassComponent0 | null) => void
 declare const ref0_1: (element: ReactClassComponent1 | null) => void
 declare const ref0_2: (element: HTMLDivElement | null) => void
-// $ExpectError
 ;<StyledClass0 column={true} ref={ref0_0} />
 // $ExpectError
 ;<StyledClass0 column={true} ref={ref0_1} />
@@ -272,7 +271,6 @@ const StyledClass1 = StyledClass0.withComponent(ReactClassComponent1)
 declare const ref1_0: (element: ReactClassComponent1 | null) => void
 declare const ref1_1: (element: ReactClassComponent0 | null) => void
 declare const ref1_2: (element: HTMLDivElement | null) => void
-// $ExpectError
 ;<StyledClass1 column={true} value="" ref={ref1_0} />
 // $ExpectError
 ;<StyledClass1 column={true} value="" ref={ref1_1} />
@@ -442,3 +440,38 @@ const Section = styled('section')`
   // $ExpectError
   ;<StyledMemoedComponent />
 }
+
+{
+  // simple class ref test
+  class FixedSizeList extends React.Component {
+    scrollTo = () => {}
+
+    render() {
+      return null
+    }
+  }
+
+  const StyledList = styled(FixedSizeList)`
+    color: hotpink;
+  `
+  const listRef = React.useRef<FixedSizeList | null>(null)
+  ;<StyledList ref={listRef} />
+}
+
+{
+  // withComponent class ref test
+  class FixedSizeList extends React.Component {
+    scrollTo = () => {}
+
+    render() {
+      return null
+    }
+  }
+
+  const StyledList = styled('li')`
+    color: hotpink;
+  `
+  const StyledFixedStyleList = StyledList.withComponent(FixedSizeList)
+  const listRef = React.useRef<FixedSizeList | null>(null)
+  ;<StyledFixedStyleList ref={listRef} />
+}