fix: ensure typing for static properties defined on third-party compo…

…nents wrapped by styled-components (#4141)

* fix access to static attributes for components structure used in some UI library

* test: add type test as well

---------

Co-authored-by: Martin PELCAT <[email protected]>
Co-authored-by: Evan Jacobs <[email protected]>

packages/styled-components/src/constructors/constructWithOptions.ts

@@ -50,7 +50,7 @@ export interface Styled<
   <Props extends object = BaseObject, Statics extends object = BaseObject>(
     initialStyles: Styles<Substitute<OuterProps, NoInfer<Props>>>,
     ...interpolations: Interpolation<Substitute<OuterProps, NoInfer<Props>>>[]
-  ): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics;
+  ): IStyledComponent<R, Substitute<OuterProps, Props>> & OuterStatics & Statics & Target;
 
   attrs: <
     Props extends object = BaseObject,

packages/styled-components/src/constructors/test/styled.test.tsx

@@ -0,0 +1,49 @@
+import React, { ComponentProps } from 'react';
+import TestRenderer from 'react-test-renderer';
+import { getRenderedCSS, resetStyled } from '../../test/utils';
+import domElements from '../../utils/domElements';
+
+let styled: ReturnType<typeof resetStyled>;
+
+describe('styled', () => {
+  beforeEach(() => {
+    styled = resetStyled();
+  });
+
+  it('should have all valid HTML5 elements defined as properties', () => {
+    domElements.forEach(domElement => {
+      expect(styled[domElement]).toBeTruthy();
+    });
+  });
+
+  it('should expose the component static attribute like components', () => {
+    const CollapseComponent = (props: ComponentProps<'div'>) => {
+      return <div {...props} />;
+    };
+
+    const Panel = (props: ComponentProps<'div'>) => {
+      return <div {...props} />;
+    };
+
+    const Collapse = Object.assign(CollapseComponent, { Panel, PI: '3.14' });
+
+    const StyledCollapse = styled(Collapse)`
+      background: red;
+    `;
+
+    expect(Collapse).toBeTruthy();
+    expect(Collapse.Panel).toBeTruthy();
+    expect(Collapse.PI).toBe('3.14');
+
+    expect(StyledCollapse).toBeTruthy();
+    expect(StyledCollapse.Panel).toBeTruthy();
+    expect(StyledCollapse.PI).toBe('3.14');
+
+    TestRenderer.create(<StyledCollapse />);
+    expect(getRenderedCSS()).toMatchInlineSnapshot(`
+    ".b {
+      background: red;
+    }"
+    `);
+  });
+});

packages/styled-components/src/test/types.tsx

@@ -455,3 +455,9 @@ styled.div<PropsWithVariant>`
     color: 'blue',
   })};
 `;
+
+const TargetWithStaticProperties = (p: React.PropsWithChildren<{}>) => <div {...p} />;
+TargetWithStaticProperties.foo = 'bar';
+
+const StyledTargetWithStaticProperties = styled(TargetWithStaticProperties)``;
+StyledTargetWithStaticProperties.foo;