From 7185e5d24f7dbc4577f8fec5f40db09be8ffc9d3 Mon Sep 17 00:00:00 2001
From: Cameron Martin <cameronmartin123@gmail.com>
Date: Sat, 21 Oct 2017 13:00:56 +0100
Subject: [PATCH] Added TypeScript definitions for innerRef.

Closes #424.
---
 .../typescript_tests/typescript_tests.tsx        | 16 ++++++++++++++++
 .../react-emotion/typings/react-emotion.d.ts     | 12 ++++++++----
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/react-emotion/typescript_tests/typescript_tests.tsx b/packages/react-emotion/typescript_tests/typescript_tests.tsx
index 3cbab4bb1..8c8327ea9 100644
--- a/packages/react-emotion/typescript_tests/typescript_tests.tsx
+++ b/packages/react-emotion/typescript_tests/typescript_tests.tsx
@@ -136,3 +136,19 @@ mount = <Button type="submit" bgColor="red" />;
  */
 
 flush();
+
+/**
+ * innerRef
+ */
+
+Component = styled('div')``;
+mount = <Component innerRef={(element: HTMLDivElement) => {}} />;
+
+Component = styled.div``;
+mount = <Component innerRef={(element: HTMLDivElement) => {}} />;
+
+Component = styled.div({});
+mount = <Component innerRef={(element: HTMLDivElement) => {}} />;
+
+Component = Component.withComponent('input');
+mount = <Component innerRef={(element: HTMLInputElement) => {}} />;
diff --git a/packages/react-emotion/typings/react-emotion.d.ts b/packages/react-emotion/typings/react-emotion.d.ts
index d9a7e1a59..081ec79b9 100644
--- a/packages/react-emotion/typings/react-emotion.d.ts
+++ b/packages/react-emotion/typings/react-emotion.d.ts
@@ -28,13 +28,17 @@ export type ThemedProps<Props, Theme> = Props & {
   theme: Theme,
 }
 
+type ElementProps<Tag extends keyof JSX.IntrinsicElements> =
+  & JSX.IntrinsicElements[Tag]
+  & { innerRef?: JSX.IntrinsicElements[Tag]['ref'] }
+
 export interface StyledComponent<Props, Theme, IntrinsicProps>
   extends
     ComponentClass<Props & IntrinsicProps>,
     StatelessComponent<Props & IntrinsicProps>
 {
   withComponent<Tag extends keyof JSX.IntrinsicElements>(tag: Tag):
-    StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
+    StyledComponent<Props, Theme, ElementProps<Tag>>
 
   withComponent(component: Component<Props>):
     StyledComponent<Props, Theme, {}>
@@ -74,7 +78,7 @@ type ShorthandsFactories<Theme> = {
     <Props = {}>(
       strings: TemplateStringsArray,
       ...vars: Interpolation<ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>>[],
-    ): StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
+    ): StyledComponent<Props, Theme, ElementProps<Tag>>
   
     // overload for object as styles
     <Props = {}>(
@@ -82,7 +86,7 @@ type ShorthandsFactories<Theme> = {
         | ObjectStyleAttributes
         | ((props: ThemedProps<Props & JSX.IntrinsicElements[Tag], Theme>) => ObjectStyleAttributes)
       )[]
-    ): StyledComponent<Props, Theme, JSX.IntrinsicElements[Tag]>
+    ): StyledComponent<Props, Theme, ElementProps<Tag>>
   };
 };
 
@@ -91,7 +95,7 @@ export interface ThemedReactEmotionInterface<Theme> extends ShorthandsFactories<
   <Props, Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag,
     options?: Options,
-  ): CreateStyled<Props, Theme, JSX.IntrinsicElements[Tag]>
+  ): CreateStyled<Props, Theme, ElementProps<Tag>>
 
   // overload for component
   <Props>(