diff options
Diffstat (limited to 'std/types/react.d.ts')
| -rw-r--r-- | std/types/react.d.ts | 3843 |
1 files changed, 3843 insertions, 0 deletions
diff --git a/std/types/react.d.ts b/std/types/react.d.ts new file mode 100644 index 000000000..b512a43a2 --- /dev/null +++ b/std/types/react.d.ts @@ -0,0 +1,3843 @@ +// These types are adapted from +// https://github.com/DefinitelyTyped/DefinitelyTyped to work under Deno. +// +// Type definitions for React 16.9 +// Project: http://facebook.github.io/react/ +// Definitions by: Asana <https://asana.com> +// AssureSign <http://www.assuresign.com> +// Microsoft <https://microsoft.com> +// John Reilly <https://github.com/johnnyreilly> +// Benoit Benezech <https://github.com/bbenezech> +// Patricio Zavolinsky <https://github.com/pzavolinsky> +// Digiguru <https://github.com/digiguru> +// Eric Anderson <https://github.com/ericanderson> +// Dovydas Navickas <https://github.com/DovydasNavickas> +// Josh Rutherford <https://github.com/theruther4d> +// Guilherme Hübner <https://github.com/guilhermehubner> +// Ferdy Budhidharma <https://github.com/ferdaber> +// Johann Rakotoharisoa <https://github.com/jrakotoharisoa> +// Olivier Pascal <https://github.com/pascaloliv> +// Martin Hochel <https://github.com/hotell> +// Frank Li <https://github.com/franklixuefei> +// Jessica Franco <https://github.com/Jessidhia> +// Saransh Kataria <https://github.com/saranshkataria> +// Kanitkorn Sujautra <https://github.com/lukyth> +// Sebastian Silbermann <https://github.com/eps1lon> +// Kyle Scully <https://github.com/zieka> +// Cong Zhang <https://github.com/dancerphil> +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/* eslint-disable */ + +import "./react/react_global.d.ts"; + +import * as CSS from "./react/csstype.d.ts"; +import * as PropTypes from "./react/prop-types.d.ts"; + +type NativeAnimationEvent = AnimationEvent; +type NativeClipboardEvent = ClipboardEvent; +type NativeCompositionEvent = CompositionEvent; +type NativeDragEvent = DragEvent; +type NativeFocusEvent = FocusEvent; +type NativeKeyboardEvent = KeyboardEvent; +type NativeMouseEvent = MouseEvent; +type NativeTouchEvent = TouchEvent; +type NativePointerEvent = PointerEvent; +type NativeTransitionEvent = TransitionEvent; +type NativeUIEvent = UIEvent; +type NativeWheelEvent = WheelEvent; +type Booleanish = boolean | "true" | "false"; + +/** + * defined in scheduler/tracing + */ +interface SchedulerInteraction { + id: number; + name: string; + timestamp: number; +} + +// tslint:disable-next-line:export-just-namespace +export = React; +export as namespace React; + +declare namespace React { + // + // React Elements + // ---------------------------------------------------------------------- + + type ElementType<P = any> = + | { + [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] + ? K + : never; + }[keyof JSX.IntrinsicElements] + | ComponentType<P>; + /** + * @deprecated Please use `ElementType` + */ + type ReactType<P = any> = ElementType<P>; + type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>; + + type JSXElementConstructor<P> = + | ((props: P) => ReactElement | null) + | (new (props: P) => Component<P, any>); + + type Key = string | number; + + interface RefObject<T> { + readonly current: T | null; + } + + type Ref<T> = + | { bivarianceHack(instance: T | null): void }["bivarianceHack"] + | RefObject<T> + | null; + type LegacyRef<T> = string | Ref<T>; + + type ComponentState = any; + + /** + * @internal You shouldn't need to use this type since you never see these attributes + * inside your component or have to validate them. + */ + interface Attributes { + key?: Key; + } + interface RefAttributes<T> extends Attributes { + ref?: Ref<T>; + } + interface ClassAttributes<T> extends Attributes { + ref?: LegacyRef<T>; + } + + interface ReactElement< + P = any, + T extends string | JSXElementConstructor<any> = + | string + | JSXElementConstructor<any> + > { + type: T; + props: P; + key: Key | null; + } + + interface ReactComponentElement< + T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>, + P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, "key" | "ref">> + > extends ReactElement<P, T> {} + + /** + * @deprecated Please use `FunctionComponentElement` + */ + type SFCElement<P> = FunctionComponentElement<P>; + + interface FunctionComponentElement<P> + extends ReactElement<P, FunctionComponent<P>> { + ref?: "ref" extends keyof P + ? P extends { ref?: infer R } + ? R + : never + : never; + } + + type CElement<P, T extends Component<P, ComponentState>> = ComponentElement< + P, + T + >; + interface ComponentElement<P, T extends Component<P, ComponentState>> + extends ReactElement<P, ComponentClass<P>> { + ref?: LegacyRef<T>; + } + + type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>; + + // string fallback for custom web-components + interface DOMElement< + P extends HTMLAttributes<T> | SVGAttributes<T>, + T extends Element + > extends ReactElement<P, string> { + ref: LegacyRef<T>; + } + + // ReactHTML for ReactHTMLElement + // tslint:disable-next-line:no-empty-interface + interface ReactHTMLElement<T extends HTMLElement> + extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> {} + + interface DetailedReactHTMLElement< + P extends HTMLAttributes<T>, + T extends HTMLElement + > extends DOMElement<P, T> { + type: keyof ReactHTML; + } + + // ReactSVG for ReactSVGElement + interface ReactSVGElement + extends DOMElement<SVGAttributes<SVGElement>, SVGElement> { + type: keyof ReactSVG; + } + + interface ReactPortal extends ReactElement { + key: Key | null; + children: ReactNode; + } + + // + // Factories + // ---------------------------------------------------------------------- + + type Factory<P> = ( + props?: Attributes & P, + ...children: ReactNode[] + ) => ReactElement<P>; + + /** + * @deprecated Please use `FunctionComponentFactory` + */ + type SFCFactory<P> = FunctionComponentFactory<P>; + + type FunctionComponentFactory<P> = ( + props?: Attributes & P, + ...children: ReactNode[] + ) => FunctionComponentElement<P>; + + type ComponentFactory<P, T extends Component<P, ComponentState>> = ( + props?: ClassAttributes<T> & P, + ...children: ReactNode[] + ) => CElement<P, T>; + + type CFactory<P, T extends Component<P, ComponentState>> = ComponentFactory< + P, + T + >; + type ClassicFactory<P> = CFactory<P, ClassicComponent<P, ComponentState>>; + + type DOMFactory<P extends DOMAttributes<T>, T extends Element> = ( + props?: (ClassAttributes<T> & P) | null, + ...children: ReactNode[] + ) => DOMElement<P, T>; + + // tslint:disable-next-line:no-empty-interface + interface HTMLFactory<T extends HTMLElement> + extends DetailedHTMLFactory<AllHTMLAttributes<T>, T> {} + + interface DetailedHTMLFactory< + P extends HTMLAttributes<T>, + T extends HTMLElement + > extends DOMFactory<P, T> { + ( + props?: (ClassAttributes<T> & P) | null, + ...children: ReactNode[] + ): DetailedReactHTMLElement<P, T>; + } + + interface SVGFactory + extends DOMFactory<SVGAttributes<SVGElement>, SVGElement> { + ( + props?: (ClassAttributes<SVGElement> & SVGAttributes<SVGElement>) | null, + ...children: ReactNode[] + ): ReactSVGElement; + } + + // + // React Nodes + // http://facebook.github.io/react/docs/glossary.html + // ---------------------------------------------------------------------- + + type ReactText = string | number; + type ReactChild = ReactElement | ReactText; + + interface ReactNodeArray extends Array<ReactNode> {} + type ReactFragment = {} | ReactNodeArray; + type ReactNode = + | ReactChild + | ReactFragment + | ReactPortal + | boolean + | null + | undefined; + + // + // Top Level API + // ---------------------------------------------------------------------- + + // DOM Elements + function createFactory<T extends HTMLElement>( + type: keyof ReactHTML + ): HTMLFactory<T>; + function createFactory(type: keyof ReactSVG): SVGFactory; + function createFactory<P extends DOMAttributes<T>, T extends Element>( + type: string + ): DOMFactory<P, T>; + + // Custom components + function createFactory<P>( + type: FunctionComponent<P> + ): FunctionComponentFactory<P>; + function createFactory<P>( + type: ClassType< + P, + ClassicComponent<P, ComponentState>, + ClassicComponentClass<P> + > + ): CFactory<P, ClassicComponent<P, ComponentState>>; + function createFactory< + P, + T extends Component<P, ComponentState>, + C extends ComponentClass<P> + >(type: ClassType<P, T, C>): CFactory<P, T>; + function createFactory<P>(type: ComponentClass<P>): Factory<P>; + + // DOM Elements + // TODO: generalize this to everything in `keyof ReactHTML`, not just "input" + function createElement( + type: "input", + props?: + | (InputHTMLAttributes<HTMLInputElement> & + ClassAttributes<HTMLInputElement>) + | null, + ...children: ReactNode[] + ): DetailedReactHTMLElement< + InputHTMLAttributes<HTMLInputElement>, + HTMLInputElement + >; + function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>( + type: keyof ReactHTML, + props?: (ClassAttributes<T> & P) | null, + ...children: ReactNode[] + ): DetailedReactHTMLElement<P, T>; + function createElement<P extends SVGAttributes<T>, T extends SVGElement>( + type: keyof ReactSVG, + props?: (ClassAttributes<T> & P) | null, + ...children: ReactNode[] + ): ReactSVGElement; + function createElement<P extends DOMAttributes<T>, T extends Element>( + type: string, + props?: (ClassAttributes<T> & P) | null, + ...children: ReactNode[] + ): DOMElement<P, T>; + + // Custom components + + function createElement<P extends {}>( + type: FunctionComponent<P>, + props?: (Attributes & P) | null, + ...children: ReactNode[] + ): FunctionComponentElement<P>; + function createElement<P extends {}>( + type: ClassType< + P, + ClassicComponent<P, ComponentState>, + ClassicComponentClass<P> + >, + props?: (ClassAttributes<ClassicComponent<P, ComponentState>> & P) | null, + ...children: ReactNode[] + ): CElement<P, ClassicComponent<P, ComponentState>>; + function createElement< + P extends {}, + T extends Component<P, ComponentState>, + C extends ComponentClass<P> + >( + type: ClassType<P, T, C>, + props?: (ClassAttributes<T> & P) | null, + ...children: ReactNode[] + ): CElement<P, T>; + function createElement<P extends {}>( + type: FunctionComponent<P> | ComponentClass<P> | string, + props?: (Attributes & P) | null, + ...children: ReactNode[] + ): ReactElement<P>; + + // DOM Elements + // ReactHTMLElement + function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>( + element: DetailedReactHTMLElement<P, T>, + props?: P, + ...children: ReactNode[] + ): DetailedReactHTMLElement<P, T>; + // ReactHTMLElement, less specific + function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>( + element: ReactHTMLElement<T>, + props?: P, + ...children: ReactNode[] + ): ReactHTMLElement<T>; + // SVGElement + function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>( + element: ReactSVGElement, + props?: P, + ...children: ReactNode[] + ): ReactSVGElement; + // DOM Element (has to be the last, because type checking stops at first overload that fits) + function cloneElement<P extends DOMAttributes<T>, T extends Element>( + element: DOMElement<P, T>, + props?: DOMAttributes<T> & P, + ...children: ReactNode[] + ): DOMElement<P, T>; + + // Custom components + function cloneElement<P>( + element: FunctionComponentElement<P>, + props?: Partial<P> & Attributes, + ...children: ReactNode[] + ): FunctionComponentElement<P>; + function cloneElement<P, T extends Component<P, ComponentState>>( + element: CElement<P, T>, + props?: Partial<P> & ClassAttributes<T>, + ...children: ReactNode[] + ): CElement<P, T>; + function cloneElement<P>( + element: ReactElement<P>, + props?: Partial<P> & Attributes, + ...children: ReactNode[] + ): ReactElement<P>; + + // Context via RenderProps + interface ProviderProps<T> { + value: T; + children?: ReactNode; + } + + interface ConsumerProps<T> { + children: (value: T) => ReactNode; + unstable_observedBits?: number; + } + + // TODO: similar to how Fragment is actually a symbol, the values returned from createContext, + // forwardRef and memo are actually objects that are treated specially by the renderer; see: + // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactContext.js#L35-L48 + // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/forwardRef.js#L42-L45 + // https://github.com/facebook/react/blob/v16.6.0/packages/react/src/memo.js#L27-L31 + // However, we have no way of telling the JSX parser that it's a JSX element type or its props other than + // by pretending to be a normal component. + // + // We don't just use ComponentType or SFC types because you are not supposed to attach statics to this + // object, but rather to the original function. + interface ExoticComponent<P = {}> { + /** + * **NOTE**: Exotic components are not callable. + */ + (props: P): ReactElement | null; + readonly $$typeof: symbol; + } + + interface NamedExoticComponent<P = {}> extends ExoticComponent<P> { + displayName?: string; + } + + interface ProviderExoticComponent<P> extends ExoticComponent<P> { + propTypes?: WeakValidationMap<P>; + } + + type ContextType<C extends Context<any>> = C extends Context<infer T> + ? T + : never; + + // NOTE: only the Context object itself can get a displayName + // https://github.com/facebook/react-devtools/blob/e0b854e4c/backend/attachRendererFiber.js#L310-L325 + type Provider<T> = ProviderExoticComponent<ProviderProps<T>>; + type Consumer<T> = ExoticComponent<ConsumerProps<T>>; + interface Context<T> { + Provider: Provider<T>; + Consumer: Consumer<T>; + displayName?: string; + } + function createContext<T>( + // If you thought this should be optional, see + // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106 + defaultValue: T, + calculateChangedBits?: (prev: T, next: T) => number + ): Context<T>; + + function isValidElement<P>( + object: {} | null | undefined + ): object is ReactElement<P>; + + const Children: ReactChildren; + const Fragment: ExoticComponent<{ children?: ReactNode }>; + const StrictMode: ExoticComponent<{ children?: ReactNode }>; + + interface SuspenseProps { + children?: ReactNode; + + /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */ + fallback: NonNullable<ReactNode> | null; + /** + * Tells React whether to “skip” revealing this boundary during the initial load. + * This API will likely be removed in a future release. + */ + // NOTE: this is unflagged and is respected even in stable builds + unstable_avoidThisFallback?: boolean; + } + /** + * This feature is not yet available for server-side rendering. + * Suspense support will be added in a later release. + */ + const Suspense: ExoticComponent<SuspenseProps>; + const version: string; + + /** + * {@link https://github.com/bvaughn/rfcs/blob/profiler/text/0000-profiler.md#detailed-design | API} + */ + type ProfilerOnRenderCallback = ( + id: string, + phase: "mount" | "update", + actualDuration: number, + baseDuration: number, + startTime: number, + commitTime: number, + interactions: Set<SchedulerInteraction> + ) => void; + interface ProfilerProps { + children?: ReactNode; + id: string; + onRender: ProfilerOnRenderCallback; + } + + const Profiler: ExoticComponent<ProfilerProps>; + + // + // Component API + // ---------------------------------------------------------------------- + + type ReactInstance = Component<any> | Element; + + // Base component for plain JS classes + // tslint:disable-next-line:no-empty-interface + interface Component<P = {}, S = {}, SS = any> + extends ComponentLifecycle<P, S, SS> {} + class Component<P, S> { + // tslint won't let me format the sample code in a way that vscode likes it :( + /** + * If set, `this.context` will be set at runtime to the current value of the given Context. + * + * Usage: + * + * ```ts + * type MyContext = number + * const Ctx = React.createContext<MyContext>(0) + * + * class Foo extends React.Component { + * static contextType = Ctx + * context!: React.ContextType<typeof Ctx> + * render () { + * return <>My context's value: {this.context}</>; + * } + * } + * ``` + * + * @see https://reactjs.org/docs/context.html#classcontexttype + */ + static contextType?: Context<any>; + + /** + * If using the new style context, re-declare this in your class to be the + * `React.ContextType` of your `static contextType`. + * Should be used with type annotation or static contextType. + * + * ```ts + * static contextType = MyContext + * // For TS pre-3.7: + * context!: React.ContextType<typeof MyContext> + * // For TS 3.7 and above: + * declare context: React.ContextType<typeof MyContext> + * ``` + * + * @see https://reactjs.org/docs/context.html + */ + // TODO (TypeScript 3.0): unknown + context: any; + + constructor(props: Readonly<P>); + /** + * @deprecated + * @see https://reactjs.org/docs/legacy-context.html + */ + constructor(props: P, context?: any); + + // We MUST keep setState() as a unified signature because it allows proper checking of the method return type. + // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257 + // Also, the ` | S` allows intellisense to not be dumbisense + setState<K extends keyof S>( + state: + | (( + prevState: Readonly<S>, + props: Readonly<P> + ) => Pick<S, K> | S | null) + | (Pick<S, K> | S | null), + callback?: () => void + ): void; + + forceUpdate(callback?: () => void): void; + render(): ReactNode; + + // React.Props<T> is now deprecated, which means that the `children` + // property is not available on `P` by default, even though you can + // always pass children as variadic arguments to `createElement`. + // In the future, if we can define its call signature conditionally + // on the existence of `children` in `P`, then we should remove this. + readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>; + state: Readonly<S>; + /** + * @deprecated + * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs + */ + refs: { + [key: string]: ReactInstance; + }; + } + + class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {} + + interface ClassicComponent<P = {}, S = {}> extends Component<P, S> { + replaceState(nextState: S, callback?: () => void): void; + isMounted(): boolean; + getInitialState?(): S; + } + + interface ChildContextProvider<CC> { + getChildContext(): CC; + } + + // + // Class Interfaces + // ---------------------------------------------------------------------- + + /** + * @deprecated as of recent React versions, function components can no + * longer be considered 'stateless'. Please use `FunctionComponent` instead. + * + * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html) + */ + type SFC<P = {}> = FunctionComponent<P>; + + /** + * @deprecated as of recent React versions, function components can no + * longer be considered 'stateless'. Please use `FunctionComponent` instead. + * + * @see [React Hooks](https://reactjs.org/docs/hooks-intro.html) + */ + type StatelessComponent<P = {}> = FunctionComponent<P>; + + type FC<P = {}> = FunctionComponent<P>; + + interface FunctionComponent<P = {}> { + (props: PropsWithChildren<P>, context?: any): ReactElement | null; + propTypes?: WeakValidationMap<P>; + contextTypes?: ValidationMap<any>; + defaultProps?: Partial<P>; + displayName?: string; + } + + interface RefForwardingComponent<T, P = {}> { + (props: PropsWithChildren<P>, ref: Ref<T>): ReactElement | null; + propTypes?: WeakValidationMap<P>; + contextTypes?: ValidationMap<any>; + defaultProps?: Partial<P>; + displayName?: string; + } + + interface ComponentClass<P = {}, S = ComponentState> + extends StaticLifecycle<P, S> { + new (props: P, context?: any): Component<P, S>; + propTypes?: WeakValidationMap<P>; + contextType?: Context<any>; + contextTypes?: ValidationMap<any>; + childContextTypes?: ValidationMap<any>; + defaultProps?: Partial<P>; + displayName?: string; + } + + interface ClassicComponentClass<P = {}> extends ComponentClass<P> { + new (props: P, context?: any): ClassicComponent<P, ComponentState>; + getDefaultProps?(): P; + } + + /** + * We use an intersection type to infer multiple type parameters from + * a single argument, which is useful for many top-level API defs. + * See https://github.com/Microsoft/TypeScript/issues/7234 for more info. + */ + type ClassType< + P, + T extends Component<P, ComponentState>, + C extends ComponentClass<P> + > = C & (new (props: P, context?: any) => T); + + // + // Component Specs and Lifecycle + // ---------------------------------------------------------------------- + + // This should actually be something like `Lifecycle<P, S> | DeprecatedLifecycle<P, S>`, + // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle + // methods are present. + interface ComponentLifecycle<P, S, SS = any> + extends NewLifecycle<P, S, SS>, + DeprecatedLifecycle<P, S> { + /** + * Called immediately after a component is mounted. Setting state here will trigger re-rendering. + */ + componentDidMount?(): void; + /** + * Called to determine whether the change in props and state should trigger a re-render. + * + * `Component` always returns true. + * `PureComponent` implements a shallow comparison on props and state and returns true if any + * props or states have changed. + * + * If false is returned, `Component#render`, `componentWillUpdate` + * and `componentDidUpdate` will not be called. + */ + shouldComponentUpdate?( + nextProps: Readonly<P>, + nextState: Readonly<S>, + nextContext: any + ): boolean; + /** + * Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as + * cancelled network requests, or cleaning up any DOM elements created in `componentDidMount`. + */ + componentWillUnmount?(): void; + /** + * Catches exceptions generated in descendant components. Unhandled exceptions will cause + * the entire component tree to unmount. + */ + componentDidCatch?(error: Error, errorInfo: ErrorInfo): void; + } + + // Unfortunately, we have no way of declaring that the component constructor must implement this + interface StaticLifecycle<P, S> { + getDerivedStateFromProps?: GetDerivedStateFromProps<P, S>; + getDerivedStateFromError?: GetDerivedStateFromError<P, S>; + } + + type GetDerivedStateFromProps<P, S> = + /** + * Returns an update to a component's state based on its new props and old state. + * + * Note: its presence prevents any of the deprecated lifecycle methods from being invoked + */ + (nextProps: Readonly<P>, prevState: S) => Partial<S> | null; + + type GetDerivedStateFromError<P, S> = + /** + * This lifecycle is invoked after an error has been thrown by a descendant component. + * It receives the error that was thrown as a parameter and should return a value to update state. + * + * Note: its presence prevents any of the deprecated lifecycle methods from being invoked + */ + (error: any) => Partial<S> | null; + + // This should be "infer SS" but can't use it yet + interface NewLifecycle<P, S, SS> { + /** + * Runs before React applies the result of `render` to the document, and + * returns an object to be given to componentDidUpdate. Useful for saving + * things such as scroll position before `render` causes changes to it. + * + * Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated + * lifecycle events from running. + */ + getSnapshotBeforeUpdate?( + prevProps: Readonly<P>, + prevState: Readonly<S> + ): SS | null; + /** + * Called immediately after updating occurs. Not called for the initial render. + * + * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null. + */ + componentDidUpdate?( + prevProps: Readonly<P>, + prevState: Readonly<S>, + snapshot?: SS + ): void; + } + + interface DeprecatedLifecycle<P, S> { + /** + * Called immediately before mounting occurs, and before `Component#render`. + * Avoid introducing any side-effects or subscriptions in this method. + * + * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps + * prevents this from being invoked. + * + * @deprecated 16.3, use componentDidMount or the constructor instead; will stop working in React 17 + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path + */ + componentWillMount?(): void; + /** + * Called immediately before mounting occurs, and before `Component#render`. + * Avoid introducing any side-effects or subscriptions in this method. + * + * This method will not stop working in React 17. + * + * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps + * prevents this from being invoked. + * + * @deprecated 16.3, use componentDidMount or the constructor instead + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path + */ + UNSAFE_componentWillMount?(): void; + /** + * Called when the component may be receiving new props. + * React may call this even if props have not changed, so be sure to compare new and existing + * props if you only want to handle changes. + * + * Calling `Component#setState` generally does not trigger this method. + * + * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps + * prevents this from being invoked. + * + * @deprecated 16.3, use static getDerivedStateFromProps instead; will stop working in React 17 + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path + */ + componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void; + /** + * Called when the component may be receiving new props. + * React may call this even if props have not changed, so be sure to compare new and existing + * props if you only want to handle changes. + * + * Calling `Component#setState` generally does not trigger this method. + * + * This method will not stop working in React 17. + * + * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps + * prevents this from being invoked. + * + * @deprecated 16.3, use static getDerivedStateFromProps instead + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path + */ + UNSAFE_componentWillReceiveProps?( + nextProps: Readonly<P>, + nextContext: any + ): void; + /** + * Called immediately before rendering when new props or state is received. Not called for the initial render. + * + * Note: You cannot call `Component#setState` here. + * + * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps + * prevents this from being invoked. + * + * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17 + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path + */ + componentWillUpdate?( + nextProps: Readonly<P>, + nextState: Readonly<S>, + nextContext: any + ): void; + /** + * Called immediately before rendering when new props or state is received. Not called for the initial render. + * + * Note: You cannot call `Component#setState` here. + * + * This method will not stop working in React 17. + * + * Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps + * prevents this from being invoked. + * + * @deprecated 16.3, use getSnapshotBeforeUpdate instead + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update + * @see https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path + */ + UNSAFE_componentWillUpdate?( + nextProps: Readonly<P>, + nextState: Readonly<S>, + nextContext: any + ): void; + } + + interface Mixin<P, S> extends ComponentLifecycle<P, S> { + mixins?: Array<Mixin<P, S>>; + statics?: { + [key: string]: any; + }; + + displayName?: string; + propTypes?: ValidationMap<any>; + contextTypes?: ValidationMap<any>; + childContextTypes?: ValidationMap<any>; + + getDefaultProps?(): P; + getInitialState?(): S; + } + + interface ComponentSpec<P, S> extends Mixin<P, S> { + render(): ReactNode; + + [propertyName: string]: any; + } + + function createRef<T>(): RefObject<T>; + + // will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default, + // but can be given its own specific name + interface ForwardRefExoticComponent<P> extends NamedExoticComponent<P> { + defaultProps?: Partial<P>; + propTypes?: WeakValidationMap<P>; + } + + function forwardRef<T, P = {}>( + Component: RefForwardingComponent<T, P> + ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>; + + /** Ensures that the props do not include ref at all */ + type PropsWithoutRef<P> = + // Just Pick would be sufficient for this, but I'm trying to avoid unnecessary mapping over union types + // https://github.com/Microsoft/TypeScript/issues/28339 + "ref" extends keyof P ? Pick<P, Exclude<keyof P, "ref">> : P; + /** Ensures that the props do not include string ref, which cannot be forwarded */ + type PropsWithRef<P> = + // Just "P extends { ref?: infer R }" looks sufficient, but R will infer as {} if P is {}. + "ref" extends keyof P + ? P extends { ref?: infer R } + ? string extends R + ? PropsWithoutRef<P> & { ref?: Exclude<R, string> } + : P + : P + : P; + + type PropsWithChildren<P> = P & { children?: ReactNode }; + + /** + * NOTE: prefer ComponentPropsWithRef, if the ref is forwarded, + * or ComponentPropsWithoutRef when refs are not supported. + */ + type ComponentProps< + T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> + > = T extends JSXElementConstructor<infer P> + ? P + : T extends keyof JSX.IntrinsicElements + ? JSX.IntrinsicElements[T] + : {}; + type ComponentPropsWithRef<T extends ElementType> = T extends ComponentClass< + infer P + > + ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>> + : PropsWithRef<ComponentProps<T>>; + type ComponentPropsWithoutRef<T extends ElementType> = PropsWithoutRef< + ComponentProps<T> + >; + + // will show `Memo(${Component.displayName || Component.name})` in devtools by default, + // but can be given its own specific name + type MemoExoticComponent<T extends ComponentType<any>> = NamedExoticComponent< + ComponentPropsWithRef<T> + > & { + readonly type: T; + }; + + function memo<P extends object>( + Component: SFC<P>, + propsAreEqual?: ( + prevProps: Readonly<PropsWithChildren<P>>, + nextProps: Readonly<PropsWithChildren<P>> + ) => boolean + ): NamedExoticComponent<P>; + function memo<T extends ComponentType<any>>( + Component: T, + propsAreEqual?: ( + prevProps: Readonly<ComponentProps<T>>, + nextProps: Readonly<ComponentProps<T>> + ) => boolean + ): MemoExoticComponent<T>; + + type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent< + ComponentPropsWithRef<T> + > & { + readonly _result: T; + }; + + function lazy<T extends ComponentType<any>>( + factory: () => Promise<{ default: T }> + ): LazyExoticComponent<T>; + + // + // React Hooks + // ---------------------------------------------------------------------- + + // based on the code in https://github.com/facebook/react/pull/13968 + + // Unlike the class component setState, the updates are not allowed to be partial + type SetStateAction<S> = S | ((prevState: S) => S); + // this technically does accept a second argument, but it's already under a deprecation warning + // and it's not even released so probably better to not define it. + type Dispatch<A> = (value: A) => void; + // Since action _can_ be undefined, dispatch may be called without any parameters. + type DispatchWithoutAction = () => void; + // Unlike redux, the actions _can_ be anything + type Reducer<S, A> = (prevState: S, action: A) => S; + // If useReducer accepts a reducer without action, dispatch may be called without any parameters. + type ReducerWithoutAction<S> = (prevState: S) => S; + // types used to try and prevent the compiler from reducing S + // to a supertype common with the second argument to useReducer() + type ReducerState<R extends Reducer<any, any>> = R extends Reducer< + infer S, + any + > + ? S + : never; + type ReducerAction<R extends Reducer<any, any>> = R extends Reducer< + any, + infer A + > + ? A + : never; + // The identity check is done with the SameValue algorithm (Object.is), which is stricter than === + type ReducerStateWithoutAction< + R extends ReducerWithoutAction<any> + > = R extends ReducerWithoutAction<infer S> ? S : never; + // TODO (TypeScript 3.0): ReadonlyArray<unknown> + type DependencyList = ReadonlyArray<any>; + + // NOTE: callbacks are _only_ allowed to return either void, or a destructor. + // The destructor is itself only allowed to return void. + type EffectCallback = () => void | (() => void | undefined); + + interface MutableRefObject<T> { + current: T; + } + + // This will technically work if you give a Consumer<T> or Provider<T> but it's deprecated and warns + /** + * Accepts a context object (the value returned from `React.createContext`) and returns the current + * context value, as given by the nearest context provider for the given context. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usecontext + */ + function useContext<T>( + context: Context<T> /*, (not public API) observedBits?: number|boolean */ + ): T; + /** + * Returns a stateful value, and a function to update it. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usestate + */ + function useState<S>( + initialState: S | (() => S) + ): [S, Dispatch<SetStateAction<S>>]; + // convenience overload when first argument is ommitted + /** + * Returns a stateful value, and a function to update it. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usestate + */ + function useState<S = undefined>(): [ + S | undefined, + Dispatch<SetStateAction<S | undefined>> + ]; + /** + * An alternative to `useState`. + * + * `useReducer` is usually preferable to `useState` when you have complex state logic that involves + * multiple sub-values. It also lets you optimize performance for components that trigger deep + * updates because you can pass `dispatch` down instead of callbacks. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usereducer + */ + // overload where dispatch could accept 0 arguments. + function useReducer<R extends ReducerWithoutAction<any>, I>( + reducer: R, + initializerArg: I, + initializer: (arg: I) => ReducerStateWithoutAction<R> + ): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; + /** + * An alternative to `useState`. + * + * `useReducer` is usually preferable to `useState` when you have complex state logic that involves + * multiple sub-values. It also lets you optimize performance for components that trigger deep + * updates because you can pass `dispatch` down instead of callbacks. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usereducer + */ + // overload where dispatch could accept 0 arguments. + function useReducer<R extends ReducerWithoutAction<any>>( + reducer: R, + initializerArg: ReducerStateWithoutAction<R>, + initializer?: undefined + ): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; + /** + * An alternative to `useState`. + * + * `useReducer` is usually preferable to `useState` when you have complex state logic that involves + * multiple sub-values. It also lets you optimize performance for components that trigger deep + * updates because you can pass `dispatch` down instead of callbacks. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usereducer + */ + // overload where "I" may be a subset of ReducerState<R>; used to provide autocompletion. + // If "I" matches ReducerState<R> exactly then the last overload will allow initializer to be ommitted. + // the last overload effectively behaves as if the identity function (x => x) is the initializer. + function useReducer<R extends Reducer<any, any>, I>( + reducer: R, + initializerArg: I & ReducerState<R>, + initializer: (arg: I & ReducerState<R>) => ReducerState<R> + ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; + /** + * An alternative to `useState`. + * + * `useReducer` is usually preferable to `useState` when you have complex state logic that involves + * multiple sub-values. It also lets you optimize performance for components that trigger deep + * updates because you can pass `dispatch` down instead of callbacks. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usereducer + */ + // overload for free "I"; all goes as long as initializer converts it into "ReducerState<R>". + function useReducer<R extends Reducer<any, any>, I>( + reducer: R, + initializerArg: I, + initializer: (arg: I) => ReducerState<R> + ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; + /** + * An alternative to `useState`. + * + * `useReducer` is usually preferable to `useState` when you have complex state logic that involves + * multiple sub-values. It also lets you optimize performance for components that trigger deep + * updates because you can pass `dispatch` down instead of callbacks. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usereducer + */ + + // I'm not sure if I keep this 2-ary or if I make it (2,3)-ary; it's currently (2,3)-ary. + // The Flow types do have an overload for 3-ary invocation with undefined initializer. + + // NOTE: without the ReducerState indirection, TypeScript would reduce S to be the most common + // supertype between the reducer's return type and the initialState (or the initializer's return type), + // which would prevent autocompletion from ever working. + + // TODO: double-check if this weird overload logic is necessary. It is possible it's either a bug + // in older versions, or a regression in newer versions of the typescript completion service. + function useReducer<R extends Reducer<any, any>>( + reducer: R, + initialState: ReducerState<R>, + initializer?: undefined + ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; + /** + * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument + * (`initialValue`). The returned object will persist for the full lifetime of the component. + * + * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable + * value around similar to how you’d use instance fields in classes. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#useref + */ + // TODO (TypeScript 3.0): <T extends unknown> + function useRef<T>(initialValue: T): MutableRefObject<T>; + // convenience overload for refs given as a ref prop as they typically start with a null value + /** + * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument + * (`initialValue`). The returned object will persist for the full lifetime of the component. + * + * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable + * value around similar to how you’d use instance fields in classes. + * + * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type + * of the generic argument. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#useref + */ + // TODO (TypeScript 3.0): <T extends unknown> + function useRef<T>(initialValue: T | null): RefObject<T>; + // convenience overload for potentially undefined initialValue / call with 0 arguments + // has a default to stop it from defaulting to {} instead + /** + * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument + * (`initialValue`). The returned object will persist for the full lifetime of the component. + * + * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable + * value around similar to how you’d use instance fields in classes. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#useref + */ + // TODO (TypeScript 3.0): <T extends unknown> + function useRef<T = undefined>(): MutableRefObject<T | undefined>; + /** + * The signature is identical to `useEffect`, but it fires synchronously after all DOM mutations. + * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside + * `useLayoutEffect` will be flushed synchronously, before the browser has a chance to paint. + * + * Prefer the standard `useEffect` when possible to avoid blocking visual updates. + * + * If you’re migrating code from a class component, `useLayoutEffect` fires in the same phase as + * `componentDidMount` and `componentDidUpdate`. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#uselayouteffect + */ + function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void; + /** + * Accepts a function that contains imperative, possibly effectful code. + * + * @param effect Imperative function that can return a cleanup function + * @param deps If present, effect will only activate if the values in the list change. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#useeffect + */ + function useEffect(effect: EffectCallback, deps?: DependencyList): void; + // NOTE: this does not accept strings, but this will have to be fixed by removing strings from type Ref<T> + /** + * `useImperativeHandle` customizes the instance value that is exposed to parent components when using + * `ref`. As always, imperative code using refs should be avoided in most cases. + * + * `useImperativeHandle` should be used with `React.forwardRef`. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#useimperativehandle + */ + function useImperativeHandle<T, R extends T>( + ref: Ref<T> | undefined, + init: () => R, + deps?: DependencyList + ): void; + // I made 'inputs' required here and in useMemo as there's no point to memoizing without the memoization key + // useCallback(X) is identical to just using X, useMemo(() => Y) is identical to just using Y. + /** + * `useCallback` will return a memoized version of the callback that only changes if one of the `inputs` + * has changed. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usecallback + */ + // TODO (TypeScript 3.0): <T extends (...args: never[]) => unknown> + function useCallback<T extends (...args: any[]) => any>( + callback: T, + deps: DependencyList + ): T; + /** + * `useMemo` will only recompute the memoized value when one of the `deps` has changed. + * + * Usage note: if calling `useMemo` with a referentially stable function, also give it as the input in + * the second argument. + * + * ```ts + * function expensive () { ... } + * + * function Component () { + * const expensiveResult = useMemo(expensive, [expensive]) + * return ... + * } + * ``` + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usememo + */ + // allow undefined, but don't make it optional as that is very likely a mistake + function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; + /** + * `useDebugValue` can be used to display a label for custom hooks in React DevTools. + * + * NOTE: We don’t recommend adding debug values to every custom hook. + * It’s most valuable for custom hooks that are part of shared libraries. + * + * @version 16.8.0 + * @see https://reactjs.org/docs/hooks-reference.html#usedebugvalue + */ + // the name of the custom hook is itself derived from the function name at runtime: + // it's just the function name without the "use" prefix. + function useDebugValue<T>(value: T, format?: (value: T) => any): void; + + // + // Event System + // ---------------------------------------------------------------------- + // TODO: change any to unknown when moving to TS v3 + interface BaseSyntheticEvent<E = object, C = any, T = any> { + nativeEvent: E; + currentTarget: C; + target: T; + bubbles: boolean; + cancelable: boolean; + defaultPrevented: boolean; + eventPhase: number; + isTrusted: boolean; + preventDefault(): void; + isDefaultPrevented(): boolean; + stopPropagation(): void; + isPropagationStopped(): boolean; + persist(): void; + timeStamp: number; + type: string; + } + + /** + * currentTarget - a reference to the element on which the event listener is registered. + * + * target - a reference to the element from which the event was originally dispatched. + * This might be a child element to the element on which the event listener is registered. + * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 + */ + interface SyntheticEvent<T = Element, E = Event> + extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {} + + interface ClipboardEvent<T = Element> + extends SyntheticEvent<T, NativeClipboardEvent> { + clipboardData: DataTransfer; + } + + interface CompositionEvent<T = Element> + extends SyntheticEvent<T, NativeCompositionEvent> { + data: string; + } + + interface DragEvent<T = Element> extends MouseEvent<T, NativeDragEvent> { + dataTransfer: DataTransfer; + } + + interface PointerEvent<T = Element> + extends MouseEvent<T, NativePointerEvent> { + pointerId: number; + pressure: number; + tiltX: number; + tiltY: number; + width: number; + height: number; + pointerType: "mouse" | "pen" | "touch"; + isPrimary: boolean; + } + + interface FocusEvent<T = Element> + extends SyntheticEvent<T, NativeFocusEvent> { + relatedTarget: EventTarget | null; + target: EventTarget & T; + } + + // tslint:disable-next-line:no-empty-interface + interface FormEvent<T = Element> extends SyntheticEvent<T> {} + + interface InvalidEvent<T = Element> extends SyntheticEvent<T> { + target: EventTarget & T; + } + + interface ChangeEvent<T = Element> extends SyntheticEvent<T> { + target: EventTarget & T; + } + + interface KeyboardEvent<T = Element> + extends SyntheticEvent<T, NativeKeyboardEvent> { + altKey: boolean; + charCode: number; + ctrlKey: boolean; + /** + * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method. + */ + getModifierState(key: string): boolean; + /** + * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values + */ + key: string; + keyCode: number; + locale: string; + location: number; + metaKey: boolean; + repeat: boolean; + shiftKey: boolean; + which: number; + } + + interface MouseEvent<T = Element, E = NativeMouseEvent> + extends SyntheticEvent<T, E> { + altKey: boolean; + button: number; + buttons: number; + clientX: number; + clientY: number; + ctrlKey: boolean; + /** + * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method. + */ + getModifierState(key: string): boolean; + metaKey: boolean; + movementX: number; + movementY: number; + pageX: number; + pageY: number; + relatedTarget: EventTarget | null; + screenX: number; + screenY: number; + shiftKey: boolean; + } + + interface TouchEvent<T = Element> + extends SyntheticEvent<T, NativeTouchEvent> { + altKey: boolean; + changedTouches: TouchList; + ctrlKey: boolean; + /** + * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method. + */ + getModifierState(key: string): boolean; + metaKey: boolean; + shiftKey: boolean; + targetTouches: TouchList; + touches: TouchList; + } + + interface UIEvent<T = Element> extends SyntheticEvent<T, NativeUIEvent> { + detail: number; + view: AbstractView; + } + + interface WheelEvent<T = Element> extends MouseEvent<T, NativeWheelEvent> { + deltaMode: number; + deltaX: number; + deltaY: number; + deltaZ: number; + } + + interface AnimationEvent<T = Element> + extends SyntheticEvent<T, NativeAnimationEvent> { + animationName: string; + elapsedTime: number; + pseudoElement: string; + } + + interface TransitionEvent<T = Element> + extends SyntheticEvent<T, NativeTransitionEvent> { + elapsedTime: number; + propertyName: string; + pseudoElement: string; + } + + // + // Event Handler Types + // ---------------------------------------------------------------------- + + type EventHandler<E extends SyntheticEvent<any>> = { + bivarianceHack(event: E): void; + }["bivarianceHack"]; + + type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>; + + type ClipboardEventHandler<T = Element> = EventHandler<ClipboardEvent<T>>; + type CompositionEventHandler<T = Element> = EventHandler<CompositionEvent<T>>; + type DragEventHandler<T = Element> = EventHandler<DragEvent<T>>; + type FocusEventHandler<T = Element> = EventHandler<FocusEvent<T>>; + type FormEventHandler<T = Element> = EventHandler<FormEvent<T>>; + type ChangeEventHandler<T = Element> = EventHandler<ChangeEvent<T>>; + type KeyboardEventHandler<T = Element> = EventHandler<KeyboardEvent<T>>; + type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>; + type TouchEventHandler<T = Element> = EventHandler<TouchEvent<T>>; + type PointerEventHandler<T = Element> = EventHandler<PointerEvent<T>>; + type UIEventHandler<T = Element> = EventHandler<UIEvent<T>>; + type WheelEventHandler<T = Element> = EventHandler<WheelEvent<T>>; + type AnimationEventHandler<T = Element> = EventHandler<AnimationEvent<T>>; + type TransitionEventHandler<T = Element> = EventHandler<TransitionEvent<T>>; + + // + // Props / DOM Attributes + // ---------------------------------------------------------------------- + + /** + * @deprecated. This was used to allow clients to pass `ref` and `key` + * to `createElement`, which is no longer necessary due to intersection + * types. If you need to declare a props object before passing it to + * `createElement` or a factory, use `ClassAttributes<T>`: + * + * ```ts + * var b: Button | null; + * var props: ButtonProps & ClassAttributes<Button> = { + * ref: b => button = b, // ok! + * label: "I'm a Button" + * }; + * ``` + */ + interface Props<T> { + children?: ReactNode; + key?: Key; + ref?: LegacyRef<T>; + } + + interface HTMLProps<T> extends AllHTMLAttributes<T>, ClassAttributes<T> {} + + type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & + E; + + interface SVGProps<T> extends SVGAttributes<T>, ClassAttributes<T> {} + + interface DOMAttributes<T> { + children?: ReactNode; + dangerouslySetInnerHTML?: { + __html: string; + }; + + // Clipboard Events + onCopy?: ClipboardEventHandler<T>; + onCopyCapture?: ClipboardEventHandler<T>; + onCut?: ClipboardEventHandler<T>; + onCutCapture?: ClipboardEventHandler<T>; + onPaste?: ClipboardEventHandler<T>; + onPasteCapture?: ClipboardEventHandler<T>; + + // Composition Events + onCompositionEnd?: CompositionEventHandler<T>; + onCompositionEndCapture?: CompositionEventHandler<T>; + onCompositionStart?: CompositionEventHandler<T>; + onCompositionStartCapture?: CompositionEventHandler<T>; + onCompositionUpdate?: CompositionEventHandler<T>; + onCompositionUpdateCapture?: CompositionEventHandler<T>; + + // Focus Events + onFocus?: FocusEventHandler<T>; + onFocusCapture?: FocusEventHandler<T>; + onBlur?: FocusEventHandler<T>; + onBlurCapture?: FocusEventHandler<T>; + + // Form Events + onChange?: FormEventHandler<T>; + onChangeCapture?: FormEventHandler<T>; + onBeforeInput?: FormEventHandler<T>; + onBeforeInputCapture?: FormEventHandler<T>; + onInput?: FormEventHandler<T>; + onInputCapture?: FormEventHandler<T>; + onReset?: FormEventHandler<T>; + onResetCapture?: FormEventHandler<T>; + onSubmit?: FormEventHandler<T>; + onSubmitCapture?: FormEventHandler<T>; + onInvalid?: FormEventHandler<T>; + onInvalidCapture?: FormEventHandler<T>; + + // Image Events + onLoad?: ReactEventHandler<T>; + onLoadCapture?: ReactEventHandler<T>; + onError?: ReactEventHandler<T>; // also a Media Event + onErrorCapture?: ReactEventHandler<T>; // also a Media Event + + // Keyboard Events + onKeyDown?: KeyboardEventHandler<T>; + onKeyDownCapture?: KeyboardEventHandler<T>; + onKeyPress?: KeyboardEventHandler<T>; + onKeyPressCapture?: KeyboardEventHandler<T>; + onKeyUp?: KeyboardEventHandler<T>; + onKeyUpCapture?: KeyboardEventHandler<T>; + + // Media Events + onAbort?: ReactEventHandler<T>; + onAbortCapture?: ReactEventHandler<T>; + onCanPlay?: ReactEventHandler<T>; + onCanPlayCapture?: ReactEventHandler<T>; + onCanPlayThrough?: ReactEventHandler<T>; + onCanPlayThroughCapture?: ReactEventHandler<T>; + onDurationChange?: ReactEventHandler<T>; + onDurationChangeCapture?: ReactEventHandler<T>; + onEmptied?: ReactEventHandler<T>; + onEmptiedCapture?: ReactEventHandler<T>; + onEncrypted?: ReactEventHandler<T>; + onEncryptedCapture?: ReactEventHandler<T>; + onEnded?: ReactEventHandler<T>; + onEndedCapture?: ReactEventHandler<T>; + onLoadedData?: ReactEventHandler<T>; + onLoadedDataCapture?: ReactEventHandler<T>; + onLoadedMetadata?: ReactEventHandler<T>; + onLoadedMetadataCapture?: ReactEventHandler<T>; + onLoadStart?: ReactEventHandler<T>; + onLoadStartCapture?: ReactEventHandler<T>; + onPause?: ReactEventHandler<T>; + onPauseCapture?: ReactEventHandler<T>; + onPlay?: ReactEventHandler<T>; + onPlayCapture?: ReactEventHandler<T>; + onPlaying?: ReactEventHandler<T>; + onPlayingCapture?: ReactEventHandler<T>; + onProgress?: ReactEventHandler<T>; + onProgressCapture?: ReactEventHandler<T>; + onRateChange?: ReactEventHandler<T>; + onRateChangeCapture?: ReactEventHandler<T>; + onSeeked?: ReactEventHandler<T>; + onSeekedCapture?: ReactEventHandler<T>; + onSeeking?: ReactEventHandler<T>; + onSeekingCapture?: ReactEventHandler<T>; + onStalled?: ReactEventHandler<T>; + onStalledCapture?: ReactEventHandler<T>; + onSuspend?: ReactEventHandler<T>; + onSuspendCapture?: ReactEventHandler<T>; + onTimeUpdate?: ReactEventHandler<T>; + onTimeUpdateCapture?: ReactEventHandler<T>; + onVolumeChange?: ReactEventHandler<T>; + onVolumeChangeCapture?: ReactEventHandler<T>; + onWaiting?: ReactEventHandler<T>; + onWaitingCapture?: ReactEventHandler<T>; + + // MouseEvents + onAuxClick?: MouseEventHandler<T>; + onAuxClickCapture?: MouseEventHandler<T>; + onClick?: MouseEventHandler<T>; + onClickCapture?: MouseEventHandler<T>; + onContextMenu?: MouseEventHandler<T>; + onContextMenuCapture?: MouseEventHandler<T>; + onDoubleClick?: MouseEventHandler<T>; + onDoubleClickCapture?: MouseEventHandler<T>; + onDrag?: DragEventHandler<T>; + onDragCapture?: DragEventHandler<T>; + onDragEnd?: DragEventHandler<T>; + onDragEndCapture?: DragEventHandler<T>; + onDragEnter?: DragEventHandler<T>; + onDragEnterCapture?: DragEventHandler<T>; + onDragExit?: DragEventHandler<T>; + onDragExitCapture?: DragEventHandler<T>; + onDragLeave?: DragEventHandler<T>; + onDragLeaveCapture?: DragEventHandler<T>; + onDragOver?: DragEventHandler<T>; + onDragOverCapture?: DragEventHandler<T>; + onDragStart?: DragEventHandler<T>; + onDragStartCapture?: DragEventHandler<T>; + onDrop?: DragEventHandler<T>; + onDropCapture?: DragEventHandler<T>; + onMouseDown?: MouseEventHandler<T>; + onMouseDownCapture?: MouseEventHandler<T>; + onMouseEnter?: MouseEventHandler<T>; + onMouseLeave?: MouseEventHandler<T>; + onMouseMove?: MouseEventHandler<T>; + onMouseMoveCapture?: MouseEventHandler<T>; + onMouseOut?: MouseEventHandler<T>; + onMouseOutCapture?: MouseEventHandler<T>; + onMouseOver?: MouseEventHandler<T>; + onMouseOverCapture?: MouseEventHandler<T>; + onMouseUp?: MouseEventHandler<T>; + onMouseUpCapture?: MouseEventHandler<T>; + + // Selection Events + onSelect?: ReactEventHandler<T>; + onSelectCapture?: ReactEventHandler<T>; + + // Touch Events + onTouchCancel?: TouchEventHandler<T>; + onTouchCancelCapture?: TouchEventHandler<T>; + onTouchEnd?: TouchEventHandler<T>; + onTouchEndCapture?: TouchEventHandler<T>; + onTouchMove?: TouchEventHandler<T>; + onTouchMoveCapture?: TouchEventHandler<T>; + onTouchStart?: TouchEventHandler<T>; + onTouchStartCapture?: TouchEventHandler<T>; + + // Pointer Events + onPointerDown?: PointerEventHandler<T>; + onPointerDownCapture?: PointerEventHandler<T>; + onPointerMove?: PointerEventHandler<T>; + onPointerMoveCapture?: PointerEventHandler<T>; + onPointerUp?: PointerEventHandler<T>; + onPointerUpCapture?: PointerEventHandler<T>; + onPointerCancel?: PointerEventHandler<T>; + onPointerCancelCapture?: PointerEventHandler<T>; + onPointerEnter?: PointerEventHandler<T>; + onPointerEnterCapture?: PointerEventHandler<T>; + onPointerLeave?: PointerEventHandler<T>; + onPointerLeaveCapture?: PointerEventHandler<T>; + onPointerOver?: PointerEventHandler<T>; + onPointerOverCapture?: PointerEventHandler<T>; + onPointerOut?: PointerEventHandler<T>; + onPointerOutCapture?: PointerEventHandler<T>; + onGotPointerCapture?: PointerEventHandler<T>; + onGotPointerCaptureCapture?: PointerEventHandler<T>; + onLostPointerCapture?: PointerEventHandler<T>; + onLostPointerCaptureCapture?: PointerEventHandler<T>; + + // UI Events + onScroll?: UIEventHandler<T>; + onScrollCapture?: UIEventHandler<T>; + + // Wheel Events + onWheel?: WheelEventHandler<T>; + onWheelCapture?: WheelEventHandler<T>; + + // Animation Events + onAnimationStart?: AnimationEventHandler<T>; + onAnimationStartCapture?: AnimationEventHandler<T>; + onAnimationEnd?: AnimationEventHandler<T>; + onAnimationEndCapture?: AnimationEventHandler<T>; + onAnimationIteration?: AnimationEventHandler<T>; + onAnimationIterationCapture?: AnimationEventHandler<T>; + + // Transition Events + onTransitionEnd?: TransitionEventHandler<T>; + onTransitionEndCapture?: TransitionEventHandler<T>; + } + + export interface CSSProperties extends CSS.Properties<string | number> { + /** + * The index signature was removed to enable closed typing for style + * using CSSType. You're able to use type assertion or module augmentation + * to add properties or an index signature of your own. + * + * For examples and more information, visit: + * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors + */ + } + + // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ + interface AriaAttributes { + /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */ + "aria-activedescendant"?: string; + /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */ + "aria-atomic"?: boolean | "false" | "true"; + /** + * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be + * presented if they are made. + */ + "aria-autocomplete"?: "none" | "inline" | "list" | "both"; + /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */ + "aria-busy"?: boolean | "false" | "true"; + /** + * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. + * @see aria-pressed @see aria-selected. + */ + "aria-checked"?: boolean | "false" | "mixed" | "true"; + /** + * Defines the total number of columns in a table, grid, or treegrid. + * @see aria-colindex. + */ + "aria-colcount"?: number; + /** + * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. + * @see aria-colcount @see aria-colspan. + */ + "aria-colindex"?: number; + /** + * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-colindex @see aria-rowspan. + */ + "aria-colspan"?: number; + /** + * Identifies the element (or elements) whose contents or presence are controlled by the current element. + * @see aria-owns. + */ + "aria-controls"?: string; + /** Indicates the element that represents the current item within a container or set of related elements. */ + "aria-current"?: + | boolean + | "false" + | "true" + | "page" + | "step" + | "location" + | "date" + | "time"; + /** + * Identifies the element (or elements) that describes the object. + * @see aria-labelledby + */ + "aria-describedby"?: string; + /** + * Identifies the element that provides a detailed, extended description for the object. + * @see aria-describedby. + */ + "aria-details"?: string; + /** + * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. + * @see aria-hidden @see aria-readonly. + */ + "aria-disabled"?: boolean | "false" | "true"; + /** + * Indicates what functions can be performed when a dragged object is released on the drop target. + * @deprecated in ARIA 1.1 + */ + "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup"; + /** + * Identifies the element that provides an error message for the object. + * @see aria-invalid @see aria-describedby. + */ + "aria-errormessage"?: string; + /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ + "aria-expanded"?: boolean | "false" | "true"; + /** + * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, + * allows assistive technology to override the general default of reading in document source order. + */ + "aria-flowto"?: string; + /** + * Indicates an element's "grabbed" state in a drag-and-drop operation. + * @deprecated in ARIA 1.1 + */ + "aria-grabbed"?: boolean | "false" | "true"; + /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */ + "aria-haspopup"?: + | boolean + | "false" + | "true" + | "menu" + | "listbox" + | "tree" + | "grid" + | "dialog"; + /** + * Indicates whether the element is exposed to an accessibility API. + * @see aria-disabled. + */ + "aria-hidden"?: boolean | "false" | "true"; + /** + * Indicates the entered value does not conform to the format expected by the application. + * @see aria-errormessage. + */ + "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling"; + /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ + "aria-keyshortcuts"?: string; + /** + * Defines a string value that labels the current element. + * @see aria-labelledby. + */ + "aria-label"?: string; + /** + * Identifies the element (or elements) that labels the current element. + * @see aria-describedby. + */ + "aria-labelledby"?: string; + /** Defines the hierarchical level of an element within a structure. */ + "aria-level"?: number; + /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */ + "aria-live"?: "off" | "assertive" | "polite"; + /** Indicates whether an element is modal when displayed. */ + "aria-modal"?: boolean | "false" | "true"; + /** Indicates whether a text box accepts multiple lines of input or only a single line. */ + "aria-multiline"?: boolean | "false" | "true"; + /** Indicates that the user may select more than one item from the current selectable descendants. */ + "aria-multiselectable"?: boolean | "false" | "true"; + /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ + "aria-orientation"?: "horizontal" | "vertical"; + /** + * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship + * between DOM elements where the DOM hierarchy cannot be used to represent the relationship. + * @see aria-controls. + */ + "aria-owns"?: string; + /** + * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. + * A hint could be a sample value or a brief description of the expected format. + */ + "aria-placeholder"?: string; + /** + * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-setsize. + */ + "aria-posinset"?: number; + /** + * Indicates the current "pressed" state of toggle buttons. + * @see aria-checked @see aria-selected. + */ + "aria-pressed"?: boolean | "false" | "mixed" | "true"; + /** + * Indicates that the element is not editable, but is otherwise operable. + * @see aria-disabled. + */ + "aria-readonly"?: boolean | "false" | "true"; + /** + * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. + * @see aria-atomic. + */ + "aria-relevant"?: + | "additions" + | "additions text" + | "all" + | "removals" + | "text"; + /** Indicates that user input is required on the element before a form may be submitted. */ + "aria-required"?: boolean | "false" | "true"; + /** Defines a human-readable, author-localized description for the role of an element. */ + "aria-roledescription"?: string; + /** + * Defines the total number of rows in a table, grid, or treegrid. + * @see aria-rowindex. + */ + "aria-rowcount"?: number; + /** + * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. + * @see aria-rowcount @see aria-rowspan. + */ + "aria-rowindex"?: number; + /** + * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. + * @see aria-rowindex @see aria-colspan. + */ + "aria-rowspan"?: number; + /** + * Indicates the current "selected" state of various widgets. + * @see aria-checked @see aria-pressed. + */ + "aria-selected"?: boolean | "false" | "true"; + /** + * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. + * @see aria-posinset. + */ + "aria-setsize"?: number; + /** Indicates if items in a table or grid are sorted in ascending or descending order. */ + "aria-sort"?: "none" | "ascending" | "descending" | "other"; + /** Defines the maximum allowed value for a range widget. */ + "aria-valuemax"?: number; + /** Defines the minimum allowed value for a range widget. */ + "aria-valuemin"?: number; + /** + * Defines the current value for a range widget. + * @see aria-valuetext. + */ + "aria-valuenow"?: number; + /** Defines the human readable text alternative of aria-valuenow for a range widget. */ + "aria-valuetext"?: string; + } + + interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> { + // React-specific Attributes + defaultChecked?: boolean; + defaultValue?: string | number | string[]; + suppressContentEditableWarning?: boolean; + suppressHydrationWarning?: boolean; + + // Standard HTML Attributes + accessKey?: string; + className?: string; + contentEditable?: Booleanish | "inherit"; + contextMenu?: string; + dir?: string; + draggable?: Booleanish; + hidden?: boolean; + id?: string; + lang?: string; + placeholder?: string; + slot?: string; + spellCheck?: Booleanish; + style?: CSSProperties; + tabIndex?: number; + title?: string; + translate?: "yes" | "no"; + + // Unknown + radioGroup?: string; // <command>, <menuitem> + + // WAI-ARIA + role?: string; + + // RDFa Attributes + about?: string; + datatype?: string; + inlist?: any; + prefix?: string; + property?: string; + resource?: string; + typeof?: string; + vocab?: string; + + // Non-standard Attributes + autoCapitalize?: string; + autoCorrect?: string; + autoSave?: string; + color?: string; + itemProp?: string; + itemScope?: boolean; + itemType?: string; + itemID?: string; + itemRef?: string; + results?: number; + security?: string; + unselectable?: "on" | "off"; + + // Living Standard + /** + * Hints at the type of data that might be entered by the user while editing the element or its contents + * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute + */ + inputMode?: + | "none" + | "text" + | "tel" + | "url" + | "email" + | "numeric" + | "decimal" + | "search"; + /** + * Specify that a standard HTML element should behave like a defined custom built-in element + * @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is + */ + is?: string; + } + + interface AllHTMLAttributes<T> extends HTMLAttributes<T> { + // Standard HTML Attributes + accept?: string; + acceptCharset?: string; + action?: string; + allowFullScreen?: boolean; + allowTransparency?: boolean; + alt?: string; + as?: string; + async?: boolean; + autoComplete?: string; + autoFocus?: boolean; + autoPlay?: boolean; + capture?: boolean | string; + cellPadding?: number | string; + cellSpacing?: number | string; + charSet?: string; + challenge?: string; + checked?: boolean; + cite?: string; + classID?: string; + cols?: number; + colSpan?: number; + content?: string; + controls?: boolean; + coords?: string; + crossOrigin?: string; + data?: string; + dateTime?: string; + default?: boolean; + defer?: boolean; + disabled?: boolean; + download?: any; + encType?: string; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + frameBorder?: number | string; + headers?: string; + height?: number | string; + high?: number; + href?: string; + hrefLang?: string; + htmlFor?: string; + httpEquiv?: string; + integrity?: string; + keyParams?: string; + keyType?: string; + kind?: string; + label?: string; + list?: string; + loop?: boolean; + low?: number; + manifest?: string; + marginHeight?: number; + marginWidth?: number; + max?: number | string; + maxLength?: number; + media?: string; + mediaGroup?: string; + method?: string; + min?: number | string; + minLength?: number; + multiple?: boolean; + muted?: boolean; + name?: string; + nonce?: string; + noValidate?: boolean; + open?: boolean; + optimum?: number; + pattern?: string; + placeholder?: string; + playsInline?: boolean; + poster?: string; + preload?: string; + readOnly?: boolean; + rel?: string; + required?: boolean; + reversed?: boolean; + rows?: number; + rowSpan?: number; + sandbox?: string; + scope?: string; + scoped?: boolean; + scrolling?: string; + seamless?: boolean; + selected?: boolean; + shape?: string; + size?: number; + sizes?: string; + span?: number; + src?: string; + srcDoc?: string; + srcLang?: string; + srcSet?: string; + start?: number; + step?: number | string; + summary?: string; + target?: string; + type?: string; + useMap?: string; + value?: string | string[] | number; + width?: number | string; + wmode?: string; + wrap?: string; + } + + interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> { + download?: any; + href?: string; + hrefLang?: string; + media?: string; + ping?: string; + rel?: string; + target?: string; + type?: string; + referrerPolicy?: string; + } + + // tslint:disable-next-line:no-empty-interface + interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {} + + interface AreaHTMLAttributes<T> extends HTMLAttributes<T> { + alt?: string; + coords?: string; + download?: any; + href?: string; + hrefLang?: string; + media?: string; + rel?: string; + shape?: string; + target?: string; + } + + interface BaseHTMLAttributes<T> extends HTMLAttributes<T> { + href?: string; + target?: string; + } + + interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> { + cite?: string; + } + + interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> { + autoFocus?: boolean; + disabled?: boolean; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + name?: string; + type?: "submit" | "reset" | "button"; + value?: string | string[] | number; + } + + interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> { + height?: number | string; + width?: number | string; + } + + interface ColHTMLAttributes<T> extends HTMLAttributes<T> { + span?: number; + width?: number | string; + } + + interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> { + span?: number; + } + + interface DataHTMLAttributes<T> extends HTMLAttributes<T> { + value?: string | string[] | number; + } + + interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> { + open?: boolean; + } + + interface DelHTMLAttributes<T> extends HTMLAttributes<T> { + cite?: string; + dateTime?: string; + } + + interface DialogHTMLAttributes<T> extends HTMLAttributes<T> { + open?: boolean; + } + + interface EmbedHTMLAttributes<T> extends HTMLAttributes<T> { + height?: number | string; + src?: string; + type?: string; + width?: number | string; + } + + interface FieldsetHTMLAttributes<T> extends HTMLAttributes<T> { + disabled?: boolean; + form?: string; + name?: string; + } + + interface FormHTMLAttributes<T> extends HTMLAttributes<T> { + acceptCharset?: string; + action?: string; + autoComplete?: string; + encType?: string; + method?: string; + name?: string; + noValidate?: boolean; + target?: string; + } + + interface HtmlHTMLAttributes<T> extends HTMLAttributes<T> { + manifest?: string; + } + + interface IframeHTMLAttributes<T> extends HTMLAttributes<T> { + allow?: string; + allowFullScreen?: boolean; + allowTransparency?: boolean; + frameBorder?: number | string; + height?: number | string; + marginHeight?: number; + marginWidth?: number; + name?: string; + referrerPolicy?: string; + sandbox?: string; + scrolling?: string; + seamless?: boolean; + src?: string; + srcDoc?: string; + width?: number | string; + } + + interface ImgHTMLAttributes<T> extends HTMLAttributes<T> { + alt?: string; + crossOrigin?: "anonymous" | "use-credentials" | ""; + decoding?: "async" | "auto" | "sync"; + height?: number | string; + sizes?: string; + src?: string; + srcSet?: string; + useMap?: string; + width?: number | string; + } + + interface InsHTMLAttributes<T> extends HTMLAttributes<T> { + cite?: string; + dateTime?: string; + } + + interface InputHTMLAttributes<T> extends HTMLAttributes<T> { + accept?: string; + alt?: string; + autoComplete?: string; + autoFocus?: boolean; + capture?: boolean | string; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute + checked?: boolean; + crossOrigin?: string; + disabled?: boolean; + form?: string; + formAction?: string; + formEncType?: string; + formMethod?: string; + formNoValidate?: boolean; + formTarget?: string; + height?: number | string; + list?: string; + max?: number | string; + maxLength?: number; + min?: number | string; + minLength?: number; + multiple?: boolean; + name?: string; + pattern?: string; + placeholder?: string; + readOnly?: boolean; + required?: boolean; + size?: number; + src?: string; + step?: number | string; + type?: string; + value?: string | string[] | number; + width?: number | string; + + onChange?: ChangeEventHandler<T>; + } + + interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> { + autoFocus?: boolean; + challenge?: string; + disabled?: boolean; + form?: string; + keyType?: string; + keyParams?: string; + name?: string; + } + + interface LabelHTMLAttributes<T> extends HTMLAttributes<T> { + form?: string; + htmlFor?: string; + } + + interface LiHTMLAttributes<T> extends HTMLAttributes<T> { + value?: string | string[] | number; + } + + interface LinkHTMLAttributes<T> extends HTMLAttributes<T> { + as?: string; + crossOrigin?: string; + href?: string; + hrefLang?: string; + integrity?: string; + media?: string; + rel?: string; + sizes?: string; + type?: string; + } + + interface MapHTMLAttributes<T> extends HTMLAttributes<T> { + name?: string; + } + + interface MenuHTMLAttributes<T> extends HTMLAttributes<T> { + type?: string; + } + + interface MediaHTMLAttributes<T> extends HTMLAttributes<T> { + autoPlay?: boolean; + controls?: boolean; + controlsList?: string; + crossOrigin?: string; + loop?: boolean; + mediaGroup?: string; + muted?: boolean; + playsinline?: boolean; + preload?: string; + src?: string; + } + + interface MetaHTMLAttributes<T> extends HTMLAttributes<T> { + charSet?: string; + content?: string; + httpEquiv?: string; + name?: string; + } + + interface MeterHTMLAttributes<T> extends HTMLAttributes<T> { + form?: string; + high?: number; + low?: number; + max?: number | string; + min?: number | string; + optimum?: number; + value?: string | string[] | number; + } + + interface QuoteHTMLAttributes<T> extends HTMLAttributes<T> { + cite?: string; + } + + interface ObjectHTMLAttributes<T> extends HTMLAttributes<T> { + classID?: string; + data?: string; + form?: string; + height?: number | string; + name?: string; + type?: string; + useMap?: string; + width?: number | string; + wmode?: string; + } + + interface OlHTMLAttributes<T> extends HTMLAttributes<T> { + reversed?: boolean; + start?: number; + type?: "1" | "a" | "A" | "i" | "I"; + } + + interface OptgroupHTMLAttributes<T> extends HTMLAttributes<T> { + disabled?: boolean; + label?: string; + } + + interface OptionHTMLAttributes<T> extends HTMLAttributes<T> { + disabled?: boolean; + label?: string; + selected?: boolean; + value?: string | string[] | number; + } + + interface OutputHTMLAttributes<T> extends HTMLAttributes<T> { + form?: string; + htmlFor?: string; + name?: string; + } + + interface ParamHTMLAttributes<T> extends HTMLAttributes<T> { + name?: string; + value?: string | string[] | number; + } + + interface ProgressHTMLAttributes<T> extends HTMLAttributes<T> { + max?: number | string; + value?: string | string[] | number; + } + + interface ScriptHTMLAttributes<T> extends HTMLAttributes<T> { + async?: boolean; + charSet?: string; + crossOrigin?: string; + defer?: boolean; + integrity?: string; + noModule?: boolean; + nonce?: string; + src?: string; + type?: string; + } + + interface SelectHTMLAttributes<T> extends HTMLAttributes<T> { + autoComplete?: string; + autoFocus?: boolean; + disabled?: boolean; + form?: string; + multiple?: boolean; + name?: string; + required?: boolean; + size?: number; + value?: string | string[] | number; + onChange?: ChangeEventHandler<T>; + } + + interface SourceHTMLAttributes<T> extends HTMLAttributes<T> { + media?: string; + sizes?: string; + src?: string; + srcSet?: string; + type?: string; + } + + interface StyleHTMLAttributes<T> extends HTMLAttributes<T> { + media?: string; + nonce?: string; + scoped?: boolean; + type?: string; + } + + interface TableHTMLAttributes<T> extends HTMLAttributes<T> { + cellPadding?: number | string; + cellSpacing?: number | string; + summary?: string; + } + + interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> { + autoComplete?: string; + autoFocus?: boolean; + cols?: number; + dirName?: string; + disabled?: boolean; + form?: string; + maxLength?: number; + minLength?: number; + name?: string; + placeholder?: string; + readOnly?: boolean; + required?: boolean; + rows?: number; + value?: string | string[] | number; + wrap?: string; + + onChange?: ChangeEventHandler<T>; + } + + interface TdHTMLAttributes<T> extends HTMLAttributes<T> { + align?: "left" | "center" | "right" | "justify" | "char"; + colSpan?: number; + headers?: string; + rowSpan?: number; + scope?: string; + abbr?: string; + valign?: "top" | "middle" | "bottom" | "baseline"; + } + + interface ThHTMLAttributes<T> extends HTMLAttributes<T> { + align?: "left" | "center" | "right" | "justify" | "char"; + colSpan?: number; + headers?: string; + rowSpan?: number; + scope?: string; + abbr?: string; + } + + interface TimeHTMLAttributes<T> extends HTMLAttributes<T> { + dateTime?: string; + } + + interface TrackHTMLAttributes<T> extends HTMLAttributes<T> { + default?: boolean; + kind?: string; + label?: string; + src?: string; + srcLang?: string; + } + + interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> { + height?: number | string; + playsInline?: boolean; + poster?: string; + width?: number | string; + disablePictureInPicture?: boolean; + } + + // this list is "complete" in that it contains every SVG attribute + // that React supports, but the types can be improved. + // Full list here: https://facebook.github.io/react/docs/dom-elements.html + // + // The three broad type categories are (in order of restrictiveness): + // - "number | string" + // - "string" + // - union of string literals + interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T> { + // Attributes which also defined in HTMLAttributes + // See comment in SVGDOMPropertyConfig.js + className?: string; + color?: string; + height?: number | string; + id?: string; + lang?: string; + max?: number | string; + media?: string; + method?: string; + min?: number | string; + name?: string; + style?: CSSProperties; + target?: string; + type?: string; + width?: number | string; + + // Other HTML properties supported by SVG elements in browsers + role?: string; + tabIndex?: number; + crossOrigin?: "anonymous" | "use-credentials" | ""; + + // SVG Specific attributes + accentHeight?: number | string; + accumulate?: "none" | "sum"; + additive?: "replace" | "sum"; + alignmentBaseline?: + | "auto" + | "baseline" + | "before-edge" + | "text-before-edge" + | "middle" + | "central" + | "after-edge" + | "text-after-edge" + | "ideographic" + | "alphabetic" + | "hanging" + | "mathematical" + | "inherit"; + allowReorder?: "no" | "yes"; + alphabetic?: number | string; + amplitude?: number | string; + arabicForm?: "initial" | "medial" | "terminal" | "isolated"; + ascent?: number | string; + attributeName?: string; + attributeType?: string; + autoReverse?: Booleanish; + azimuth?: number | string; + baseFrequency?: number | string; + baselineShift?: number | string; + baseProfile?: number | string; + bbox?: number | string; + begin?: number | string; + bias?: number | string; + by?: number | string; + calcMode?: number | string; + capHeight?: number | string; + clip?: number | string; + clipPath?: string; + clipPathUnits?: number | string; + clipRule?: number | string; + colorInterpolation?: number | string; + colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit"; + colorProfile?: number | string; + colorRendering?: number | string; + contentScriptType?: number | string; + contentStyleType?: number | string; + cursor?: number | string; + cx?: number | string; + cy?: number | string; + d?: string; + decelerate?: number | string; + descent?: number | string; + diffuseConstant?: number | string; + direction?: number | string; + display?: number | string; + divisor?: number | string; + dominantBaseline?: number | string; + dur?: number | string; + dx?: number | string; + dy?: number | string; + edgeMode?: number | string; + elevation?: number | string; + enableBackground?: number | string; + end?: number | string; + exponent?: number | string; + externalResourcesRequired?: Booleanish; + fill?: string; + fillOpacity?: number | string; + fillRule?: "nonzero" | "evenodd" | "inherit"; + filter?: string; + filterRes?: number | string; + filterUnits?: number | string; + floodColor?: number | string; + floodOpacity?: number | string; + focusable?: Booleanish | "auto"; + fontFamily?: string; + fontSize?: number | string; + fontSizeAdjust?: number | string; + fontStretch?: number | string; + fontStyle?: number | string; + fontVariant?: number | string; + fontWeight?: number | string; + format?: number | string; + from?: number | string; + fx?: number | string; + fy?: number | string; + g1?: number | string; + g2?: number | string; + glyphName?: number | string; + glyphOrientationHorizontal?: number | string; + glyphOrientationVertical?: number | string; + glyphRef?: number | string; + gradientTransform?: string; + gradientUnits?: string; + hanging?: number | string; + horizAdvX?: number | string; + horizOriginX?: number | string; + href?: string; + ideographic?: number | string; + imageRendering?: number | string; + in2?: number | string; + in?: string; + intercept?: number | string; + k1?: number | string; + k2?: number | string; + k3?: number | string; + k4?: number | string; + k?: number | string; + kernelMatrix?: number | string; + kernelUnitLength?: number | string; + kerning?: number | string; + keyPoints?: number | string; + keySplines?: number | string; + keyTimes?: number | string; + lengthAdjust?: number | string; + letterSpacing?: number | string; + lightingColor?: number | string; + limitingConeAngle?: number | string; + local?: number | string; + markerEnd?: string; + markerHeight?: number | string; + markerMid?: string; + markerStart?: string; + markerUnits?: number | string; + markerWidth?: number | string; + mask?: string; + maskContentUnits?: number | string; + maskUnits?: number | string; + mathematical?: number | string; + mode?: number | string; + numOctaves?: number | string; + offset?: number | string; + opacity?: number | string; + operator?: number | string; + order?: number | string; + orient?: number | string; + orientation?: number | string; + origin?: number | string; + overflow?: number | string; + overlinePosition?: number | string; + overlineThickness?: number | string; + paintOrder?: number | string; + panose1?: number | string; + pathLength?: number | string; + patternContentUnits?: string; + patternTransform?: number | string; + patternUnits?: string; + pointerEvents?: number | string; + points?: string; + pointsAtX?: number | string; + pointsAtY?: number | string; + pointsAtZ?: number | string; + preserveAlpha?: Booleanish; + preserveAspectRatio?: string; + primitiveUnits?: number | string; + r?: number | string; + radius?: number | string; + refX?: number | string; + refY?: number | string; + renderingIntent?: number | string; + repeatCount?: number | string; + repeatDur?: number | string; + requiredExtensions?: number | string; + requiredFeatures?: number | string; + restart?: number | string; + result?: string; + rotate?: number | string; + rx?: number | string; + ry?: number | string; + scale?: number | string; + seed?: number | string; + shapeRendering?: number | string; + slope?: number | string; + spacing?: number | string; + specularConstant?: number | string; + specularExponent?: number | string; + speed?: number | string; + spreadMethod?: string; + startOffset?: number | string; + stdDeviation?: number | string; + stemh?: number | string; + stemv?: number | string; + stitchTiles?: number | string; + stopColor?: string; + stopOpacity?: number | string; + strikethroughPosition?: number | string; + strikethroughThickness?: number | string; + string?: number | string; + stroke?: string; + strokeDasharray?: string | number; + strokeDashoffset?: string | number; + strokeLinecap?: "butt" | "round" | "square" | "inherit"; + strokeLinejoin?: "miter" | "round" | "bevel" | "inherit"; + strokeMiterlimit?: number | string; + strokeOpacity?: number | string; + strokeWidth?: number | string; + surfaceScale?: number | string; + systemLanguage?: number | string; + tableValues?: number | string; + targetX?: number | string; + targetY?: number | string; + textAnchor?: string; + textDecoration?: number | string; + textLength?: number | string; + textRendering?: number | string; + to?: number | string; + transform?: string; + u1?: number | string; + u2?: number | string; + underlinePosition?: number | string; + underlineThickness?: number | string; + unicode?: number | string; + unicodeBidi?: number | string; + unicodeRange?: number | string; + unitsPerEm?: number | string; + vAlphabetic?: number | string; + values?: string; + vectorEffect?: number | string; + version?: string; + vertAdvY?: number | string; + vertOriginX?: number | string; + vertOriginY?: number | string; + vHanging?: number | string; + vIdeographic?: number | string; + viewBox?: string; + viewTarget?: number | string; + visibility?: number | string; + vMathematical?: number | string; + widths?: number | string; + wordSpacing?: number | string; + writingMode?: number | string; + x1?: number | string; + x2?: number | string; + x?: number | string; + xChannelSelector?: string; + xHeight?: number | string; + xlinkActuate?: string; + xlinkArcrole?: string; + xlinkHref?: string; + xlinkRole?: string; + xlinkShow?: string; + xlinkTitle?: string; + xlinkType?: string; + xmlBase?: string; + xmlLang?: string; + xmlns?: string; + xmlnsXlink?: string; + xmlSpace?: string; + y1?: number | string; + y2?: number | string; + y?: number | string; + yChannelSelector?: string; + z?: number | string; + zoomAndPan?: string; + } + + interface WebViewHTMLAttributes<T> extends HTMLAttributes<T> { + allowFullScreen?: boolean; + allowpopups?: boolean; + autoFocus?: boolean; + autosize?: boolean; + blinkfeatures?: string; + disableblinkfeatures?: string; + disableguestresize?: boolean; + disablewebsecurity?: boolean; + guestinstance?: string; + httpreferrer?: string; + nodeintegration?: boolean; + partition?: string; + plugins?: boolean; + preload?: string; + src?: string; + useragent?: string; + webpreferences?: string; + } + + // + // React.DOM + // ---------------------------------------------------------------------- + + interface ReactHTML { + a: DetailedHTMLFactory< + AnchorHTMLAttributes<HTMLAnchorElement>, + HTMLAnchorElement + >; + abbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + address: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + area: DetailedHTMLFactory< + AreaHTMLAttributes<HTMLAreaElement>, + HTMLAreaElement + >; + article: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + aside: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + audio: DetailedHTMLFactory< + AudioHTMLAttributes<HTMLAudioElement>, + HTMLAudioElement + >; + b: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + base: DetailedHTMLFactory< + BaseHTMLAttributes<HTMLBaseElement>, + HTMLBaseElement + >; + bdi: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + bdo: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + big: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + blockquote: DetailedHTMLFactory< + BlockquoteHTMLAttributes<HTMLElement>, + HTMLElement + >; + body: DetailedHTMLFactory<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>; + br: DetailedHTMLFactory<HTMLAttributes<HTMLBRElement>, HTMLBRElement>; + button: DetailedHTMLFactory< + ButtonHTMLAttributes<HTMLButtonElement>, + HTMLButtonElement + >; + canvas: DetailedHTMLFactory< + CanvasHTMLAttributes<HTMLCanvasElement>, + HTMLCanvasElement + >; + caption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + cite: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + code: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + col: DetailedHTMLFactory< + ColHTMLAttributes<HTMLTableColElement>, + HTMLTableColElement + >; + colgroup: DetailedHTMLFactory< + ColgroupHTMLAttributes<HTMLTableColElement>, + HTMLTableColElement + >; + data: DetailedHTMLFactory< + DataHTMLAttributes<HTMLDataElement>, + HTMLDataElement + >; + datalist: DetailedHTMLFactory< + HTMLAttributes<HTMLDataListElement>, + HTMLDataListElement + >; + dd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + del: DetailedHTMLFactory<DelHTMLAttributes<HTMLElement>, HTMLElement>; + details: DetailedHTMLFactory< + DetailsHTMLAttributes<HTMLElement>, + HTMLElement + >; + dfn: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + dialog: DetailedHTMLFactory< + DialogHTMLAttributes<HTMLDialogElement>, + HTMLDialogElement + >; + div: DetailedHTMLFactory<HTMLAttributes<HTMLDivElement>, HTMLDivElement>; + dl: DetailedHTMLFactory<HTMLAttributes<HTMLDListElement>, HTMLDListElement>; + dt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + em: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + embed: DetailedHTMLFactory< + EmbedHTMLAttributes<HTMLEmbedElement>, + HTMLEmbedElement + >; + fieldset: DetailedHTMLFactory< + FieldsetHTMLAttributes<HTMLFieldSetElement>, + HTMLFieldSetElement + >; + figcaption: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + figure: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + footer: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + form: DetailedHTMLFactory< + FormHTMLAttributes<HTMLFormElement>, + HTMLFormElement + >; + h1: DetailedHTMLFactory< + HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h2: DetailedHTMLFactory< + HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h3: DetailedHTMLFactory< + HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h4: DetailedHTMLFactory< + HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h5: DetailedHTMLFactory< + HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h6: DetailedHTMLFactory< + HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + head: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLHeadElement>; + header: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + hgroup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + hr: DetailedHTMLFactory<HTMLAttributes<HTMLHRElement>, HTMLHRElement>; + html: DetailedHTMLFactory< + HtmlHTMLAttributes<HTMLHtmlElement>, + HTMLHtmlElement + >; + i: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + iframe: DetailedHTMLFactory< + IframeHTMLAttributes<HTMLIFrameElement>, + HTMLIFrameElement + >; + img: DetailedHTMLFactory< + ImgHTMLAttributes<HTMLImageElement>, + HTMLImageElement + >; + input: DetailedHTMLFactory< + InputHTMLAttributes<HTMLInputElement>, + HTMLInputElement + >; + ins: DetailedHTMLFactory<InsHTMLAttributes<HTMLModElement>, HTMLModElement>; + kbd: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + keygen: DetailedHTMLFactory<KeygenHTMLAttributes<HTMLElement>, HTMLElement>; + label: DetailedHTMLFactory< + LabelHTMLAttributes<HTMLLabelElement>, + HTMLLabelElement + >; + legend: DetailedHTMLFactory< + HTMLAttributes<HTMLLegendElement>, + HTMLLegendElement + >; + li: DetailedHTMLFactory<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>; + link: DetailedHTMLFactory< + LinkHTMLAttributes<HTMLLinkElement>, + HTMLLinkElement + >; + main: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + map: DetailedHTMLFactory<MapHTMLAttributes<HTMLMapElement>, HTMLMapElement>; + mark: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + menu: DetailedHTMLFactory<MenuHTMLAttributes<HTMLElement>, HTMLElement>; + menuitem: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + meta: DetailedHTMLFactory< + MetaHTMLAttributes<HTMLMetaElement>, + HTMLMetaElement + >; + meter: DetailedHTMLFactory<MeterHTMLAttributes<HTMLElement>, HTMLElement>; + nav: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + noscript: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + object: DetailedHTMLFactory< + ObjectHTMLAttributes<HTMLObjectElement>, + HTMLObjectElement + >; + ol: DetailedHTMLFactory< + OlHTMLAttributes<HTMLOListElement>, + HTMLOListElement + >; + optgroup: DetailedHTMLFactory< + OptgroupHTMLAttributes<HTMLOptGroupElement>, + HTMLOptGroupElement + >; + option: DetailedHTMLFactory< + OptionHTMLAttributes<HTMLOptionElement>, + HTMLOptionElement + >; + output: DetailedHTMLFactory<OutputHTMLAttributes<HTMLElement>, HTMLElement>; + p: DetailedHTMLFactory< + HTMLAttributes<HTMLParagraphElement>, + HTMLParagraphElement + >; + param: DetailedHTMLFactory< + ParamHTMLAttributes<HTMLParamElement>, + HTMLParamElement + >; + picture: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + pre: DetailedHTMLFactory<HTMLAttributes<HTMLPreElement>, HTMLPreElement>; + progress: DetailedHTMLFactory< + ProgressHTMLAttributes<HTMLProgressElement>, + HTMLProgressElement + >; + q: DetailedHTMLFactory< + QuoteHTMLAttributes<HTMLQuoteElement>, + HTMLQuoteElement + >; + rp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + rt: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + ruby: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + s: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + samp: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + script: DetailedHTMLFactory< + ScriptHTMLAttributes<HTMLScriptElement>, + HTMLScriptElement + >; + section: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + select: DetailedHTMLFactory< + SelectHTMLAttributes<HTMLSelectElement>, + HTMLSelectElement + >; + small: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + source: DetailedHTMLFactory< + SourceHTMLAttributes<HTMLSourceElement>, + HTMLSourceElement + >; + span: DetailedHTMLFactory<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>; + strong: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + style: DetailedHTMLFactory< + StyleHTMLAttributes<HTMLStyleElement>, + HTMLStyleElement + >; + sub: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + summary: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + sup: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + table: DetailedHTMLFactory< + TableHTMLAttributes<HTMLTableElement>, + HTMLTableElement + >; + template: DetailedHTMLFactory< + HTMLAttributes<HTMLTemplateElement>, + HTMLTemplateElement + >; + tbody: DetailedHTMLFactory< + HTMLAttributes<HTMLTableSectionElement>, + HTMLTableSectionElement + >; + td: DetailedHTMLFactory< + TdHTMLAttributes<HTMLTableDataCellElement>, + HTMLTableDataCellElement + >; + textarea: DetailedHTMLFactory< + TextareaHTMLAttributes<HTMLTextAreaElement>, + HTMLTextAreaElement + >; + tfoot: DetailedHTMLFactory< + HTMLAttributes<HTMLTableSectionElement>, + HTMLTableSectionElement + >; + th: DetailedHTMLFactory< + ThHTMLAttributes<HTMLTableHeaderCellElement>, + HTMLTableHeaderCellElement + >; + thead: DetailedHTMLFactory< + HTMLAttributes<HTMLTableSectionElement>, + HTMLTableSectionElement + >; + time: DetailedHTMLFactory<TimeHTMLAttributes<HTMLElement>, HTMLElement>; + title: DetailedHTMLFactory< + HTMLAttributes<HTMLTitleElement>, + HTMLTitleElement + >; + tr: DetailedHTMLFactory< + HTMLAttributes<HTMLTableRowElement>, + HTMLTableRowElement + >; + track: DetailedHTMLFactory< + TrackHTMLAttributes<HTMLTrackElement>, + HTMLTrackElement + >; + u: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + ul: DetailedHTMLFactory<HTMLAttributes<HTMLUListElement>, HTMLUListElement>; + var: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + video: DetailedHTMLFactory< + VideoHTMLAttributes<HTMLVideoElement>, + HTMLVideoElement + >; + wbr: DetailedHTMLFactory<HTMLAttributes<HTMLElement>, HTMLElement>; + webview: DetailedHTMLFactory< + WebViewHTMLAttributes<HTMLWebViewElement>, + HTMLWebViewElement + >; + } + + interface ReactSVG { + animate: SVGFactory; + circle: SVGFactory; + clipPath: SVGFactory; + defs: SVGFactory; + desc: SVGFactory; + ellipse: SVGFactory; + feBlend: SVGFactory; + feColorMatrix: SVGFactory; + feComponentTransfer: SVGFactory; + feComposite: SVGFactory; + feConvolveMatrix: SVGFactory; + feDiffuseLighting: SVGFactory; + feDisplacementMap: SVGFactory; + feDistantLight: SVGFactory; + feDropShadow: SVGFactory; + feFlood: SVGFactory; + feFuncA: SVGFactory; + feFuncB: SVGFactory; + feFuncG: SVGFactory; + feFuncR: SVGFactory; + feGaussianBlur: SVGFactory; + feImage: SVGFactory; + feMerge: SVGFactory; + feMergeNode: SVGFactory; + feMorphology: SVGFactory; + feOffset: SVGFactory; + fePointLight: SVGFactory; + feSpecularLighting: SVGFactory; + feSpotLight: SVGFactory; + feTile: SVGFactory; + feTurbulence: SVGFactory; + filter: SVGFactory; + foreignObject: SVGFactory; + g: SVGFactory; + image: SVGFactory; + line: SVGFactory; + linearGradient: SVGFactory; + marker: SVGFactory; + mask: SVGFactory; + metadata: SVGFactory; + path: SVGFactory; + pattern: SVGFactory; + polygon: SVGFactory; + polyline: SVGFactory; + radialGradient: SVGFactory; + rect: SVGFactory; + stop: SVGFactory; + svg: SVGFactory; + switch: SVGFactory; + symbol: SVGFactory; + text: SVGFactory; + textPath: SVGFactory; + tspan: SVGFactory; + use: SVGFactory; + view: SVGFactory; + } + + interface ReactDOM extends ReactHTML, ReactSVG {} + + // + // React.PropTypes + // ---------------------------------------------------------------------- + + type Validator<T> = PropTypes.Validator<T>; + + type Requireable<T> = PropTypes.Requireable<T>; + + type ValidationMap<T> = PropTypes.ValidationMap<T>; + + type WeakValidationMap<T> = { + [K in keyof T]?: null extends T[K] + ? Validator<T[K] | null | undefined> + : undefined extends T[K] + ? Validator<T[K] | null | undefined> + : Validator<T[K]>; + }; + + interface ReactPropTypes { + any: typeof PropTypes.any; + array: typeof PropTypes.array; + bool: typeof PropTypes.bool; + func: typeof PropTypes.func; + number: typeof PropTypes.number; + object: typeof PropTypes.object; + string: typeof PropTypes.string; + node: typeof PropTypes.node; + element: typeof PropTypes.element; + instanceOf: typeof PropTypes.instanceOf; + oneOf: typeof PropTypes.oneOf; + oneOfType: typeof PropTypes.oneOfType; + arrayOf: typeof PropTypes.arrayOf; + objectOf: typeof PropTypes.objectOf; + shape: typeof PropTypes.shape; + exact: typeof PropTypes.exact; + } + + // + // React.Children + // ---------------------------------------------------------------------- + + interface ReactChildren { + map<T, C>( + children: C | C[], + fn: (child: C, index: number) => T + ): C extends null | undefined + ? C + : Array<Exclude<T, boolean | null | undefined>>; + forEach<C>(children: C | C[], fn: (child: C, index: number) => void): void; + count(children: any): number; + only<C>(children: C): C extends any[] ? never : C; + toArray( + children: ReactNode | ReactNode[] + ): Array<Exclude<ReactNode, boolean | null | undefined>>; + } + + // + // Browser Interfaces + // https://github.com/nikeee/2048-typescript/blob/master/2048/js/touch.d.ts + // ---------------------------------------------------------------------- + + interface AbstractView { + styleMedia: StyleMedia; + document: Document; + } + + interface Touch { + identifier: number; + target: EventTarget; + screenX: number; + screenY: number; + clientX: number; + clientY: number; + pageX: number; + pageY: number; + } + + interface TouchList { + [index: number]: Touch; + length: number; + item(index: number): Touch; + identifiedTouch(identifier: number): Touch; + } + + // + // Error Interfaces + // ---------------------------------------------------------------------- + interface ErrorInfo { + /** + * Captures which component contained the exception, and its ancestors. + */ + componentStack: string; + } +} + +// naked 'any' type in a conditional type will short circuit and union both the then/else branches +// so boolean is only resolved for T = any +type IsExactlyAny<T> = boolean extends (T extends never +? true +: false) + ? true + : false; + +type ExactlyAnyPropertyKeys<T> = { + [K in keyof T]: IsExactlyAny<T[K]> extends true ? K : never; +}[keyof T]; +type NotExactlyAnyPropertyKeys<T> = Exclude<keyof T, ExactlyAnyPropertyKeys<T>>; + +// Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any +type MergePropTypes<P, T> = + // Distribute over P in case it is a union type + P extends any // If props is type any, use propTypes definitions + ? IsExactlyAny<P> extends true + ? T // If declared props have indexed properties, ignore inferred props entirely as keyof gets widened + : string extends keyof P + ? P // Prefer declared types which are not exactly any + : Pick<P, NotExactlyAnyPropertyKeys<P>> & + // For props which are exactly any, use the type inferred from propTypes if present + Pick<T, Exclude<keyof T, NotExactlyAnyPropertyKeys<P>>> & + // Keep leftover props not specified in propTypes + Pick<P, Exclude<keyof P, keyof T>> + : never; + +// Any prop that has a default prop becomes optional, but its type is unchanged +// Undeclared default props are augmented into the resulting allowable attributes +// If declared props have indexed properties, ignore default props entirely as keyof gets widened +// Wrap in an outer-level conditional type to allow distribution over props that are unions +type Defaultize<P, D> = P extends any + ? string extends keyof P + ? P + : Pick<P, Exclude<keyof P, keyof D>> & + Partial<Pick<P, Extract<keyof P, keyof D>>> & + Partial<Pick<D, Exclude<keyof D, keyof P>>> + : never; + +type ReactManagedAttributes<C, P> = C extends { + propTypes: infer T; + defaultProps: infer D; +} + ? Defaultize<MergePropTypes<P, PropTypes.InferProps<T>>, D> + : C extends { propTypes: infer T } + ? MergePropTypes<P, PropTypes.InferProps<T>> + : C extends { defaultProps: infer D } + ? Defaultize<P, D> + : P; + +declare global { + namespace JSX { + // tslint:disable-next-line:no-empty-interface + interface Element extends React.ReactElement<any, any> {} + interface ElementClass extends React.Component<any> { + render(): React.ReactNode; + } + interface ElementAttributesProperty { + props: {}; + } + interface ElementChildrenAttribute { + children: {}; + } + + // We can't recurse forever because `type` can't be self-referential; + // let's assume it's reasonable to do a single React.lazy() around a single React.memo() / vice-versa + type LibraryManagedAttributes<C, P> = C extends + | React.MemoExoticComponent<infer T> + | React.LazyExoticComponent<infer T> + ? T extends + | React.MemoExoticComponent<infer U> + | React.LazyExoticComponent<infer U> + ? ReactManagedAttributes<U, P> + : ReactManagedAttributes<T, P> + : ReactManagedAttributes<C, P>; + + // tslint:disable-next-line:no-empty-interface + interface IntrinsicAttributes extends React.Attributes {} + // tslint:disable-next-line:no-empty-interface + interface IntrinsicClassAttributes<T> extends React.ClassAttributes<T> {} + + interface IntrinsicElements { + // HTML + a: React.DetailedHTMLProps< + React.AnchorHTMLAttributes<HTMLAnchorElement>, + HTMLAnchorElement + >; + abbr: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + address: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + area: React.DetailedHTMLProps< + React.AreaHTMLAttributes<HTMLAreaElement>, + HTMLAreaElement + >; + article: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + aside: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + audio: React.DetailedHTMLProps< + React.AudioHTMLAttributes<HTMLAudioElement>, + HTMLAudioElement + >; + b: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + base: React.DetailedHTMLProps< + React.BaseHTMLAttributes<HTMLBaseElement>, + HTMLBaseElement + >; + bdi: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + bdo: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + big: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + blockquote: React.DetailedHTMLProps< + React.BlockquoteHTMLAttributes<HTMLElement>, + HTMLElement + >; + body: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLBodyElement>, + HTMLBodyElement + >; + br: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLBRElement>, + HTMLBRElement + >; + button: React.DetailedHTMLProps< + React.ButtonHTMLAttributes<HTMLButtonElement>, + HTMLButtonElement + >; + canvas: React.DetailedHTMLProps< + React.CanvasHTMLAttributes<HTMLCanvasElement>, + HTMLCanvasElement + >; + caption: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + cite: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + code: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + col: React.DetailedHTMLProps< + React.ColHTMLAttributes<HTMLTableColElement>, + HTMLTableColElement + >; + colgroup: React.DetailedHTMLProps< + React.ColgroupHTMLAttributes<HTMLTableColElement>, + HTMLTableColElement + >; + data: React.DetailedHTMLProps< + React.DataHTMLAttributes<HTMLDataElement>, + HTMLDataElement + >; + datalist: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLDataListElement>, + HTMLDataListElement + >; + dd: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + del: React.DetailedHTMLProps< + React.DelHTMLAttributes<HTMLElement>, + HTMLElement + >; + details: React.DetailedHTMLProps< + React.DetailsHTMLAttributes<HTMLElement>, + HTMLElement + >; + dfn: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + dialog: React.DetailedHTMLProps< + React.DialogHTMLAttributes<HTMLDialogElement>, + HTMLDialogElement + >; + div: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLDivElement>, + HTMLDivElement + >; + dl: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLDListElement>, + HTMLDListElement + >; + dt: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + em: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + embed: React.DetailedHTMLProps< + React.EmbedHTMLAttributes<HTMLEmbedElement>, + HTMLEmbedElement + >; + fieldset: React.DetailedHTMLProps< + React.FieldsetHTMLAttributes<HTMLFieldSetElement>, + HTMLFieldSetElement + >; + figcaption: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + figure: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + footer: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + form: React.DetailedHTMLProps< + React.FormHTMLAttributes<HTMLFormElement>, + HTMLFormElement + >; + h1: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h2: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h3: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h4: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h5: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + h6: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadingElement>, + HTMLHeadingElement + >; + head: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHeadElement>, + HTMLHeadElement + >; + header: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + hgroup: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + hr: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLHRElement>, + HTMLHRElement + >; + html: React.DetailedHTMLProps< + React.HtmlHTMLAttributes<HTMLHtmlElement>, + HTMLHtmlElement + >; + i: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + iframe: React.DetailedHTMLProps< + React.IframeHTMLAttributes<HTMLIFrameElement>, + HTMLIFrameElement + >; + img: React.DetailedHTMLProps< + React.ImgHTMLAttributes<HTMLImageElement>, + HTMLImageElement + >; + input: React.DetailedHTMLProps< + React.InputHTMLAttributes<HTMLInputElement>, + HTMLInputElement + >; + ins: React.DetailedHTMLProps< + React.InsHTMLAttributes<HTMLModElement>, + HTMLModElement + >; + kbd: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + keygen: React.DetailedHTMLProps< + React.KeygenHTMLAttributes<HTMLElement>, + HTMLElement + >; + label: React.DetailedHTMLProps< + React.LabelHTMLAttributes<HTMLLabelElement>, + HTMLLabelElement + >; + legend: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLLegendElement>, + HTMLLegendElement + >; + li: React.DetailedHTMLProps< + React.LiHTMLAttributes<HTMLLIElement>, + HTMLLIElement + >; + link: React.DetailedHTMLProps< + React.LinkHTMLAttributes<HTMLLinkElement>, + HTMLLinkElement + >; + main: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + map: React.DetailedHTMLProps< + React.MapHTMLAttributes<HTMLMapElement>, + HTMLMapElement + >; + mark: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + menu: React.DetailedHTMLProps< + React.MenuHTMLAttributes<HTMLElement>, + HTMLElement + >; + menuitem: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + meta: React.DetailedHTMLProps< + React.MetaHTMLAttributes<HTMLMetaElement>, + HTMLMetaElement + >; + meter: React.DetailedHTMLProps< + React.MeterHTMLAttributes<HTMLElement>, + HTMLElement + >; + nav: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + noindex: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + noscript: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + object: React.DetailedHTMLProps< + React.ObjectHTMLAttributes<HTMLObjectElement>, + HTMLObjectElement + >; + ol: React.DetailedHTMLProps< + React.OlHTMLAttributes<HTMLOListElement>, + HTMLOListElement + >; + optgroup: React.DetailedHTMLProps< + React.OptgroupHTMLAttributes<HTMLOptGroupElement>, + HTMLOptGroupElement + >; + option: React.DetailedHTMLProps< + React.OptionHTMLAttributes<HTMLOptionElement>, + HTMLOptionElement + >; + output: React.DetailedHTMLProps< + React.OutputHTMLAttributes<HTMLElement>, + HTMLElement + >; + p: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLParagraphElement>, + HTMLParagraphElement + >; + param: React.DetailedHTMLProps< + React.ParamHTMLAttributes<HTMLParamElement>, + HTMLParamElement + >; + picture: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + pre: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLPreElement>, + HTMLPreElement + >; + progress: React.DetailedHTMLProps< + React.ProgressHTMLAttributes<HTMLProgressElement>, + HTMLProgressElement + >; + q: React.DetailedHTMLProps< + React.QuoteHTMLAttributes<HTMLQuoteElement>, + HTMLQuoteElement + >; + rp: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + rt: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + ruby: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + s: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + samp: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + script: React.DetailedHTMLProps< + React.ScriptHTMLAttributes<HTMLScriptElement>, + HTMLScriptElement + >; + section: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + select: React.DetailedHTMLProps< + React.SelectHTMLAttributes<HTMLSelectElement>, + HTMLSelectElement + >; + small: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + source: React.DetailedHTMLProps< + React.SourceHTMLAttributes<HTMLSourceElement>, + HTMLSourceElement + >; + span: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLSpanElement>, + HTMLSpanElement + >; + strong: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + style: React.DetailedHTMLProps< + React.StyleHTMLAttributes<HTMLStyleElement>, + HTMLStyleElement + >; + sub: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + summary: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + sup: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + table: React.DetailedHTMLProps< + React.TableHTMLAttributes<HTMLTableElement>, + HTMLTableElement + >; + template: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLTemplateElement>, + HTMLTemplateElement + >; + tbody: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLTableSectionElement>, + HTMLTableSectionElement + >; + td: React.DetailedHTMLProps< + React.TdHTMLAttributes<HTMLTableDataCellElement>, + HTMLTableDataCellElement + >; + textarea: React.DetailedHTMLProps< + React.TextareaHTMLAttributes<HTMLTextAreaElement>, + HTMLTextAreaElement + >; + tfoot: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLTableSectionElement>, + HTMLTableSectionElement + >; + th: React.DetailedHTMLProps< + React.ThHTMLAttributes<HTMLTableHeaderCellElement>, + HTMLTableHeaderCellElement + >; + thead: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLTableSectionElement>, + HTMLTableSectionElement + >; + time: React.DetailedHTMLProps< + React.TimeHTMLAttributes<HTMLElement>, + HTMLElement + >; + title: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLTitleElement>, + HTMLTitleElement + >; + tr: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLTableRowElement>, + HTMLTableRowElement + >; + track: React.DetailedHTMLProps< + React.TrackHTMLAttributes<HTMLTrackElement>, + HTMLTrackElement + >; + u: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + ul: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLUListElement>, + HTMLUListElement + >; + var: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + video: React.DetailedHTMLProps< + React.VideoHTMLAttributes<HTMLVideoElement>, + HTMLVideoElement + >; + wbr: React.DetailedHTMLProps< + React.HTMLAttributes<HTMLElement>, + HTMLElement + >; + webview: React.DetailedHTMLProps< + React.WebViewHTMLAttributes<HTMLWebViewElement>, + HTMLWebViewElement + >; + + // SVG + svg: React.SVGProps<SVGSVGElement>; + + animate: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now. + animateMotion: React.SVGProps<SVGElement>; + animateTransform: React.SVGProps<SVGElement>; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now. + circle: React.SVGProps<SVGCircleElement>; + clipPath: React.SVGProps<SVGClipPathElement>; + defs: React.SVGProps<SVGDefsElement>; + desc: React.SVGProps<SVGDescElement>; + ellipse: React.SVGProps<SVGEllipseElement>; + feBlend: React.SVGProps<SVGFEBlendElement>; + feColorMatrix: React.SVGProps<SVGFEColorMatrixElement>; + feComponentTransfer: React.SVGProps<SVGFEComponentTransferElement>; + feComposite: React.SVGProps<SVGFECompositeElement>; + feConvolveMatrix: React.SVGProps<SVGFEConvolveMatrixElement>; + feDiffuseLighting: React.SVGProps<SVGFEDiffuseLightingElement>; + feDisplacementMap: React.SVGProps<SVGFEDisplacementMapElement>; + feDistantLight: React.SVGProps<SVGFEDistantLightElement>; + feDropShadow: React.SVGProps<SVGFEDropShadowElement>; + feFlood: React.SVGProps<SVGFEFloodElement>; + feFuncA: React.SVGProps<SVGFEFuncAElement>; + feFuncB: React.SVGProps<SVGFEFuncBElement>; + feFuncG: React.SVGProps<SVGFEFuncGElement>; + feFuncR: React.SVGProps<SVGFEFuncRElement>; + feGaussianBlur: React.SVGProps<SVGFEGaussianBlurElement>; + feImage: React.SVGProps<SVGFEImageElement>; + feMerge: React.SVGProps<SVGFEMergeElement>; + feMergeNode: React.SVGProps<SVGFEMergeNodeElement>; + feMorphology: React.SVGProps<SVGFEMorphologyElement>; + feOffset: React.SVGProps<SVGFEOffsetElement>; + fePointLight: React.SVGProps<SVGFEPointLightElement>; + feSpecularLighting: React.SVGProps<SVGFESpecularLightingElement>; + feSpotLight: React.SVGProps<SVGFESpotLightElement>; + feTile: React.SVGProps<SVGFETileElement>; + feTurbulence: React.SVGProps<SVGFETurbulenceElement>; + filter: React.SVGProps<SVGFilterElement>; + foreignObject: React.SVGProps<SVGForeignObjectElement>; + g: React.SVGProps<SVGGElement>; + image: React.SVGProps<SVGImageElement>; + line: React.SVGProps<SVGLineElement>; + linearGradient: React.SVGProps<SVGLinearGradientElement>; + marker: React.SVGProps<SVGMarkerElement>; + mask: React.SVGProps<SVGMaskElement>; + metadata: React.SVGProps<SVGMetadataElement>; + mpath: React.SVGProps<SVGElement>; + path: React.SVGProps<SVGPathElement>; + pattern: React.SVGProps<SVGPatternElement>; + polygon: React.SVGProps<SVGPolygonElement>; + polyline: React.SVGProps<SVGPolylineElement>; + radialGradient: React.SVGProps<SVGRadialGradientElement>; + rect: React.SVGProps<SVGRectElement>; + stop: React.SVGProps<SVGStopElement>; + switch: React.SVGProps<SVGSwitchElement>; + symbol: React.SVGProps<SVGSymbolElement>; + text: React.SVGProps<SVGTextElement>; + textPath: React.SVGProps<SVGTextPathElement>; + tspan: React.SVGProps<SVGTSpanElement>; + use: React.SVGProps<SVGUseElement>; + view: React.SVGProps<SVGViewElement>; + } + } +} |