Merge pull request #17507 from DefinitelyTyped/react-domattributes-weaktype-fix

React.createElement splits SVG/HTML props based on type parameter

types/react/index.d.ts

@@ -136,10 +136,14 @@ declare namespace React {
         type: ClassType<P, T, C>): CFactory<P, T>;
     function createFactory<P>(type: ComponentClass<P>): Factory<P>;
 
-    function createElement<P extends DOMAttributes<T>, T extends Element>(
-        type: string,
+    function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>(
+        type: keyof ReactHTML,
         props?: ClassAttributes<T> & P,
-        ...children: ReactNode[]): DOMElement<P, T>;
+        ...children: ReactNode[]): ReactHTMLElement<T>;
+    function createElement<P extends SVGAttributes<T>, T extends SVGElement>(
+        type: keyof ReactSVG,
+        props?: ClassAttributes<T> & P,
+        ...children: ReactNode[]): ReactSVGElement;
     function createElement<P>(
         type: SFC<P>,
         props?: Attributes & P,
@@ -2526,8 +2530,7 @@ declare namespace React {
     // React.DOM
     // ----------------------------------------------------------------------
 
-    interface ReactDOM {
-        // HTML
+    interface ReactHTML {
         a: HTMLFactory<HTMLAnchorElement>;
         abbr: HTMLFactory<HTMLElement>;
         address: HTMLFactory<HTMLElement>;
@@ -2641,8 +2644,9 @@ declare namespace React {
         "var": HTMLFactory<HTMLElement>;
         video: HTMLFactory<HTMLVideoElement>;
         wbr: HTMLFactory<HTMLElement>;
+    }
 
-        // SVG
+    interface ReactSVG {
         svg: SVGFactory;
         animate: SVGFactory;
         circle: SVGFactory;
@@ -2666,6 +2670,8 @@ declare namespace React {
         use: SVGFactory;
     }
 
+    interface ReactDOM extends ReactHTML, ReactSVG { }
+
     //
     // React.PropTypes
     // ----------------------------------------------------------------------

types/react/test/index.ts

@@ -190,6 +190,8 @@ var classicElement: React.ClassicElement<Props> =
     React.createElement(ClassicComponent, props);
 var domElement: React.ReactHTMLElement<HTMLDivElement> =
     React.createElement("div");
+var htmlElement = React.createElement("input", { type: "text" });
+var svgElement = React.createElement("svg", { accentHeight: 12 });
 
 // React.cloneElement
 var clonedElement: React.CElement<Props, ModernComponent> =