@types/react

// Type definitions for React 16.4 // 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> // Albert Kurniawan <https://github.com/morcerf> // Tanguy Krotoff <https://github.com/tkrotoff> // Dovydas Navickas <https://github.com/DovydasNavickas> // Stéphane Goetz <https://github.com/onigoetz> // 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> // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 /// <reference path="global.d.ts" /> import * as CSS from 'csstype'; import * as PropTypes from 'prop-types'; 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; // tslint:disable-next-line:export-just-namespace export = React; export as namespace React; declare namespace React { // // React Elements // ---------------------------------------------------------------------- type ReactType = string | ComponentType; type ComponentType = ComponentClass | StatelessComponent; type Key = string | number; interface RefObject<T> { readonly current: T | null; } type Ref<T> = string | { bivarianceHack(instance: T | null): any }["bivarianceHack"] | RefObject<T>; type ComponentState = any; interface Attributes { key?: Key; } interface ClassAttributes<T> extends Attributes { ref?: Ref<T>; } interface ReactElement { type: string | ComponentClass | SFC; props: P; key: Key | null; } interface SFCElement extends ReactElement { type: SFC; } type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>; interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement { type: ComponentClass; ref?: Ref<T>; } type ClassicElement = CElement<P, ClassicComponent<P, ComponentState>>; // string fallback for custom web-components interface DOMElement | SVGAttributes<T>, T extends Element> extends ReactElement { type: string; ref: Ref<T>; } // ReactHTML for ReactHTMLElement // tslint:disable-next-line:no-empty-interface interface ReactHTMLElement<T extends HTMLElement> extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> { } interface DetailedReactHTMLElement, 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<any> { key: Key | null; children: ReactNode; } // // Factories // ---------------------------------------------------------------------- type Factory = (props?: Attributes & P, ...children: ReactNode[]) => ReactElement; type SFCFactory = (props?: Attributes & P, ...children: ReactNode[]) => SFCElement; 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 = CFactory<P, ClassicComponent<P, ComponentState>>; type DOMFactory, 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, 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<any> | ReactText; interface ReactNodeArray extends Array<ReactNode> {} type ReactFragment = {} | ReactNodeArray; type ReactNode = ReactChild | ReactFragment | ReactPortal | string | number | 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, T extends Element>( type: string): DOMFactory<P, T>; // Custom components function createFactory(type: SFC): SFCFactory; function createFactory( type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass>): CFactory<P, ClassicComponent<P, ComponentState>>; function createFactory<P, T extends Component<P, ComponentState>, C extends ComponentClass>( type: ClassType<P, T, C>): CFactory<P, T>; function createFactory(type: ComponentClass): Factory; // 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, T extends HTMLElement>( type: keyof ReactHTML, props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): DetailedReactHTMLElement<P, T>; function createElement, T extends SVGElement>( type: keyof ReactSVG, props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): ReactSVGElement; function createElement, T extends Element>( type: string, props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): DOMElement<P, T>; // Custom components function createElement( type: SFC, props?: Attributes & P | null, ...children: ReactNode[]): SFCElement; function createElement( type: ClassType<P, ClassicComponent<P, ComponentState>, ClassicComponentClass>, props?: ClassAttributes<ClassicComponent<P, ComponentState>> & P | null, ...children: ReactNode[]): CElement<P, ClassicComponent<P, ComponentState>>; function createElement<P, T extends Component<P, ComponentState>, C extends ComponentClass>( type: ClassType<P, T, C>, props?: ClassAttributes<T> & P | null, ...children: ReactNode[]): CElement<P, T>; function createElement( type: SFC | ComponentClass | string, props?: Attributes & P | null, ...children: ReactNode[]): ReactElement; // DOM Elements // ReactHTMLElement function cloneElement, T extends HTMLElement>( element: DetailedReactHTMLElement<P, T>, props?: P, ...children: ReactNode[]): DetailedReactHTMLElement<P, T>; // ReactHTMLElement, less specific function cloneElement, T extends HTMLElement>( element: ReactHTMLElement<T>, props?: P, ...children: ReactNode[]): ReactHTMLElement<T>; // SVGElement function cloneElement, 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, T extends Element>( element: DOMElement<P, T>, props?: DOMAttributes<T> & P, ...children: ReactNode[]): DOMElement<P, T>; // Custom components function cloneElement( element: SFCElement, props?: Partial & Attributes, ...children: ReactNode[]): SFCElement; function cloneElement<P, T extends Component<P, ComponentState>>( element: CElement<P, T>, props?: Partial & ClassAttributes<T>, ...children: ReactNode[]): CElement<P, T>; function cloneElement( element: ReactElement, props?: Partial & Attributes, ...children: ReactNode[]): ReactElement; // Context via RenderProps interface ProviderProps<T> { value: T; children?: ReactNode; } interface ConsumerProps<T> { children: (value: T) => ReactNode; unstable_observedBits?: number; } type Provider<T> = ComponentType<ProviderProps<T>>; type Consumer<T> = ComponentType<ConsumerProps<T>>; interface Context<T> { Provider: Provider<T>; Consumer: Consumer<T>; } function createContext<T>( defaultValue: T, calculateChangedBits?: (prev: T, next: T) => number ): Context<T>; function isValidElement(object: {} | null | undefined): object is ReactElement; const Children: ReactChildren; const Fragment: ComponentType; const StrictMode: ComponentType; const version: string; // // Component API // ---------------------------------------------------------------------- type ReactInstance = Component<any> | Element; // Base component for plain JS classes // tslint:disable-next-line:no-empty-interface interface Component extends ComponentLifecycle<P, S, SS> { } class Component<P, S> { constructor(props: Readonly); /** * @deprecated * 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) => (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<{ children?: ReactNode }> & Readonly; state: Readonly<S>; /** * @deprecated * https://reactjs.org/docs/legacy-context.html */ context: any; /** * @deprecated * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs */ refs: { [key: string]: ReactInstance }; } class PureComponent extends Component<P, S, SS> { } interface ClassicComponent extends Component<P, S> { replaceState(nextState: S, callback?: () => void): void; isMounted(): boolean; getInitialState?(): S; } interface ChildContextProvider<CC> { getChildContext(): CC; } // // Class Interfaces // ---------------------------------------------------------------------- type SFC = StatelessComponent; interface StatelessComponent { (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null; propTypes?: ValidationMap; contextTypes?: ValidationMap<any>; defaultProps?: Partial; displayName?: string; } interface RefForwardingComponent<T, P = {}> { (props: P & { children?: ReactNode }, ref?: Ref<T>): ReactElement<any> | null; propTypes?: ValidationMap; contextTypes?: ValidationMap<any>; defaultProps?: Partial; displayName?: string; } interface ComponentClass extends StaticLifecycle<P, S> { new (props: P, context?: any): Component<P, S>; propTypes?: ValidationMap; contextTypes?: ValidationMap<any>; childContextTypes?: ValidationMap<any>; defaultProps?: Partial; displayName?: string; } interface ClassicComponentClass extends ComponentClass { 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> = C & (new (props: P, context?: any) => T) & (new (props: P, context?: any) => { props: P }); // // 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, 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>; } 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, prevState: S) => 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, 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, 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, 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, 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, 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, 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>; function forwardRef<T, P = {}>(Component: RefForwardingComponent<T, P>): ComponentType>; // // Event System // ---------------------------------------------------------------------- interface SyntheticEvent<T = Element> { bubbles: boolean; /** * A reference to the element on which the event listener is registered. */ currentTarget: EventTarget & T; cancelable: boolean; defaultPrevented: boolean; eventPhase: number; isTrusted: boolean; nativeEvent: Event; preventDefault(): void; isDefaultPrevented(): boolean; stopPropagation(): void; isPropagationStopped(): boolean; persist(): void; // If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 /** * 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. * * @see currentTarget */ target: EventTarget; timeStamp: number; type: string; } interface ClipboardEvent<T = Element> extends SyntheticEvent<T> { clipboardData: DataTransfer; nativeEvent: NativeClipboardEvent; } interface CompositionEvent<T = Element> extends SyntheticEvent<T> { data: string; nativeEvent: NativeCompositionEvent; } interface DragEvent<T = Element> extends MouseEvent<T> { dataTransfer: DataTransfer; nativeEvent: NativeDragEvent; } interface PointerEvent<T = Element> extends MouseEvent<T> { pointerId: number; pressure: number; tiltX: number; tiltY: number; width: number; height: number; pointerType: 'mouse' | 'pen' | 'touch'; isPrimary: boolean; nativeEvent: NativePointerEvent; } interface FocusEvent<T = Element> extends SyntheticEvent<T> { nativeEvent: NativeFocusEvent; relatedTarget: EventTarget; 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> { 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; nativeEvent: NativeKeyboardEvent; repeat: boolean; shiftKey: boolean; which: number; } interface MouseEvent<T = Element> extends SyntheticEvent<T> { 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; nativeEvent: NativeMouseEvent; pageX: number; pageY: number; relatedTarget: EventTarget; screenX: number; screenY: number; shiftKey: boolean; } interface TouchEvent<T = Element> extends SyntheticEvent<T> { 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; nativeEvent: NativeTouchEvent; shiftKey: boolean; targetTouches: TouchList; touches: TouchList; } interface UIEvent<T = Element> extends SyntheticEvent<T> { detail: number; nativeEvent: NativeUIEvent; view: AbstractView; } interface WheelEvent<T = Element> extends MouseEvent<T> { deltaMode: number; deltaX: number; deltaY: number; deltaZ: number; nativeEvent: NativeWheelEvent; } interface AnimationEvent<T = Element> extends SyntheticEvent<T> { animationName: string; elapsedTime: number; nativeEvent: NativeAnimationEvent; pseudoElement: string; } interface TransitionEvent<T = Element> extends SyntheticEvent<T> { elapsedTime: number; nativeEvent: NativeTransitionEvent; 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?: Ref<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>; 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 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 */ } interface HTMLAttributes<T> extends DOMAttributes<T> { // React-specific Attributes defaultChecked?: boolean; defaultValue?: string | string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; // Standard HTML Attributes accessKey?: string; className?: string; contentEditable?: boolean; contextMenu?: string; dir?: string; draggable?: boolean; hidden?: boolean; id?: string; lang?: string; placeholder?: string; slot?: string; spellCheck?: boolean; style?: CSSProperties; tabIndex?: number; title?: string; // Unknown inputMode?: string; is?: string; 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'; } // All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/ interface HTMLAttributes<T> extends DOMAttributes<T> { /** 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';