Cherry-pick PR #50261 into release-4.8 (#50621)

Component commits:
460d1e2 Forward intersectionState flag when comparing indexed access constraints

Co-authored-by: Wesley Wigham <t-weswig@microsoft.com>

src/compiler/checker.ts

@@ -19694,7 +19694,7 @@ namespace ts {
                                     // create a new chain for the constraint error
                                     resetErrorInfo(saveErrorInfo);
                                 }
-                                if (result = isRelatedTo(source, constraint, RecursionFlags.Target, reportErrors)) {
+                                if (result = isRelatedTo(source, constraint, RecursionFlags.Target, reportErrors, /* headMessage */ undefined, intersectionState)) {
                                     return result;
                                 }
                                 // prefer the shorter chain of the constraint comparison chain, and the direct comparison chain

tests/baselines/reference/jsxIntrinsicElementsCompatability.js

@@ -0,0 +1,24 @@
+//// [jsxIntrinsicElementsCompatability.tsx]
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from "react";
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+    return <SomeComponent element={el} />
+}
+
+//// [jsxIntrinsicElementsCompatability.js]
+"use strict";
+exports.__esModule = true;
+/// <reference path="react16.d.ts" />
+var React = require("react");
+function SomeComponent(props) {
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return React.createElement("div", null);
+}
+function Test(el) {
+    return React.createElement(SomeComponent, { element: el });
+}

tests/baselines/reference/jsxIntrinsicElementsCompatability.symbols

@@ -0,0 +1,33 @@
+=== tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from "react";
+>React : Symbol(React, Decl(jsxIntrinsicElementsCompatability.tsx, 1, 6))
+
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+>SomeComponent : Symbol(SomeComponent, Decl(jsxIntrinsicElementsCompatability.tsx, 1, 31))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 23))
+>props : Symbol(props, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 49))
+>element : Symbol(element, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 57))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 23))
+>JSX : Symbol(JSX, Decl(react16.d.ts, 2493, 12))
+>IntrinsicElements : Symbol(JSX.IntrinsicElements, Decl(react16.d.ts, 2514, 86))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 2, 23))
+>JSX : Symbol(JSX, Decl(react16.d.ts, 2493, 12))
+>Element : Symbol(JSX.Element, Decl(react16.d.ts, 2494, 23))
+
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+>div : Symbol(JSX.IntrinsicElements.div, Decl(react16.d.ts, 2546, 114))
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+>Test : Symbol(Test, Decl(jsxIntrinsicElementsCompatability.tsx, 5, 1))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 14))
+>el : Symbol(el, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 40))
+>T : Symbol(T, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 14))
+
+    return <SomeComponent element={el} />
+>SomeComponent : Symbol(SomeComponent, Decl(jsxIntrinsicElementsCompatability.tsx, 1, 31))
+>element : Symbol(element, Decl(jsxIntrinsicElementsCompatability.tsx, 8, 25))
+>el : Symbol(el, Decl(jsxIntrinsicElementsCompatability.tsx, 7, 40))
+}

tests/baselines/reference/jsxIntrinsicElementsCompatability.types

@@ -0,0 +1,28 @@
+=== tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx ===
+/// <reference path="react16.d.ts" />
+import * as React from "react";
+>React : typeof React
+
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+>SomeComponent : <T extends "a" | "button">(props: {    element?: T;} & JSX.IntrinsicElements[T]) => JSX.Element
+>props : { element?: T | undefined; } & JSX.IntrinsicElements[T]
+>element : T | undefined
+>JSX : any
+>JSX : any
+
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+><div /> : JSX.Element
+>div : any
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+>Test : <T extends "a" | "button">(el: T) => JSX.Element
+>el : T
+
+    return <SomeComponent element={el} />
+><SomeComponent element={el} /> : JSX.Element
+>SomeComponent : <T extends "a" | "button">(props: { element?: T | undefined; } & JSX.IntrinsicElements[T]) => JSX.Element
+>element : T
+>el : T
+}

tests/cases/compiler/jsxIntrinsicElementsCompatability.tsx

@@ -0,0 +1,12 @@
+// @strict: true
+// @jsx: react
+/// <reference path="/.lib/react16.d.ts" />
+import * as React from "react";
+function SomeComponent<T extends 'button' | 'a'>(props: { element?: T } & JSX.IntrinsicElements[T]): JSX.Element {
+    // Just so the return value is RectElement, the rendered element doesnt matter
+    return <div />
+}
+
+function Test<T extends 'button' | 'a'>(el: T) {
+    return <SomeComponent element={el} />
+}