Added TypeScript definitions for innerRef.

Closes #424.
emotion-js · Oct 22, 2017 · 7185e5d · 7185e5d
1 parent 435eb2f
commit 7185e5d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git 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
@@ -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,15 +78,15 @@ 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 = {}>(
       ...styles: (
         | 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>(