// NOTE: Users of the `experimental` builds of React should add a reference // to 'react/experimental' in their project. See experimental.d.ts's top comment // for reference and documentation on how exactly to do it. /// 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; /** * Used to represent DOM API's where users can either pass * true or false as a boolean or as its equivalent strings. */ type Booleanish = boolean | "true" | "false"; /** * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN} */ type CrossOrigin = "anonymous" | "use-credentials" | "" | undefined; declare const UNDEFINED_VOID_ONLY: unique symbol; /** * The function returned from an effect passed to {@link React.useEffect useEffect}, * which can be used to clean up the effect when the component unmounts. * * @see {@link https://react.dev/reference/react/useEffect React Docs} */ type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never }; type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never }; // eslint-disable-next-line @definitelytyped/export-just-namespace export = React; export as namespace React; declare namespace React { // // React Elements // ---------------------------------------------------------------------- /** * Used to retrieve the possible components which accept a given set of props. * * Can be passed no type parameters to get a union of all possible components * and tags. * * Is a superset of {@link ComponentType}. * * @template P The props to match against. If not passed, defaults to any. * @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags. * * @example * * ```tsx * // All components and tags (img, embed etc.) * // which accept `src` * type SrcComponents = ElementType<{ src: any }>; * ``` * * @example * * ```tsx * // All components * type AllComponents = ElementType; * ``` * * @example * * ```tsx * // All custom components which match `src`, and tags which * // match `src`, narrowed down to just `audio` and `embed` * type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>; * ``` */ type ElementType

= | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag] | ComponentType

; /** * Represents any user-defined component, either as a function or a class. * * Similar to {@link JSXElementConstructor}, but with extra properties like * {@link FunctionComponent.defaultProps defaultProps } and * {@link ComponentClass.contextTypes contextTypes}. * * @template P The props the component accepts. * * @see {@link ComponentClass} * @see {@link FunctionComponent} */ type ComponentType

= ComponentClass

| FunctionComponent

; /** * Represents any user-defined component, either as a function or a class. * * Similar to {@link ComponentType}, but without extra properties like * {@link FunctionComponent.defaultProps defaultProps } and * {@link ComponentClass.contextTypes contextTypes}. * * @template P The props the component accepts. */ type JSXElementConstructor

= | (( props: P, /** * @deprecated * * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-stateless-function-components React Docs} */ deprecatedLegacyContext?: any, ) => ReactNode) | (new( props: P, /** * @deprecated * * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods React Docs} */ deprecatedLegacyContext?: any, ) => Component); /** * A readonly ref container where {@link current} cannot be mutated. * * Created by {@link createRef}, or {@link useRef} when passed `null`. * * @template T The type of the ref's value. * * @example * * ```tsx * const ref = createRef(); * * ref.current = document.createElement('div'); // Error * ``` */ interface RefObject { /** * The current value of the ref. */ readonly current: T | null; } interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES { } /** * A callback fired whenever the ref's value changes. * * @template T The type of the ref's value. * * @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs} * * @example * * ```tsx *

console.log(node)} /> * ``` */ type RefCallback = { bivarianceHack( instance: T | null, ): | void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES ]; }["bivarianceHack"]; /** * A union type of all possible shapes for React refs. * * @see {@link RefCallback} * @see {@link RefObject} */ type Ref = RefCallback | RefObject | null; /** * A legacy implementation of refs where you can pass a string to a ref prop. * * @see {@link https://react.dev/reference/react/Component#refs React Docs} * * @example * * ```tsx *

* ``` */ // TODO: Remove the string ref special case from `PropsWithRef` once we remove LegacyRef type LegacyRef = string | Ref; /** * Retrieves the type of the 'ref' prop for a given component type or tag name. * * @template C The component type. * * @example * * ```tsx * type MyComponentRef = React.ElementRef; * ``` * * @example * * ```tsx * type DivRef = React.ElementRef<'div'>; * ``` */ type ElementRef< C extends | ForwardRefExoticComponent | { new(props: any): Component } | ((props: any, context?: any) => ReactNode) | keyof JSX.IntrinsicElements, > = // need to check first if `ref` is a valid prop for ts@3.0 // otherwise it will infer `{}` instead of `never` "ref" extends keyof ComponentPropsWithRef ? NonNullable["ref"]> extends RefAttributes< infer Instance >["ref"] ? Instance : never : never; type ComponentState = any; /** * A value which uniquely identifies a node among items in an array. * * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs} */ type Key = string | number | bigint; /** * @internal The props any component can receive. * You don't have to add this type. All components automatically accept these props. * ```tsx * const Component = () =>

; * * ``` * * WARNING: The implementation of a component will never have access to these attributes. * The following example would be incorrect usage because {@link Component} would never have access to `key`: * ```tsx * const Component = (props: React.Attributes) => props.key; * ``` */ interface Attributes { key?: Key | null | undefined; } /** * The props any component accepting refs can receive. * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props. * ```tsx * const Component = forwardRef(() =>

); * console.log(current)} /> * ``` * * You only need this type if you manually author the types of props that need to be compatible with legacy refs. * ```tsx * interface Props extends React.RefAttributes {} * declare const Component: React.FunctionComponent; * ``` * * Otherwise it's simpler to directly use {@link Ref} since you can safely use the * props type to describe to props that a consumer can pass to the component * as well as describing the props the implementation of a component "sees". * {@link RefAttributes} is generally not safe to describe both consumer and seen props. * * ```tsx * interface Props extends { * ref?: React.Ref | undefined; * } * declare const Component: React.FunctionComponent; * ``` * * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs. * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string` * ```tsx * const Component = (props: React.RefAttributes) => props.ref; * ``` */ interface RefAttributes extends Attributes { /** * Allows getting a ref to the component instance. * Once the component unmounts, React will set `ref.current` to `null` * (or call the ref with `null` if you passed a callback ref). * * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */ ref?: LegacyRef | undefined; } /** * Represents the built-in attributes available to class components. */ interface ClassAttributes extends RefAttributes { } /** * Represents a JSX element. * * Where {@link ReactNode} represents everything that can be rendered, `ReactElement` * only represents JSX. * * @template P The type of the props object * @template T The type of the component or tag * * @example * * ```tsx * const element: ReactElement =

; * ``` */ interface ReactElement< P = any, T extends string | JSXElementConstructor = string | JSXElementConstructor, > { type: T; props: P; key: string | null; } /** * @deprecated */ interface ReactComponentElement< T extends keyof JSX.IntrinsicElements | JSXElementConstructor, P = Pick, Exclude, "key" | "ref">>, > extends ReactElement> {} interface FunctionComponentElement

extends ReactElement> { ref?: ("ref" extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined; } type CElement> = ComponentElement; interface ComponentElement> extends ReactElement> { ref?: LegacyRef | undefined; } /** * @deprecated Use {@link ComponentElement} instead. */ type ClassicElement

= CElement>; // string fallback for custom web-components interface DOMElement

| SVGAttributes, T extends Element> extends ReactElement { ref: LegacyRef; } // ReactHTML for ReactHTMLElement interface ReactHTMLElement extends DetailedReactHTMLElement, T> {} interface DetailedReactHTMLElement

, T extends HTMLElement> extends DOMElement { type: keyof ReactHTML; } // ReactSVG for ReactSVGElement interface ReactSVGElement extends DOMElement, SVGElement> { type: keyof ReactSVG; } interface ReactPortal extends ReactElement { children: ReactNode; } // // Factories // ---------------------------------------------------------------------- type Factory

= (props?: Attributes & P, ...children: ReactNode[]) => ReactElement

; /** * @deprecated Please use `FunctionComponentFactory` */ type SFCFactory

= FunctionComponentFactory

; type FunctionComponentFactory

= ( props?: Attributes & P, ...children: ReactNode[] ) => FunctionComponentElement

; type ComponentFactory> = ( props?: ClassAttributes & P, ...children: ReactNode[] ) => CElement; type CFactory> = ComponentFactory; type ClassicFactory

= CFactory>; type DOMFactory

, T extends Element> = ( props?: ClassAttributes & P | null, ...children: ReactNode[] ) => DOMElement; interface HTMLFactory extends DetailedHTMLFactory, T> {} interface DetailedHTMLFactory

, T extends HTMLElement> extends DOMFactory { (props?: ClassAttributes & P | null, ...children: ReactNode[]): DetailedReactHTMLElement; } interface SVGFactory extends DOMFactory, SVGElement> { ( props?: ClassAttributes & SVGAttributes | null, ...children: ReactNode[] ): ReactSVGElement; } /** * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear. */ type ReactText = string | number; /** * @deprecated - This type is not relevant when using React. Inline the type instead to make the intent clear. */ type ReactChild = ReactElement | string | number; /** * @deprecated Use either `ReactNode[]` if you need an array or `Iterable` if its passed to a host component. */ interface ReactNodeArray extends ReadonlyArray {} /** * WARNING: Not related to `React.Fragment`. * @deprecated This type is not relevant when using React. Inline the type instead to make the intent clear. */ type ReactFragment = Iterable; /** * Different release channels declare additional types of ReactNode this particular release channel accepts. * App or library types should never augment this interface. */ interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {} /** * Represents all of the things React can render. * * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered. * * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/reactnode/ React TypeScript Cheatsheet} * * @example * * ```tsx * // Typing children * type Props = { children: ReactNode } * * const Component = ({ children }: Props) =>

{children}

* * hello * ``` * * @example * * ```tsx * // Typing a custom element * type Props = { customElement: ReactNode } * * const Component = ({ customElement }: Props) =>

{customElement}

* * hello

} /> * ``` */ // non-thenables need to be kept in sync with AwaitedReactNode type ReactNode = | ReactElement | string | number | Iterable | ReactPortal | boolean | null | undefined | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES ]; // // Top Level API // ---------------------------------------------------------------------- // DOM Elements function createFactory( type: keyof ReactHTML, ): HTMLFactory; function createFactory( type: keyof ReactSVG, ): SVGFactory; function createFactory

, T extends Element>( type: string, ): DOMFactory; // Custom components function createFactory

(type: FunctionComponent

): FunctionComponentFactory

; function createFactory, C extends ComponentClass

>( type: ClassType, ): CFactory; function createFactory

(type: ComponentClass

): Factory

; // DOM Elements // TODO: generalize this to everything in `keyof ReactHTML`, not just "input" function createElement( type: "input", props?: InputHTMLAttributes & ClassAttributes | null, ...children: ReactNode[] ): DetailedReactHTMLElement, HTMLInputElement>; function createElement

, T extends HTMLElement>( type: keyof ReactHTML, props?: ClassAttributes & P | null, ...children: ReactNode[] ): DetailedReactHTMLElement; function createElement

, T extends SVGElement>( type: keyof ReactSVG, props?: ClassAttributes & P | null, ...children: ReactNode[] ): ReactSVGElement; function createElement

, T extends Element>( type: string, props?: ClassAttributes & P | null, ...children: ReactNode[] ): DOMElement; // Custom components function createElement

( type: FunctionComponent

, props?: Attributes & P | null, ...children: ReactNode[] ): FunctionComponentElement

; function createElement

, C extends ComponentClass

>( type: ClassType, props?: ClassAttributes & P | null, ...children: ReactNode[] ): CElement; function createElement

( type: FunctionComponent

| ComponentClass

| string, props?: Attributes & P | null, ...children: ReactNode[] ): ReactElement

; // DOM Elements // ReactHTMLElement function cloneElement

, T extends HTMLElement>( element: DetailedReactHTMLElement, props?: P, ...children: ReactNode[] ): DetailedReactHTMLElement; // ReactHTMLElement, less specific function cloneElement

, T extends HTMLElement>( element: ReactHTMLElement, props?: P, ...children: ReactNode[] ): ReactHTMLElement; // 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, props?: DOMAttributes & P, ...children: ReactNode[] ): DOMElement; // Custom components function cloneElement

( element: FunctionComponentElement

, props?: Partial

& Attributes, ...children: ReactNode[] ): FunctionComponentElement

; function cloneElement>( element: CElement, props?: Partial

& ClassAttributes, ...children: ReactNode[] ): CElement; function cloneElement

( element: ReactElement

, props?: Partial

& Attributes, ...children: ReactNode[] ): ReactElement

; /** * Describes the props accepted by a Context {@link Provider}. * * @template T The type of the value the context provides. */ interface ProviderProps { value: T; children?: ReactNode | undefined; } /** * Describes the props accepted by a Context {@link Consumer}. * * @template T The type of the value the context provides. */ interface ConsumerProps { children: (value: T) => ReactNode; } /** * An object masquerading as a component. These are created by functions * like {@link forwardRef}, {@link memo}, and {@link createContext}. * * In order to make TypeScript work, we pretend that they are normal * components. * * But they are, in fact, not callable - instead, they are objects which * are treated specially by the renderer. * * @template P The props the component accepts. */ interface ExoticComponent

{ (props: P): ReactNode; readonly $$typeof: symbol; } /** * An {@link ExoticComponent} with a `displayName` property applied to it. * * @template P The props the component accepts. */ interface NamedExoticComponent

extends ExoticComponent

{ /** * Used in debugging messages. You might want to set it * explicitly if you want to display a different name for * debugging purposes. * * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} */ displayName?: string | undefined; } /** * An {@link ExoticComponent} with a `propTypes` property applied to it. * * @template P The props the component accepts. */ interface ProviderExoticComponent

extends ExoticComponent

{ propTypes?: WeakValidationMap

| undefined; } /** * Used to retrieve the type of a context object from a {@link Context}. * * @template C The context object. * * @example * * ```tsx * import { createContext } from 'react'; * * const MyContext = createContext({ foo: 'bar' }); * * type ContextType = ContextType; * // ContextType = { foo: string } * ``` */ type ContextType> = C extends Context ? T : never; /** * Wraps your components to specify the value of this context for all components inside. * * @see {@link https://react.dev/reference/react/createContext#provider React Docs} * * @example * * ```tsx * import { createContext } from 'react'; * * const ThemeContext = createContext('light'); * * function App() { * return ( * * * * ); * } * ``` */ type Provider = ProviderExoticComponent>; /** * The old way to read context, before {@link useContext} existed. * * @see {@link https://react.dev/reference/react/createContext#consumer React Docs} * * @example * * ```tsx * import { UserContext } from './user-context'; * * function Avatar() { * return ( * * {user => {user.name} } * * ); * } * ``` */ type Consumer = ExoticComponent>; /** * Context lets components pass information deep down without explicitly * passing props. * * Created from {@link createContext} * * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs} * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet} * * @example * * ```tsx * import { createContext } from 'react'; * * const ThemeContext = createContext('light'); * ``` */ interface Context { Provider: Provider; Consumer: Consumer; /** * Used in debugging messages. You might want to set it * explicitly if you want to display a different name for * debugging purposes. * * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} */ displayName?: string | undefined; } /** * Lets you create a {@link Context} that components can provide or read. * * @param defaultValue The value you want the context to have when there is no matching * {@link Provider} in the tree above the component reading the context. This is meant * as a "last resort" fallback. * * @see {@link https://react.dev/reference/react/createContext#reference React Docs} * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet} * * @example * * ```tsx * import { createContext } from 'react'; * * const ThemeContext = createContext('light'); * ``` */ function createContext( // If you thought this should be optional, see // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106 defaultValue: T, ): Context; function isValidElement

(object: {} | null | undefined): object is ReactElement

; /** * Maintainer's note: Sync with {@link ReactChildren} until {@link ReactChildren} is removed. */ const Children: { map( children: C | readonly C[], fn: (child: C, index: number) => T, ): C extends null | undefined ? C : Array>; forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void; count(children: any): number; only(children: C): C extends any[] ? never : C; toArray(children: ReactNode | ReactNode[]): Array>; }; /** * Lets you group elements without a wrapper node. * * @see {@link https://react.dev/reference/react/Fragment React Docs} * * @example * * ```tsx * import { Fragment } from 'react'; * * * Hello * World * * ``` * * @example * * ```tsx * // Using the <> shorthand syntax: * * <> * Hello * World * * ``` */ const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>; /** * Lets you find common bugs in your components early during development. * * @see {@link https://react.dev/reference/react/StrictMode React Docs} * * @example * * ```tsx * import { StrictMode } from 'react'; * * * * * ``` */ const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>; /** * The props accepted by {@link Suspense}. * * @see {@link https://react.dev/reference/react/Suspense React Docs} */ interface SuspenseProps { children?: ReactNode | undefined; /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */ fallback?: ReactNode; } /** * Lets you display a fallback until its children have finished loading. * * @see {@link https://react.dev/reference/react/Suspense React Docs} * * @example * * ```tsx * import { Suspense } from 'react'; * * }> * * * ``` */ const Suspense: ExoticComponent; const version: string; /** * The callback passed to {@link ProfilerProps.onRender}. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ type ProfilerOnRenderCallback = ( /** * The string id prop of the {@link Profiler} tree that has just committed. This lets * you identify which part of the tree was committed if you are using multiple * profilers. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ id: string, /** * This lets you know whether the tree has just been mounted for the first time * or re-rendered due to a change in props, state, or hooks. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ phase: "mount" | "update" | "nested-update", /** * The number of milliseconds spent rendering the {@link Profiler} and its descendants * for the current update. This indicates how well the subtree makes use of * memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease * significantly after the initial mount as many of the descendants will only need to * re-render if their specific props change. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ actualDuration: number, /** * The number of milliseconds estimating how much time it would take to re-render the entire * {@link Profiler} subtree without any optimizations. It is calculated by summing up the most * recent render durations of each component in the tree. This value estimates a worst-case * cost of rendering (e.g. the initial mount or a tree with no memoization). Compare * {@link actualDuration} against it to see if memoization is working. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ baseDuration: number, /** * A numeric timestamp for when React began rendering the current update. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ startTime: number, /** * A numeric timestamp for when React committed the current update. This value is shared * between all profilers in a commit, enabling them to be grouped if desirable. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} */ commitTime: number, ) => void; /** * The props accepted by {@link Profiler}. * * @see {@link https://react.dev/reference/react/Profiler React Docs} */ interface ProfilerProps { children?: ReactNode | undefined; id: string; onRender: ProfilerOnRenderCallback; } /** * Lets you measure rendering performance of a React tree programmatically. * * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs} * * @example * * ```tsx * * * * ``` */ const Profiler: ExoticComponent; // // Component API // ---------------------------------------------------------------------- type ReactInstance = Component | Element; // Base component for plain JS classes interface Component

extends ComponentLifecycle {} class Component { /** * If set, `this.context` will be set at runtime to the current value of the given Context. * * @example * * ```ts * type MyContext = number * const Ctx = React.createContext(0) * * class Foo extends React.Component { * static contextType = Ctx * context!: React.ContextType * render () { * return <>My context's value: {this.context}; * } * } * ``` * * @see {@link https://react.dev/reference/react/Component#static-contexttype} */ static contextType?: Context | undefined; /** * 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. * * @example * ```ts * static contextType = MyContext * // For TS pre-3.7: * context!: React.ContextType * // For TS 3.7 and above: * declare context: React.ContextType * ``` * * @see {@link https://react.dev/reference/react/Component#context React Docs} */ context: unknown; constructor(props: P); /** * @deprecated * @see {@link https://legacy.reactjs.org/docs/legacy-context.html React Docs} */ 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( state: ((prevState: Readonly~~, props: Readonly~~

; state: Readonly; /** * @deprecated * * @see {@link https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Legacy React Docs} */ refs: { [key: string]: ReactInstance; }; } class PureComponent

extends Component {} /** * @deprecated Use `ClassicComponent` from `create-react-class` * * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs} * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm} */ interface ClassicComponent

extends Component { replaceState(nextState: S, callback?: () => void): void; isMounted(): boolean; getInitialState?(): S; } interface ChildContextProvider { getChildContext(): CC; } // // Class Interfaces // ---------------------------------------------------------------------- /** * Represents the type of a function component. Can optionally * receive a type argument that represents the props the component * receives. * * @template P The props the component accepts. * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet} * @alias for {@link FunctionComponent} * * @example * * ```tsx * // With props: * type Props = { name: string } * * const MyComponent: FC = (props) => { * return

~~{props.name}~~

* } * ``` * * @example * * ```tsx * // Without props: * const MyComponentWithoutProps: FC = () => { * return
MyComponentWithoutProps
* } * ``` */ type FC
= FunctionComponent
; /** * Represents the type of a function component. Can optionally * receive a type argument that represents the props the component * accepts. * * @template P The props the component accepts. * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet} * * @example * * ```tsx * // With props: * type Props = { name: string } * * const MyComponent: FunctionComponent = (props) => { * return
{props.name}
* } * ``` * * @example * * ```tsx * // Without props: * const MyComponentWithoutProps: FunctionComponent = () => { * return
MyComponentWithoutProps
* } * ``` */ interface FunctionComponent
{ (props: P, context?: any): ReactNode; /** * Used to declare the types of the props accepted by the * component. These types will be checked during rendering * and in development only. * * We recommend using TypeScript instead of checking prop * types at runtime. * * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs} */ propTypes?: WeakValidationMap
| undefined; /** * @deprecated * * Lets you specify which legacy context is consumed by * this component. * * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs} */ contextTypes?: ValidationMap | undefined; /** * Used to define default values for the props accepted by * the component. * * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs} * * @example * * ```tsx * type Props = { name?: string } * * const MyComponent: FC = (props) => { * return
{props.name}
* } * * MyComponent.defaultProps = { * name: 'John Doe' * } * ``` */ defaultProps?: Partial
| undefined; /** * Used in debugging messages. You might want to set it * explicitly if you want to display a different name for * debugging purposes. * * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} * * @example * * ```tsx * * const MyComponent: FC = () => { * return
Hello!
* } * * MyComponent.displayName = 'MyAwesomeComponent' * ``` */ displayName?: string | undefined; } /** * @deprecated - Equivalent to {@link React.FunctionComponent}. * * @see {@link React.FunctionComponent} * @alias {@link VoidFunctionComponent} */ type VFC
= VoidFunctionComponent
; /** * @deprecated - Equivalent to {@link React.FunctionComponent}. * * @see {@link React.FunctionComponent} */ interface VoidFunctionComponent
{ (props: P, context?: any): ReactNode; propTypes?: WeakValidationMap
| undefined; contextTypes?: ValidationMap | undefined; defaultProps?: Partial
| undefined; displayName?: string | undefined; } /** * The type of the ref received by a {@link ForwardRefRenderFunction}. * * @see {@link ForwardRefRenderFunction} */ type ForwardedRef = ((instance: T | null) => void) | MutableRefObject | null; /** * The type of the function passed to {@link forwardRef}. This is considered different * to a normal {@link FunctionComponent} because it receives an additional argument, * * @param props Props passed to the component, if any. * @param ref A ref forwarded to the component of type {@link ForwardedRef}. * * @template T The type of the forwarded ref. * @template P The type of the props the component accepts. * * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet} * @see {@link forwardRef} */ interface ForwardRefRenderFunction { (props: P, ref: ForwardedRef): ReactNode; /** * Used in debugging messages. You might want to set it * explicitly if you want to display a different name for * debugging purposes. * * Will show `ForwardRef(${Component.displayName || Component.name})` * in devtools by default, but can be given its own specific name. * * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} */ displayName?: string | undefined; /** * defaultProps are not supported on render functions passed to forwardRef. * * @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs} */ defaultProps?: never | undefined; /** * propTypes are not supported on render functions passed to forwardRef. * * @see {@link https://github.com/microsoft/TypeScript/issues/36826 linked GitHub issue} for context * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs} */ propTypes?: never | undefined; } /** * Represents a component class in React. * * @template P The props the component accepts. * @template S The internal state of the component. */ interface ComponentClass
extends StaticLifecycle { new(props: P, context?: any): Component; /** * Used to declare the types of the props accepted by the * component. These types will be checked during rendering * and in development only. * * We recommend using TypeScript instead of checking prop * types at runtime. * * @see {@link https://react.dev/reference/react/Component#static-proptypes React Docs} */ propTypes?: WeakValidationMap
| undefined; contextType?: Context | undefined; /** * @deprecated use {@link ComponentClass.contextType} instead * * Lets you specify which legacy context is consumed by * this component. * * @see {@link https://legacy.reactjs.org/docs/legacy-context.html Legacy React Docs} */ contextTypes?: ValidationMap | undefined; /** * @deprecated * * @see {@link https://legacy.reactjs.org/docs/legacy-context.html#how-to-use-context Legacy React Docs} */ childContextTypes?: ValidationMap | undefined; /** * Used to define default values for the props accepted by * the component. * * @see {@link https://react.dev/reference/react/Component#static-defaultprops React Docs} */ defaultProps?: Partial
| undefined; /** * Used in debugging messages. You might want to set it * explicitly if you want to display a different name for * debugging purposes. * * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs} */ displayName?: string | undefined; } /** * @deprecated Use `ClassicComponentClass` from `create-react-class` * * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs} * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm} */ interface ClassicComponentClass
extends ComponentClass
{ new(props: P, context?: any): ClassicComponent; getDefaultProps?(): P; } /** * Used in {@link createElement} and {@link createFactory} to represent * a class. * * An intersection type is used to infer multiple type parameters from * a single argument, which is useful for many top-level API defs. * See {@link https://github.com/Microsoft/TypeScript/issues/7234 this GitHub issue} * for more info. */ type ClassType, C extends ComponentClass
> = & C & (new(props: P, context?: any) => T); // // Component Specs and Lifecycle // ---------------------------------------------------------------------- // This should actually be something like `Lifecycle | DeprecatedLifecycle`, // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle // methods are present. interface ComponentLifecycle extends NewLifecycle, DeprecatedLifecycle { /** * 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, {@link Component.render}, `componentWillUpdate` * and `componentDidUpdate` will not be called. */ shouldComponentUpdate?(nextProps: Readonly
, nextState: Readonly, 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 { getDerivedStateFromProps?: GetDerivedStateFromProps | undefined; getDerivedStateFromError?: GetDerivedStateFromError | undefined; } type GetDerivedStateFromProps = /** * 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 | null; type GetDerivedStateFromError = /** * 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 | null; // This should be "infer SS" but can't use it yet interface NewLifecycle { /** * Runs before React applies the result of {@link Component.render render} to the document, and * returns an object to be given to {@link componentDidUpdate}. Useful for saving * things such as scroll position before {@link Component.render render} causes changes to it. * * Note: the presence of this method prevents any of the deprecated * lifecycle events from running. */ getSnapshotBeforeUpdate?(prevProps: Readonly
, prevState: Readonly): SS | null; /** * Called immediately after updating occurs. Not called for the initial render. * * The snapshot is only present if {@link getSnapshotBeforeUpdate} is present and returns non-null. */ componentDidUpdate?(prevProps: Readonly
, prevState: Readonly, snapshot?: SS): void; } interface DeprecatedLifecycle { /** * Called immediately before mounting occurs, and before {@link Component.render}. * Avoid introducing any side-effects or subscriptions in this method. * * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate} * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents * this from being invoked. * * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead; will stop working in React 17 * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state} * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path} */ componentWillMount?(): void; /** * Called immediately before mounting occurs, and before {@link 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 {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate} * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents * this from being invoked. * * @deprecated 16.3, use {@link ComponentLifecycle.componentDidMount componentDidMount} or the constructor instead * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state} * @see {@link https://legacy.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 {@link Component.setState} generally does not trigger this method. * * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate} * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents * this from being invoked. * * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead; will stop working in React 17 * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props} * @see {@link https://legacy.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 {@link Component.setState} generally does not trigger this method. * * This method will not stop working in React 17. * * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate} * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents * this from being invoked. * * @deprecated 16.3, use static {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} instead * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props} * @see {@link https://legacy.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 {@link Component.setState} here. * * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate} * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents * this from being invoked. * * @deprecated 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17 * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update} * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path} */ componentWillUpdate?(nextProps: Readonly
, nextState: 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 {@link Component.setState} here. * * This method will not stop working in React 17. * * Note: the presence of {@link NewLifecycle.getSnapshotBeforeUpdate getSnapshotBeforeUpdate} * or {@link StaticLifecycle.getDerivedStateFromProps getDerivedStateFromProps} prevents * this from being invoked. * * @deprecated 16.3, use getSnapshotBeforeUpdate instead * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update} * @see {@link https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path} */ UNSAFE_componentWillUpdate?(nextProps: Readonly
, nextState: Readonly, nextContext: any): void; } /** * @deprecated * * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful} */ interface Mixin extends ComponentLifecycle { mixins?: Array> | undefined; statics?: { [key: string]: any; } | undefined; displayName?: string | undefined; propTypes?: ValidationMap | undefined; contextTypes?: ValidationMap | undefined; childContextTypes?: ValidationMap | undefined; getDefaultProps?(): P; getInitialState?(): S; } /** * @deprecated * * @see {@link https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html Mixins Considered Harmful} */ interface ComponentSpec extends Mixin { render(): ReactNode; [propertyName: string]: any; } function createRef(): RefObject; /** * The type of the component returned from {@link forwardRef}. * * @template P The props the component accepts, if any. * * @see {@link ExoticComponent} */ interface ForwardRefExoticComponent
~~extends NamedExoticComponent~~
~~{ defaultProps?: Partial~~
~~| undefined; propTypes?: WeakValidationMap~~
| undefined; } /** * Lets your component expose a DOM node to a parent component * using a ref. * * @see {@link https://react.dev/reference/react/forwardRef React Docs} * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet} * * @param render See the {@link ForwardRefRenderFunction}. * * @template T The type of the DOM node. * @template P The props the component accepts, if any. * * @example * * ```tsx * interface Props { * children?: ReactNode; * type: "submit" | "button"; * } * * export const FancyButton = forwardRef((props, ref) => ( * * )); * ``` */ function forwardRef( render: ForwardRefRenderFunction, ): ForwardRefExoticComponent & RefAttributes>; /** * Omits the 'ref' attribute from the given props object. * * @template P The props object type. */ type PropsWithoutRef
= // Omit would not be sufficient for this. We'd like to avoid unnecessary mapping and need a distributive conditional to support unions. // see: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types // https://github.com/Microsoft/TypeScript/issues/28339 P extends any ? ("ref" extends keyof P ? Omit : P) : P; /** Ensures that the props do not include string ref, which cannot be forwarded */ type PropsWithRef
= // Note: String refs can be forwarded. We can't fix this bug without breaking a bunch of libraries now though. // 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 | undefined } ? string extends R ? PropsWithoutRef
~~& { ref?: Exclude | undefined } : P : P : P; type PropsWithChildren~~
= P & { children?: ReactNode | undefined }; /** * Used to retrieve the props a component accepts. Can either be passed a string, * indicating a DOM element (e.g. 'div', 'span', etc.) or the type of a React * component. * * It's usually better to use {@link ComponentPropsWithRef} or {@link ComponentPropsWithoutRef} * instead of this type, as they let you be explicit about whether or not to include * the `ref` prop. * * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet} * * @example * * ```tsx * // Retrieves the props an 'input' element accepts * type InputProps = React.ComponentProps<'input'>; * ``` * * @example * * ```tsx * const MyComponent = (props: { foo: number, bar: string }) =>
; * * // Retrieves the props 'MyComponent' accepts * type MyComponentProps = React.ComponentProps; * ``` */ type ComponentProps> = T extends JSXElementConstructor ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : {}; /** * Used to retrieve the props a component accepts with its ref. Can either be * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the * type of a React component. * * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet} * * @example * * ```tsx * // Retrieves the props an 'input' element accepts * type InputProps = React.ComponentPropsWithRef<'input'>; * ``` * * @example * * ```tsx * const MyComponent = (props: { foo: number, bar: string }) =>
; * * // Retrieves the props 'MyComponent' accepts * type MyComponentPropsWithRef = React.ComponentPropsWithRef; * ``` */ type ComponentPropsWithRef = T extends (new(props: infer P) => Component) ? PropsWithoutRef
& RefAttributes> : PropsWithRef>; /** * Used to retrieve the props a custom component accepts with its ref. * * Unlike {@link ComponentPropsWithRef}, this only works with custom * components, i.e. components you define yourself. This is to improve * type-checking performance. * * @example * * ```tsx * const MyComponent = (props: { foo: number, bar: string }) =>
; * * // Retrieves the props 'MyComponent' accepts * type MyComponentPropsWithRef = React.CustomComponentPropsWithRef; * ``` */ type CustomComponentPropsWithRef = T extends (new(props: infer P) => Component) ? (PropsWithoutRef
& RefAttributes>) : T extends ((props: infer P, legacyContext?: any) => ReactNode) ? PropsWithRef
: never; /** * Used to retrieve the props a component accepts without its ref. Can either be * passed a string, indicating a DOM element (e.g. 'div', 'span', etc.) or the * type of a React component. * * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/ React TypeScript Cheatsheet} * * @example * * ```tsx * // Retrieves the props an 'input' element accepts * type InputProps = React.ComponentPropsWithoutRef<'input'>; * ``` * * @example * * ```tsx * const MyComponent = (props: { foo: number, bar: string }) =>
; * * // Retrieves the props 'MyComponent' accepts * type MyComponentPropsWithoutRef = React.ComponentPropsWithoutRef; * ``` */ type ComponentPropsWithoutRef = PropsWithoutRef>; type ComponentRef = T extends NamedExoticComponent< ComponentPropsWithoutRef & RefAttributes > ? Method : ComponentPropsWithRef extends RefAttributes ? Method : never; // will show `Memo(${Component.displayName || Component.name})` in devtools by default, // but can be given its own specific name type MemoExoticComponent> = NamedExoticComponent> & { readonly type: T; }; /** * Lets you skip re-rendering a component when its props are unchanged. * * @see {@link https://react.dev/reference/react/memo React Docs} * * @param Component The component to memoize. * @param propsAreEqual A function that will be used to determine if the props have changed. * * @example * * ```tsx * import { memo } from 'react'; * * const SomeComponent = memo(function SomeComponent(props: { foo: string }) { * // ... * }); * ``` */ function memo
( Component: FunctionComponent
, propsAreEqual?: (prevProps: Readonly
, nextProps: Readonly
) => boolean, ): NamedExoticComponent
; function memo>( Component: T, propsAreEqual?: (prevProps: Readonly>, nextProps: Readonly>) => boolean, ): MemoExoticComponent; interface LazyExoticComponent> extends ExoticComponent> { readonly _result: T; } /** * Lets you defer loading a component’s code until it is rendered for the first time. * * @see {@link https://react.dev/reference/react/lazy React Docs} * * @param load A function that returns a `Promise` or another thenable (a `Promise`-like object with a * then method). React will not call `load` until the first time you attempt to render the returned * component. After React first calls load, it will wait for it to resolve, and then render the * resolved value’s `.default` as a React component. Both the returned `Promise` and the `Promise`’s * resolved value will be cached, so React will not call load more than once. If the `Promise` rejects, * React will throw the rejection reason for the nearest Error Boundary to handle. * * @example * * ```tsx * import { lazy } from 'react'; * * const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); * ``` */ function lazy>( load: () => Promise<{ default: T }>, ): LazyExoticComponent; // // React Hooks // ---------------------------------------------------------------------- /** * The instruction passed to a {@link Dispatch} function in {@link useState} * to tell React what the next value of the {@link useState} should be. * * Often found wrapped in {@link Dispatch}. * * @template S The type of the state. * * @example * * ```tsx * // This return type correctly represents the type of * // `setCount` in the example below. * const useCustomState = (): Dispatch> => { * const [count, setCount] = useState(0); * * return setCount; * } * ``` */ type SetStateAction = S | ((prevState: S) => S); /** * A function that can be used to update the state of a {@link useState} * or {@link useReducer} hook. */ type Dispatch = (value: A) => void; /** * A {@link Dispatch} function can sometimes be called without any arguments. */ type DispatchWithoutAction = () => void; // Unlike redux, the actions _can_ be anything type Reducer = (prevState: S, action: A) => S; // If useReducer accepts a reducer without action, dispatch may be called without any parameters. type ReducerWithoutAction = (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 ? S : never; type ReducerAction> = R extends Reducer ? A : never; // The identity check is done with the SameValue algorithm (Object.is), which is stricter than === type ReducerStateWithoutAction> = R extends ReducerWithoutAction ? S : never; type DependencyList = readonly unknown[]; // NOTE: callbacks are _only_ allowed to return either void, or a destructor. type EffectCallback = () => void | Destructor; interface MutableRefObject { current: T; } // This will technically work if you give a Consumer or Provider 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 {@link https://react.dev/reference/react/useContext} */ function useContext(context: Context /*, (not public API) observedBits?: number|boolean */): T; /** * Returns a stateful value, and a function to update it. * * @version 16.8.0 * @see {@link https://react.dev/reference/react/useState} */ function useState(initialState: S | (() => S)): [S, Dispatch>]; // convenience overload when first argument is omitted /** * Returns a stateful value, and a function to update it. * * @version 16.8.0 * @see {@link https://react.dev/reference/react/useState} */ function useState(): [S | undefined, Dispatch>]; /** * 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 {@link https://react.dev/reference/react/useReducer} */ // overload where dispatch could accept 0 arguments. function useReducer, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction, ): [ReducerStateWithoutAction, 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 {@link https://react.dev/reference/react/useReducer} */ // overload where dispatch could accept 0 arguments. function useReducer>( reducer: R, initializerArg: ReducerStateWithoutAction, initializer?: undefined, ): [ReducerStateWithoutAction, 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 {@link https://react.dev/reference/react/useReducer} */ // overload where "I" may be a subset of ReducerState; used to provide autocompletion. // If "I" matches ReducerState exactly then the last overload will allow initializer to be omitted. // the last overload effectively behaves as if the identity function (x => x) is the initializer. function useReducer, I>( reducer: R, initializerArg: I & ReducerState, initializer: (arg: I & ReducerState) => ReducerState, ): [ReducerState, Dispatch>]; /** * 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 {@link https://react.dev/reference/react/useReducer} */ // overload for free "I"; all goes as long as initializer converts it into "ReducerState". function useReducer, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerState, ): [ReducerState, Dispatch>]; /** * 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 {@link https://react.dev/reference/react/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>( reducer: R, initialState: ReducerState, initializer?: undefined, ): [ReducerState, Dispatch>]; /** * `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 {@link https://react.dev/reference/react/useRef} */ function useRef(initialValue: T): MutableRefObject; // 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 {@link https://react.dev/reference/react/useRef} */ function useRef(initialValue: T | null): RefObject; // 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 {@link https://react.dev/reference/react/useRef} */ function useRef(): MutableRefObject; /** * 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 {@link https://react.dev/reference/react/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 {@link https://react.dev/reference/react/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 /** * `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 {@link https://react.dev/reference/react/useImperativeHandle} */ function useImperativeHandle(ref: Ref | 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 {@link https://react.dev/reference/react/useCallback} */ // A specific function type would not trigger implicit any. // See https://github.com/DefinitelyTyped/DefinitelyTyped/issues/52873#issuecomment-845806435 for a comparison between `Function` and more specific types. // eslint-disable-next-line @typescript-eslint/ban-types function useCallback(callback: T, deps: DependencyList): T; /** * `useMemo` will only recompute the memoized value when one of the `deps` has changed. * * @version 16.8.0 * @see {@link https://react.dev/reference/react/useMemo} */ // allow undefined, but don't make it optional as that is very likely a mistake function useMemo(factory: () => T, deps: DependencyList): 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 {@link https://react.dev/reference/react/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(value: T, format?: (value: T) => any): void; // must be synchronous export type TransitionFunction = () => VoidOrUndefinedOnly; // strange definition to allow vscode to show documentation on the invocation export interface TransitionStartFunction { /** * State updates caused inside the callback are allowed to be deferred. * * **If some state update causes a component to suspend, that state update should be wrapped in a transition.** * * @param callback A _synchronous_ function which causes state updates that can be deferred. */ (callback: TransitionFunction): void; } /** * Returns a deferred version of the value that may “lag behind” it. * * This is commonly used to keep the interface responsive when you have something that renders immediately * based on user input and something that needs to wait for a data fetch. * * A good example of this is a text input. * * @param value The value that is going to be deferred * * @see {@link https://react.dev/reference/react/useDeferredValue} */ export function useDeferredValue(value: T): T; /** * Allows components to avoid undesirable loading states by waiting for content to load * before transitioning to the next screen. It also allows components to defer slower, * data fetching updates until subsequent renders so that more crucial updates can be * rendered immediately. * * The `useTransition` hook returns two values in an array. * * The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish. * The second is a function that takes a callback. We can use it to tell React which state we want to defer. * * **If some state update causes a component to suspend, that state update should be wrapped in a transition.** * * @see {@link https://react.dev/reference/react/useTransition} */ export function useTransition(): [boolean, TransitionStartFunction]; /** * Similar to `useTransition` but allows uses where hooks are not available. * * @param callback A _synchronous_ function which causes state updates that can be deferred. */ export function startTransition(scope: TransitionFunction): void; export function useId(): string; /** * @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. * * @see {@link https://github.com/facebook/react/pull/21913} */ export function useInsertionEffect(effect: EffectCallback, deps?: DependencyList): void; /** * @param subscribe * @param getSnapshot * * @see {@link https://github.com/reactwg/react-18/discussions/86} */ // keep in sync with `useSyncExternalStore` from `use-sync-external-store` export function useSyncExternalStore( subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot, ): Snapshot; // // Event System // ---------------------------------------------------------------------- // TODO: change any to unknown when moving to TS v3 interface BaseSyntheticEvent { 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/issues/11508#issuecomment-256045682 */ interface SyntheticEvent extends BaseSyntheticEvent {} interface ClipboardEvent extends SyntheticEvent { clipboardData: DataTransfer; } interface CompositionEvent extends SyntheticEvent { data: string; } interface DragEvent extends MouseEvent { dataTransfer: DataTransfer; } interface PointerEvent extends MouseEvent { pointerId: number; pressure: number; tangentialPressure: number; tiltX: number; tiltY: number; twist: number; width: number; height: number; pointerType: "mouse" | "pen" | "touch"; isPrimary: boolean; } interface FocusEvent extends SyntheticEvent { relatedTarget: (EventTarget & RelatedTarget) | null; target: EventTarget & Target; } interface FormEvent extends SyntheticEvent { } interface InvalidEvent extends SyntheticEvent { target: EventTarget & T; } interface ChangeEvent extends SyntheticEvent { target: EventTarget & T; } export type ModifierKey = | "Alt" | "AltGraph" | "CapsLock" | "Control" | "Fn" | "FnLock" | "Hyper" | "Meta" | "NumLock" | "ScrollLock" | "Shift" | "Super" | "Symbol" | "SymbolLock"; interface KeyboardEvent extends UIEvent { altKey: boolean; /** @deprecated */ charCode: number; ctrlKey: boolean; code: string; /** * 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: ModifierKey): boolean; /** * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values */ key: string; /** @deprecated */ keyCode: number; locale: string; location: number; metaKey: boolean; repeat: boolean; shiftKey: boolean; /** @deprecated */ which: number; } interface MouseEvent extends UIEvent { 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: ModifierKey): boolean; metaKey: boolean; movementX: number; movementY: number; pageX: number; pageY: number; relatedTarget: EventTarget | null; screenX: number; screenY: number; shiftKey: boolean; } interface TouchEvent extends UIEvent { 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: ModifierKey): boolean; metaKey: boolean; shiftKey: boolean; targetTouches: TouchList; touches: TouchList; } interface UIEvent extends SyntheticEvent { detail: number; view: AbstractView; } interface WheelEvent extends MouseEvent { deltaMode: number; deltaX: number; deltaY: number; deltaZ: number; } interface AnimationEvent extends SyntheticEvent { animationName: string; elapsedTime: number; pseudoElement: string; } interface TransitionEvent extends SyntheticEvent { elapsedTime: number; propertyName: string; pseudoElement: string; } // // Event Handler Types // ---------------------------------------------------------------------- type EventHandler> = { bivarianceHack(event: E): void }["bivarianceHack"]; type ReactEventHandler = EventHandler>; type ClipboardEventHandler = EventHandler>; type CompositionEventHandler = EventHandler>; type DragEventHandler = EventHandler>; type FocusEventHandler = EventHandler>; type FormEventHandler = EventHandler>; type ChangeEventHandler = EventHandler>; type KeyboardEventHandler = EventHandler>; type MouseEventHandler = EventHandler>; type TouchEventHandler = EventHandler>; type PointerEventHandler = EventHandler>; type UIEventHandler = EventHandler>; type WheelEventHandler = EventHandler>; type AnimationEventHandler = EventHandler>; type TransitionEventHandler = EventHandler>; // // Props / DOM Attributes // ---------------------------------------------------------------------- interface HTMLProps extends AllHTMLAttributes, ClassAttributes { } type DetailedHTMLProps, T> = ClassAttributes & E; interface SVGProps extends SVGAttributes, ClassAttributes { } interface SVGLineElementAttributes extends SVGProps {} interface SVGTextElementAttributes extends SVGProps {} interface DOMAttributes { children?: ReactNode | undefined; dangerouslySetInnerHTML?: { // Should be InnerHTML['innerHTML']. // But unfortunately we're mixing renderer-specific type declarations. __html: string | TrustedHTML; } | undefined; // Clipboard Events onCopy?: ClipboardEventHandler | undefined; onCopyCapture?: ClipboardEventHandler | undefined; onCut?: ClipboardEventHandler | undefined; onCutCapture?: ClipboardEventHandler | undefined; onPaste?: ClipboardEventHandler | undefined; onPasteCapture?: ClipboardEventHandler | undefined; // Composition Events onCompositionEnd?: CompositionEventHandler | undefined; onCompositionEndCapture?: CompositionEventHandler | undefined; onCompositionStart?: CompositionEventHandler | undefined; onCompositionStartCapture?: CompositionEventHandler | undefined; onCompositionUpdate?: CompositionEventHandler | undefined; onCompositionUpdateCapture?: CompositionEventHandler | undefined; // Focus Events onFocus?: FocusEventHandler | undefined; onFocusCapture?: FocusEventHandler | undefined; onBlur?: FocusEventHandler | undefined; onBlurCapture?: FocusEventHandler | undefined; // Form Events onChange?: FormEventHandler | undefined; onChangeCapture?: FormEventHandler | undefined; onBeforeInput?: FormEventHandler | undefined; onBeforeInputCapture?: FormEventHandler | undefined; onInput?: FormEventHandler | undefined; onInputCapture?: FormEventHandler | undefined; onReset?: FormEventHandler | undefined; onResetCapture?: FormEventHandler | undefined; onSubmit?: FormEventHandler | undefined; onSubmitCapture?: FormEventHandler | undefined; onInvalid?: FormEventHandler | undefined; onInvalidCapture?: FormEventHandler | undefined; // Image Events onLoad?: ReactEventHandler | undefined; onLoadCapture?: ReactEventHandler | undefined; onError?: ReactEventHandler | undefined; // also a Media Event onErrorCapture?: ReactEventHandler | undefined; // also a Media Event // Keyboard Events onKeyDown?: KeyboardEventHandler | undefined; onKeyDownCapture?: KeyboardEventHandler | undefined; /** @deprecated */ onKeyPress?: KeyboardEventHandler | undefined; /** @deprecated */ onKeyPressCapture?: KeyboardEventHandler | undefined; onKeyUp?: KeyboardEventHandler | undefined; onKeyUpCapture?: KeyboardEventHandler | undefined; // Media Events onAbort?: ReactEventHandler | undefined; onAbortCapture?: ReactEventHandler | undefined; onCanPlay?: ReactEventHandler | undefined; onCanPlayCapture?: ReactEventHandler | undefined; onCanPlayThrough?: ReactEventHandler | undefined; onCanPlayThroughCapture?: ReactEventHandler | undefined; onDurationChange?: ReactEventHandler | undefined; onDurationChangeCapture?: ReactEventHandler | undefined; onEmptied?: ReactEventHandler | undefined; onEmptiedCapture?: ReactEventHandler | undefined; onEncrypted?: ReactEventHandler | undefined; onEncryptedCapture?: ReactEventHandler | undefined; onEnded?: ReactEventHandler | undefined; onEndedCapture?: ReactEventHandler | undefined; onLoadedData?: ReactEventHandler | undefined; onLoadedDataCapture?: ReactEventHandler | undefined; onLoadedMetadata?: ReactEventHandler | undefined; onLoadedMetadataCapture?: ReactEventHandler | undefined; onLoadStart?: ReactEventHandler | undefined; onLoadStartCapture?: ReactEventHandler | undefined; onPause?: ReactEventHandler | undefined; onPauseCapture?: ReactEventHandler | undefined; onPlay?: ReactEventHandler | undefined; onPlayCapture?: ReactEventHandler | undefined; onPlaying?: ReactEventHandler | undefined; onPlayingCapture?: ReactEventHandler | undefined; onProgress?: ReactEventHandler | undefined; onProgressCapture?: ReactEventHandler | undefined; onRateChange?: ReactEventHandler | undefined; onRateChangeCapture?: ReactEventHandler | undefined; onResize?: ReactEventHandler | undefined; onResizeCapture?: ReactEventHandler | undefined; onSeeked?: ReactEventHandler | undefined; onSeekedCapture?: ReactEventHandler | undefined; onSeeking?: ReactEventHandler | undefined; onSeekingCapture?: ReactEventHandler | undefined; onStalled?: ReactEventHandler | undefined; onStalledCapture?: ReactEventHandler | undefined; onSuspend?: ReactEventHandler | undefined; onSuspendCapture?: ReactEventHandler | undefined; onTimeUpdate?: ReactEventHandler | undefined; onTimeUpdateCapture?: ReactEventHandler | undefined; onVolumeChange?: ReactEventHandler | undefined; onVolumeChangeCapture?: ReactEventHandler | undefined; onWaiting?: ReactEventHandler | undefined; onWaitingCapture?: ReactEventHandler | undefined; // MouseEvents onAuxClick?: MouseEventHandler | undefined; onAuxClickCapture?: MouseEventHandler | undefined; onClick?: MouseEventHandler | undefined; onClickCapture?: MouseEventHandler | undefined; onContextMenu?: MouseEventHandler | undefined; onContextMenuCapture?: MouseEventHandler | undefined; onDoubleClick?: MouseEventHandler | undefined; onDoubleClickCapture?: MouseEventHandler | undefined; onDrag?: DragEventHandler | undefined; onDragCapture?: DragEventHandler | undefined; onDragEnd?: DragEventHandler | undefined; onDragEndCapture?: DragEventHandler | undefined; onDragEnter?: DragEventHandler | undefined; onDragEnterCapture?: DragEventHandler | undefined; onDragExit?: DragEventHandler | undefined; onDragExitCapture?: DragEventHandler | undefined; onDragLeave?: DragEventHandler | undefined; onDragLeaveCapture?: DragEventHandler | undefined; onDragOver?: DragEventHandler | undefined; onDragOverCapture?: DragEventHandler | undefined; onDragStart?: DragEventHandler | undefined; onDragStartCapture?: DragEventHandler | undefined; onDrop?: DragEventHandler | undefined; onDropCapture?: DragEventHandler | undefined; onMouseDown?: MouseEventHandler | undefined; onMouseDownCapture?: MouseEventHandler | undefined; onMouseEnter?: MouseEventHandler | undefined; onMouseLeave?: MouseEventHandler | undefined; onMouseMove?: MouseEventHandler | undefined; onMouseMoveCapture?: MouseEventHandler | undefined; onMouseOut?: MouseEventHandler | undefined; onMouseOutCapture?: MouseEventHandler | undefined; onMouseOver?: MouseEventHandler | undefined; onMouseOverCapture?: MouseEventHandler | undefined; onMouseUp?: MouseEventHandler | undefined; onMouseUpCapture?: MouseEventHandler | undefined; // Selection Events onSelect?: ReactEventHandler | undefined; onSelectCapture?: ReactEventHandler | undefined; // Touch Events onTouchCancel?: TouchEventHandler | undefined; onTouchCancelCapture?: TouchEventHandler | undefined; onTouchEnd?: TouchEventHandler | undefined; onTouchEndCapture?: TouchEventHandler | undefined; onTouchMove?: TouchEventHandler | undefined; onTouchMoveCapture?: TouchEventHandler | undefined; onTouchStart?: TouchEventHandler | undefined; onTouchStartCapture?: TouchEventHandler | undefined; // Pointer Events onPointerDown?: PointerEventHandler | undefined; onPointerDownCapture?: PointerEventHandler | undefined; onPointerMove?: PointerEventHandler | undefined; onPointerMoveCapture?: PointerEventHandler | undefined; onPointerUp?: PointerEventHandler | undefined; onPointerUpCapture?: PointerEventHandler | undefined; onPointerCancel?: PointerEventHandler | undefined; onPointerCancelCapture?: PointerEventHandler | undefined; onPointerEnter?: PointerEventHandler | undefined; onPointerLeave?: PointerEventHandler | undefined; onPointerOver?: PointerEventHandler | undefined; onPointerOverCapture?: PointerEventHandler | undefined; onPointerOut?: PointerEventHandler | undefined; onPointerOutCapture?: PointerEventHandler | undefined; onGotPointerCapture?: PointerEventHandler | undefined; onGotPointerCaptureCapture?: PointerEventHandler | undefined; onLostPointerCapture?: PointerEventHandler | undefined; onLostPointerCaptureCapture?: PointerEventHandler | undefined; // UI Events onScroll?: UIEventHandler | undefined; onScrollCapture?: UIEventHandler | undefined; // Wheel Events onWheel?: WheelEventHandler | undefined; onWheelCapture?: WheelEventHandler | undefined; // Animation Events onAnimationStart?: AnimationEventHandler | undefined; onAnimationStartCapture?: AnimationEventHandler | undefined; onAnimationEnd?: AnimationEventHandler | undefined; onAnimationEndCapture?: AnimationEventHandler | undefined; onAnimationIteration?: AnimationEventHandler | undefined; onAnimationIterationCapture?: AnimationEventHandler | undefined; // Transition Events onTransitionEnd?: TransitionEventHandler | undefined; onTransitionEndCapture?: TransitionEventHandler | undefined; } export interface CSSProperties extends CSS.Properties { /** * 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 | undefined; /** 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"?: Booleanish | undefined; /** * 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" | undefined; /** 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. */ /** * Defines a string value that labels the current element, which is intended to be converted into Braille. * @see aria-label. */ "aria-braillelabel"?: string | undefined; /** * Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. * @see aria-roledescription. */ "aria-brailleroledescription"?: string | undefined; "aria-busy"?: Booleanish | undefined; /** * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. * @see aria-pressed @see aria-selected. */ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined; /** * Defines the total number of columns in a table, grid, or treegrid. * @see aria-colindex. */ "aria-colcount"?: number | undefined; /** * 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 | undefined; /** * Defines a human readable text alternative of aria-colindex. * @see aria-rowindextext. */ "aria-colindextext"?: string | undefined; /** * 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 | undefined; /** * Identifies the element (or elements) whose contents or presence are controlled by the current element. * @see aria-owns. */ "aria-controls"?: string | undefined; /** 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" | undefined; /** * Identifies the element (or elements) that describes the object. * @see aria-labelledby */ "aria-describedby"?: string | undefined; /** * Defines a string value that describes or annotates the current element. * @see related aria-describedby. */ "aria-description"?: string | undefined; /** * Identifies the element that provides a detailed, extended description for the object. * @see aria-describedby. */ "aria-details"?: string | undefined; /** * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. * @see aria-hidden @see aria-readonly. */ "aria-disabled"?: Booleanish | undefined; /** * 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" | undefined; /** * Identifies the element that provides an error message for the object. * @see aria-invalid @see aria-describedby. */ "aria-errormessage"?: string | undefined; /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */ "aria-expanded"?: Booleanish | undefined; /** * 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 | undefined; /** * Indicates an element's "grabbed" state in a drag-and-drop operation. * @deprecated in ARIA 1.1 */ "aria-grabbed"?: Booleanish | undefined; /** 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" | undefined; /** * Indicates whether the element is exposed to an accessibility API. * @see aria-disabled. */ "aria-hidden"?: Booleanish | undefined; /** * Indicates the entered value does not conform to the format expected by the application. * @see aria-errormessage. */ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined; /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */ "aria-keyshortcuts"?: string | undefined; /** * Defines a string value that labels the current element. * @see aria-labelledby. */ "aria-label"?: string | undefined; /** * Identifies the element (or elements) that labels the current element. * @see aria-describedby. */ "aria-labelledby"?: string | undefined; /** Defines the hierarchical level of an element within a structure. */ "aria-level"?: number | undefined; /** 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" | undefined; /** Indicates whether an element is modal when displayed. */ "aria-modal"?: Booleanish | undefined; /** Indicates whether a text box accepts multiple lines of input or only a single line. */ "aria-multiline"?: Booleanish | undefined; /** Indicates that the user may select more than one item from the current selectable descendants. */ "aria-multiselectable"?: Booleanish | undefined; /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */ "aria-orientation"?: "horizontal" | "vertical" | undefined; /** * 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 | undefined; /** * 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 | undefined; /** * 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 | undefined; /** * Indicates the current "pressed" state of toggle buttons. * @see aria-checked @see aria-selected. */ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined; /** * Indicates that the element is not editable, but is otherwise operable. * @see aria-disabled. */ "aria-readonly"?: Booleanish | undefined; /** * 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 removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined; /** Indicates that user input is required on the element before a form may be submitted. */ "aria-required"?: Booleanish | undefined; /** Defines a human-readable, author-localized description for the role of an element. */ "aria-roledescription"?: string | undefined; /** * Defines the total number of rows in a table, grid, or treegrid. * @see aria-rowindex. */ "aria-rowcount"?: number | undefined; /** * 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 | undefined; /** * Defines a human readable text alternative of aria-rowindex. * @see aria-colindextext. */ "aria-rowindextext"?: string | undefined; /** * 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 | undefined; /** * Indicates the current "selected" state of various widgets. * @see aria-checked @see aria-pressed. */ "aria-selected"?: Booleanish | undefined; /** * 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 | undefined; /** Indicates if items in a table or grid are sorted in ascending or descending order. */ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined; /** Defines the maximum allowed value for a range widget. */ "aria-valuemax"?: number | undefined; /** Defines the minimum allowed value for a range widget. */ "aria-valuemin"?: number | undefined; /** * Defines the current value for a range widget. * @see aria-valuetext. */ "aria-valuenow"?: number | undefined; /** Defines the human readable text alternative of aria-valuenow for a range widget. */ "aria-valuetext"?: string | undefined; } // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions type AriaRole = | "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | (string & {}); interface HTMLAttributes extends AriaAttributes, DOMAttributes { // React-specific Attributes defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; suppressHydrationWarning?: boolean | undefined; // Standard HTML Attributes accessKey?: string | undefined; autoFocus?: boolean | undefined; className?: string | undefined; contentEditable?: Booleanish | "inherit" | "plaintext-only" | undefined; contextMenu?: string | undefined; dir?: string | undefined; draggable?: Booleanish | undefined; hidden?: boolean | undefined; id?: string | undefined; lang?: string | undefined; nonce?: string | undefined; slot?: string | undefined; spellCheck?: Booleanish | undefined; style?: CSSProperties | undefined; tabIndex?: number | undefined; title?: string | undefined; translate?: "yes" | "no" | undefined; // Unknown radioGroup?: string | undefined; // , // WAI-ARIA role?: AriaRole | undefined; // RDFa Attributes about?: string | undefined; content?: string | undefined; datatype?: string | undefined; inlist?: any; prefix?: string | undefined; property?: string | undefined; rel?: string | undefined; resource?: string | undefined; rev?: string | undefined; typeof?: string | undefined; vocab?: string | undefined; // Non-standard Attributes autoCapitalize?: string | undefined; autoCorrect?: string | undefined; autoSave?: string | undefined; color?: string | undefined; itemProp?: string | undefined; itemScope?: boolean | undefined; itemType?: string | undefined; itemID?: string | undefined; itemRef?: string | undefined; results?: number | undefined; security?: string | undefined; unselectable?: "on" | "off" | undefined; // Living Standard /** * Hints at the type of data that might be entered by the user while editing the element or its contents * @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} */ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined; /** * Specify that a standard HTML element should behave like a defined custom built-in element * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is} */ is?: string | undefined; } /** * For internal usage only. * Different release channels declare additional types of ReactNode this particular release channel accepts. * App or library types should never augment this interface. */ interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {} interface AllHTMLAttributes extends HTMLAttributes { // Standard HTML Attributes accept?: string | undefined; acceptCharset?: string | undefined; action?: | string | undefined | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ]; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; as?: string | undefined; async?: boolean | undefined; autoComplete?: string | undefined; autoPlay?: boolean | undefined; capture?: boolean | "user" | "environment" | undefined; cellPadding?: number | string | undefined; cellSpacing?: number | string | undefined; charSet?: string | undefined; challenge?: string | undefined; checked?: boolean | undefined; cite?: string | undefined; classID?: string | undefined; cols?: number | undefined; colSpan?: number | undefined; controls?: boolean | undefined; coords?: string | undefined; crossOrigin?: CrossOrigin; data?: string | undefined; dateTime?: string | undefined; default?: boolean | undefined; defer?: boolean | undefined; disabled?: boolean | undefined; download?: any; encType?: string | undefined; form?: string | undefined; formAction?: | string | undefined | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ]; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; formTarget?: string | undefined; frameBorder?: number | string | undefined; headers?: string | undefined; height?: number | string | undefined; high?: number | undefined; href?: string | undefined; hrefLang?: string | undefined; htmlFor?: string | undefined; httpEquiv?: string | undefined; integrity?: string | undefined; keyParams?: string | undefined; keyType?: string | undefined; kind?: string | undefined; label?: string | undefined; list?: string | undefined; loop?: boolean | undefined; low?: number | undefined; manifest?: string | undefined; marginHeight?: number | undefined; marginWidth?: number | undefined; max?: number | string | undefined; maxLength?: number | undefined; media?: string | undefined; mediaGroup?: string | undefined; method?: string | undefined; min?: number | string | undefined; minLength?: number | undefined; multiple?: boolean | undefined; muted?: boolean | undefined; name?: string | undefined; noValidate?: boolean | undefined; open?: boolean | undefined; optimum?: number | undefined; pattern?: string | undefined; placeholder?: string | undefined; playsInline?: boolean | undefined; poster?: string | undefined; preload?: string | undefined; readOnly?: boolean | undefined; required?: boolean | undefined; reversed?: boolean | undefined; rows?: number | undefined; rowSpan?: number | undefined; sandbox?: string | undefined; scope?: string | undefined; scoped?: boolean | undefined; scrolling?: string | undefined; seamless?: boolean | undefined; selected?: boolean | undefined; shape?: string | undefined; size?: number | undefined; sizes?: string | undefined; span?: number | undefined; src?: string | undefined; srcDoc?: string | undefined; srcLang?: string | undefined; srcSet?: string | undefined; start?: number | undefined; step?: number | string | undefined; summary?: string | undefined; target?: string | undefined; type?: string | undefined; useMap?: string | undefined; value?: string | readonly string[] | number | undefined; width?: number | string | undefined; wmode?: string | undefined; wrap?: string | undefined; } type HTMLAttributeReferrerPolicy = | "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"; type HTMLAttributeAnchorTarget = | "_self" | "_blank" | "_parent" | "_top" | (string & {}); interface AnchorHTMLAttributes extends HTMLAttributes { download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; ping?: string | undefined; target?: HTMLAttributeAnchorTarget | undefined; type?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; } interface AudioHTMLAttributes extends MediaHTMLAttributes {} interface AreaHTMLAttributes extends HTMLAttributes { alt?: string | undefined; coords?: string | undefined; download?: any; href?: string | undefined; hrefLang?: string | undefined; media?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; shape?: string | undefined; target?: string | undefined; } interface BaseHTMLAttributes extends HTMLAttributes { href?: string | undefined; target?: string | undefined; } interface BlockquoteHTMLAttributes extends HTMLAttributes { cite?: string | undefined; } interface ButtonHTMLAttributes extends HTMLAttributes { disabled?: boolean | undefined; form?: string | undefined; formAction?: | string | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ] | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; formTarget?: string | undefined; name?: string | undefined; type?: "submit" | "reset" | "button" | undefined; value?: string | readonly string[] | number | undefined; } interface CanvasHTMLAttributes extends HTMLAttributes { height?: number | string | undefined; width?: number | string | undefined; } interface ColHTMLAttributes extends HTMLAttributes { span?: number | undefined; width?: number | string | undefined; } interface ColgroupHTMLAttributes extends HTMLAttributes { span?: number | undefined; } interface DataHTMLAttributes extends HTMLAttributes { value?: string | readonly string[] | number | undefined; } interface DetailsHTMLAttributes extends HTMLAttributes { open?: boolean | undefined; onToggle?: ReactEventHandler | undefined; name?: string | undefined; } interface DelHTMLAttributes extends HTMLAttributes { cite?: string | undefined; dateTime?: string | undefined; } interface DialogHTMLAttributes extends HTMLAttributes { onCancel?: ReactEventHandler | undefined; onClose?: ReactEventHandler | undefined; open?: boolean | undefined; } interface EmbedHTMLAttributes extends HTMLAttributes { height?: number | string | undefined; src?: string | undefined; type?: string | undefined; width?: number | string | undefined; } interface FieldsetHTMLAttributes extends HTMLAttributes { disabled?: boolean | undefined; form?: string | undefined; name?: string | undefined; } interface FormHTMLAttributes extends HTMLAttributes { acceptCharset?: string | undefined; action?: | string | undefined | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ]; autoComplete?: string | undefined; encType?: string | undefined; method?: string | undefined; name?: string | undefined; noValidate?: boolean | undefined; target?: string | undefined; } interface HtmlHTMLAttributes extends HTMLAttributes { manifest?: string | undefined; } interface IframeHTMLAttributes extends HTMLAttributes { allow?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; /** @deprecated */ frameBorder?: number | string | undefined; height?: number | string | undefined; loading?: "eager" | "lazy" | undefined; /** @deprecated */ marginHeight?: number | undefined; /** @deprecated */ marginWidth?: number | undefined; name?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; sandbox?: string | undefined; /** @deprecated */ scrolling?: string | undefined; seamless?: boolean | undefined; src?: string | undefined; srcDoc?: string | undefined; width?: number | string | undefined; } interface ImgHTMLAttributes extends HTMLAttributes { alt?: string | undefined; crossOrigin?: CrossOrigin; decoding?: "async" | "auto" | "sync" | undefined; fetchPriority?: "high" | "low" | "auto"; height?: number | string | undefined; loading?: "eager" | "lazy" | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; sizes?: string | undefined; src?: string | undefined; srcSet?: string | undefined; useMap?: string | undefined; width?: number | string | undefined; } interface InsHTMLAttributes extends HTMLAttributes { cite?: string | undefined; dateTime?: string | undefined; } type HTMLInputTypeAttribute = | "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week" | (string & {}); type AutoFillAddressKind = "billing" | "shipping"; type AutoFillBase = "" | "off" | "on"; type AutoFillContactField = | "email" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-local-prefix" | "tel-local-suffix" | "tel-national"; type AutoFillContactKind = "home" | "mobile" | "work"; type AutoFillCredentialField = "webauthn"; type AutoFillNormalField = | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday-day" | "bday-month" | "bday-year" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "new-password" | "one-time-code" | "organization" | "postal-code" | "street-address" | "transaction-amount" | "transaction-currency" | "username"; type OptionalPrefixToken = `${T} ` | ""; type OptionalPostfixToken = ` ${T}` | ""; type AutoFillField = AutoFillNormalField | `${OptionalPrefixToken}${AutoFillContactField}`; type AutoFillSection = `section-${string}`; type AutoFill = | AutoFillBase | `${OptionalPrefixToken}${OptionalPrefixToken< AutoFillAddressKind >}${AutoFillField}${OptionalPostfixToken}`; type HTMLInputAutoCompleteAttribute = AutoFill | (string & {}); interface InputHTMLAttributes extends HTMLAttributes { accept?: string | undefined; alt?: string | undefined; autoComplete?: HTMLInputAutoCompleteAttribute | undefined; capture?: boolean | "user" | "environment" | undefined; // https://www.w3.org/TR/html-media-capture/#the-capture-attribute checked?: boolean | undefined; disabled?: boolean | undefined; enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined; form?: string | undefined; formAction?: | string | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[ keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS ] | undefined; formEncType?: string | undefined; formMethod?: string | undefined; formNoValidate?: boolean | undefined; formTarget?: string | undefined; height?: number | string | undefined; list?: string | undefined; max?: number | string | undefined; maxLength?: number | undefined; min?: number | string | undefined; minLength?: number | undefined; multiple?: boolean | undefined; name?: string | undefined; pattern?: string | undefined; placeholder?: string | undefined; readOnly?: boolean | undefined; required?: boolean | undefined; size?: number | undefined; src?: string | undefined; step?: number | string | undefined; type?: HTMLInputTypeAttribute | undefined; value?: string | readonly string[] | number | undefined; width?: number | string | undefined; onChange?: ChangeEventHandler | undefined; } interface KeygenHTMLAttributes extends HTMLAttributes { challenge?: string | undefined; disabled?: boolean | undefined; form?: string | undefined; keyType?: string | undefined; keyParams?: string | undefined; name?: string | undefined; } interface LabelHTMLAttributes extends HTMLAttributes { form?: string | undefined; htmlFor?: string | undefined; } interface LiHTMLAttributes extends HTMLAttributes { value?: string | readonly string[] | number | undefined; } interface LinkHTMLAttributes extends HTMLAttributes { as?: string | undefined; crossOrigin?: CrossOrigin; fetchPriority?: "high" | "low" | "auto"; href?: string | undefined; hrefLang?: string | undefined; integrity?: string | undefined; media?: string | undefined; imageSrcSet?: string | undefined; imageSizes?: string | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; sizes?: string | undefined; type?: string | undefined; charSet?: string | undefined; } interface MapHTMLAttributes extends HTMLAttributes { name?: string | undefined; } interface MenuHTMLAttributes extends HTMLAttributes { type?: string | undefined; } interface MediaHTMLAttributes extends HTMLAttributes { autoPlay?: boolean | undefined; controls?: boolean | undefined; controlsList?: string | undefined; crossOrigin?: CrossOrigin; loop?: boolean | undefined; mediaGroup?: string | undefined; muted?: boolean | undefined; playsInline?: boolean | undefined; preload?: string | undefined; src?: string | undefined; } interface MetaHTMLAttributes extends HTMLAttributes { charSet?: string | undefined; content?: string | undefined; httpEquiv?: string | undefined; media?: string | undefined; name?: string | undefined; } interface MeterHTMLAttributes extends HTMLAttributes { form?: string | undefined; high?: number | undefined; low?: number | undefined; max?: number | string | undefined; min?: number | string | undefined; optimum?: number | undefined; value?: string | readonly string[] | number | undefined; } interface QuoteHTMLAttributes extends HTMLAttributes { cite?: string | undefined; } interface ObjectHTMLAttributes extends HTMLAttributes { classID?: string | undefined; data?: string | undefined; form?: string | undefined; height?: number | string | undefined; name?: string | undefined; type?: string | undefined; useMap?: string | undefined; width?: number | string | undefined; wmode?: string | undefined; } interface OlHTMLAttributes extends HTMLAttributes { reversed?: boolean | undefined; start?: number | undefined; type?: "1" | "a" | "A" | "i" | "I" | undefined; } interface OptgroupHTMLAttributes extends HTMLAttributes { disabled?: boolean | undefined; label?: string | undefined; } interface OptionHTMLAttributes extends HTMLAttributes { disabled?: boolean | undefined; label?: string | undefined; selected?: boolean | undefined; value?: string | readonly string[] | number | undefined; } interface OutputHTMLAttributes extends HTMLAttributes { form?: string | undefined; htmlFor?: string | undefined; name?: string | undefined; } interface ParamHTMLAttributes extends HTMLAttributes { name?: string | undefined; value?: string | readonly string[] | number | undefined; } interface ProgressHTMLAttributes extends HTMLAttributes { max?: number | string | undefined; value?: string | readonly string[] | number | undefined; } interface SlotHTMLAttributes extends HTMLAttributes { name?: string | undefined; } interface ScriptHTMLAttributes extends HTMLAttributes { async?: boolean | undefined; /** @deprecated */ charSet?: string | undefined; crossOrigin?: CrossOrigin; defer?: boolean | undefined; integrity?: string | undefined; noModule?: boolean | undefined; referrerPolicy?: HTMLAttributeReferrerPolicy | undefined; src?: string | undefined; type?: string | undefined; } interface SelectHTMLAttributes extends HTMLAttributes { autoComplete?: string | undefined; disabled?: boolean | undefined; form?: string | undefined; multiple?: boolean | undefined; name?: string | undefined; required?: boolean | undefined; size?: number | undefined; value?: string | readonly string[] | number | undefined; onChange?: ChangeEventHandler | undefined; } interface SourceHTMLAttributes extends HTMLAttributes { height?: number | string | undefined; media?: string | undefined; sizes?: string | undefined; src?: string | undefined; srcSet?: string | undefined; type?: string | undefined; width?: number | string | undefined; } interface StyleHTMLAttributes extends HTMLAttributes { media?: string | undefined; scoped?: boolean | undefined; type?: string | undefined; } interface TableHTMLAttributes extends HTMLAttributes { align?: "left" | "center" | "right" | undefined; bgcolor?: string | undefined; border?: number | undefined; cellPadding?: number | string | undefined; cellSpacing?: number | string | undefined; frame?: boolean | undefined; rules?: "none" | "groups" | "rows" | "columns" | "all" | undefined; summary?: string | undefined; width?: number | string | undefined; } interface TextareaHTMLAttributes extends HTMLAttributes { autoComplete?: string | undefined; cols?: number | undefined; dirName?: string | undefined; disabled?: boolean | undefined; form?: string | undefined; maxLength?: number | undefined; minLength?: number | undefined; name?: string | undefined; placeholder?: string | undefined; readOnly?: boolean | undefined; required?: boolean | undefined; rows?: number | undefined; value?: string | readonly string[] | number | undefined; wrap?: string | undefined; onChange?: ChangeEventHandler | undefined; } interface TdHTMLAttributes extends HTMLAttributes { align?: "left" | "center" | "right" | "justify" | "char" | undefined; colSpan?: number | undefined; headers?: string | undefined; rowSpan?: number | undefined; scope?: string | undefined; abbr?: string | undefined; height?: number | string | undefined; width?: number | string | undefined; valign?: "top" | "middle" | "bottom" | "baseline" | undefined; } interface ThHTMLAttributes extends HTMLAttributes { align?: "left" | "center" | "right" | "justify" | "char" | undefined; colSpan?: number | undefined; headers?: string | undefined; rowSpan?: number | undefined; scope?: string | undefined; abbr?: string | undefined; } interface TimeHTMLAttributes extends HTMLAttributes { dateTime?: string | undefined; } interface TrackHTMLAttributes extends HTMLAttributes { default?: boolean | undefined; kind?: string | undefined; label?: string | undefined; src?: string | undefined; srcLang?: string | undefined; } interface VideoHTMLAttributes extends MediaHTMLAttributes { height?: number | string | undefined; playsInline?: boolean | undefined; poster?: string | undefined; width?: number | string | undefined; disablePictureInPicture?: boolean | undefined; disableRemotePlayback?: boolean | undefined; } // 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 extends AriaAttributes, DOMAttributes { // React-specific Attributes suppressHydrationWarning?: boolean | undefined; // Attributes which also defined in HTMLAttributes // See comment in SVGDOMPropertyConfig.js className?: string | undefined; color?: string | undefined; height?: number | string | undefined; id?: string | undefined; lang?: string | undefined; max?: number | string | undefined; media?: string | undefined; method?: string | undefined; min?: number | string | undefined; name?: string | undefined; style?: CSSProperties | undefined; target?: string | undefined; type?: string | undefined; width?: number | string | undefined; // Other HTML properties supported by SVG elements in browsers role?: AriaRole | undefined; tabIndex?: number | undefined; crossOrigin?: CrossOrigin; // SVG Specific attributes accentHeight?: number | string | undefined; accumulate?: "none" | "sum" | undefined; additive?: "replace" | "sum" | undefined; alignmentBaseline?: | "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined; allowReorder?: "no" | "yes" | undefined; alphabetic?: number | string | undefined; amplitude?: number | string | undefined; arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined; ascent?: number | string | undefined; attributeName?: string | undefined; attributeType?: string | undefined; autoReverse?: Booleanish | undefined; azimuth?: number | string | undefined; baseFrequency?: number | string | undefined; baselineShift?: number | string | undefined; baseProfile?: number | string | undefined; bbox?: number | string | undefined; begin?: number | string | undefined; bias?: number | string | undefined; by?: number | string | undefined; calcMode?: number | string | undefined; capHeight?: number | string | undefined; clip?: number | string | undefined; clipPath?: string | undefined; clipPathUnits?: number | string | undefined; clipRule?: number | string | undefined; colorInterpolation?: number | string | undefined; colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined; colorProfile?: number | string | undefined; colorRendering?: number | string | undefined; contentScriptType?: number | string | undefined; contentStyleType?: number | string | undefined; cursor?: number | string | undefined; cx?: number | string | undefined; cy?: number | string | undefined; d?: string | undefined; decelerate?: number | string | undefined; descent?: number | string | undefined; diffuseConstant?: number | string | undefined; direction?: number | string | undefined; display?: number | string | undefined; divisor?: number | string | undefined; dominantBaseline?: number | string | undefined; dur?: number | string | undefined; dx?: number | string | undefined; dy?: number | string | undefined; edgeMode?: number | string | undefined; elevation?: number | string | undefined; enableBackground?: number | string | undefined; end?: number | string | undefined; exponent?: number | string | undefined; externalResourcesRequired?: Booleanish | undefined; fill?: string | undefined; fillOpacity?: number | string | undefined; fillRule?: "nonzero" | "evenodd" | "inherit" | undefined; filter?: string | undefined; filterRes?: number | string | undefined; filterUnits?: number | string | undefined; floodColor?: number | string | undefined; floodOpacity?: number | string | undefined; focusable?: Booleanish | "auto" | undefined; fontFamily?: string | undefined; fontSize?: number | string | undefined; fontSizeAdjust?: number | string | undefined; fontStretch?: number | string | undefined; fontStyle?: number | string | undefined; fontVariant?: number | string | undefined; fontWeight?: number | string | undefined; format?: number | string | undefined; fr?: number | string | undefined; from?: number | string | undefined; fx?: number | string | undefined; fy?: number | string | undefined; g1?: number | string | undefined; g2?: number | string | undefined; glyphName?: number | string | undefined; glyphOrientationHorizontal?: number | string | undefined; glyphOrientationVertical?: number | string | undefined; glyphRef?: number | string | undefined; gradientTransform?: string | undefined; gradientUnits?: string | undefined; hanging?: number | string | undefined; horizAdvX?: number | string | undefined; horizOriginX?: number | string | undefined; href?: string | undefined; ideographic?: number | string | undefined; imageRendering?: number | string | undefined; in2?: number | string | undefined; in?: string | undefined; intercept?: number | string | undefined; k1?: number | string | undefined; k2?: number | string | undefined; k3?: number | string | undefined; k4?: number | string | undefined; k?: number | string | undefined; kernelMatrix?: number | string | undefined; kernelUnitLength?: number | string | undefined; kerning?: number | string | undefined; keyPoints?: number | string | undefined; keySplines?: number | string | undefined; keyTimes?: number | string | undefined; lengthAdjust?: number | string | undefined; letterSpacing?: number | string | undefined; lightingColor?: number | string | undefined; limitingConeAngle?: number | string | undefined; local?: number | string | undefined; markerEnd?: string | undefined; markerHeight?: number | string | undefined; markerMid?: string | undefined; markerStart?: string | undefined; markerUnits?: number | string | undefined; markerWidth?: number | string | undefined; mask?: string | undefined; maskContentUnits?: number | string | undefined; maskUnits?: number | string | undefined; mathematical?: number | string | undefined; mode?: number | string | undefined; numOctaves?: number | string | undefined; offset?: number | string | undefined; opacity?: number | string | undefined; operator?: number | string | undefined; order?: number | string | undefined; orient?: number | string | undefined; orientation?: number | string | undefined; origin?: number | string | undefined; overflow?: number | string | undefined; overlinePosition?: number | string | undefined; overlineThickness?: number | string | undefined; paintOrder?: number | string | undefined; panose1?: number | string | undefined; path?: string | undefined; pathLength?: number | string | undefined; patternContentUnits?: string | undefined; patternTransform?: number | string | undefined; patternUnits?: string | undefined; pointerEvents?: number | string | undefined; points?: string | undefined; pointsAtX?: number | string | undefined; pointsAtY?: number | string | undefined; pointsAtZ?: number | string | undefined; preserveAlpha?: Booleanish | undefined; preserveAspectRatio?: string | undefined; primitiveUnits?: number | string | undefined; r?: number | string | undefined; radius?: number | string | undefined; refX?: number | string | undefined; refY?: number | string | undefined; renderingIntent?: number | string | undefined; repeatCount?: number | string | undefined; repeatDur?: number | string | undefined; requiredExtensions?: number | string | undefined; requiredFeatures?: number | string | undefined; restart?: number | string | undefined; result?: string | undefined; rotate?: number | string | undefined; rx?: number | string | undefined; ry?: number | string | undefined; scale?: number | string | undefined; seed?: number | string | undefined; shapeRendering?: number | string | undefined; slope?: number | string | undefined; spacing?: number | string | undefined; specularConstant?: number | string | undefined; specularExponent?: number | string | undefined; speed?: number | string | undefined; spreadMethod?: string | undefined; startOffset?: number | string | undefined; stdDeviation?: number | string | undefined; stemh?: number | string | undefined; stemv?: number | string | undefined; stitchTiles?: number | string | undefined; stopColor?: string | undefined; stopOpacity?: number | string | undefined; strikethroughPosition?: number | string | undefined; strikethroughThickness?: number | string | undefined; string?: number | string | undefined; stroke?: string | undefined; strokeDasharray?: string | number | undefined; strokeDashoffset?: string | number | undefined; strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined; strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined; strokeMiterlimit?: number | string | undefined; strokeOpacity?: number | string | undefined; strokeWidth?: number | string | undefined; surfaceScale?: number | string | undefined; systemLanguage?: number | string | undefined; tableValues?: number | string | undefined; targetX?: number | string | undefined; targetY?: number | string | undefined; textAnchor?: string | undefined; textDecoration?: number | string | undefined; textLength?: number | string | undefined; textRendering?: number | string | undefined; to?: number | string | undefined; transform?: string | undefined; u1?: number | string | undefined; u2?: number | string | undefined; underlinePosition?: number | string | undefined; underlineThickness?: number | string | undefined; unicode?: number | string | undefined; unicodeBidi?: number | string | undefined; unicodeRange?: number | string | undefined; unitsPerEm?: number | string | undefined; vAlphabetic?: number | string | undefined; values?: string | undefined; vectorEffect?: number | string | undefined; version?: string | undefined; vertAdvY?: number | string | undefined; vertOriginX?: number | string | undefined; vertOriginY?: number | string | undefined; vHanging?: number | string | undefined; vIdeographic?: number | string | undefined; viewBox?: string | undefined; viewTarget?: number | string | undefined; visibility?: number | string | undefined; vMathematical?: number | string | undefined; widths?: number | string | undefined; wordSpacing?: number | string | undefined; writingMode?: number | string | undefined; x1?: number | string | undefined; x2?: number | string | undefined; x?: number | string | undefined; xChannelSelector?: string | undefined; xHeight?: number | string | undefined; xlinkActuate?: string | undefined; xlinkArcrole?: string | undefined; xlinkHref?: string | undefined; xlinkRole?: string | undefined; xlinkShow?: string | undefined; xlinkTitle?: string | undefined; xlinkType?: string | undefined; xmlBase?: string | undefined; xmlLang?: string | undefined; xmlns?: string | undefined; xmlnsXlink?: string | undefined; xmlSpace?: string | undefined; y1?: number | string | undefined; y2?: number | string | undefined; y?: number | string | undefined; yChannelSelector?: string | undefined; z?: number | string | undefined; zoomAndPan?: string | undefined; } interface WebViewHTMLAttributes extends HTMLAttributes { allowFullScreen?: boolean | undefined; allowpopups?: boolean | undefined; autosize?: boolean | undefined; blinkfeatures?: string | undefined; disableblinkfeatures?: string | undefined; disableguestresize?: boolean | undefined; disablewebsecurity?: boolean | undefined; guestinstance?: string | undefined; httpreferrer?: string | undefined; nodeintegration?: boolean | undefined; partition?: string | undefined; plugins?: boolean | undefined; preload?: string | undefined; src?: string | undefined; useragent?: string | undefined; webpreferences?: string | undefined; } // // React.DOM // ---------------------------------------------------------------------- interface ReactHTML { a: DetailedHTMLFactory, HTMLAnchorElement>; abbr: DetailedHTMLFactory, HTMLElement>; address: DetailedHTMLFactory, HTMLElement>; area: DetailedHTMLFactory, HTMLAreaElement>; article: DetailedHTMLFactory, HTMLElement>; aside: DetailedHTMLFactory, HTMLElement>; audio: DetailedHTMLFactory, HTMLAudioElement>; b: DetailedHTMLFactory, HTMLElement>; base: DetailedHTMLFactory, HTMLBaseElement>; bdi: DetailedHTMLFactory, HTMLElement>; bdo: DetailedHTMLFactory, HTMLElement>; big: DetailedHTMLFactory, HTMLElement>; blockquote: DetailedHTMLFactory, HTMLQuoteElement>; body: DetailedHTMLFactory, HTMLBodyElement>; br: DetailedHTMLFactory, HTMLBRElement>; button: DetailedHTMLFactory, HTMLButtonElement>; canvas: DetailedHTMLFactory, HTMLCanvasElement>; caption: DetailedHTMLFactory, HTMLElement>; center: DetailedHTMLFactory, HTMLElement>; cite: DetailedHTMLFactory, HTMLElement>; code: DetailedHTMLFactory, HTMLElement>; col: DetailedHTMLFactory, HTMLTableColElement>; colgroup: DetailedHTMLFactory, HTMLTableColElement>; data: DetailedHTMLFactory, HTMLDataElement>; datalist: DetailedHTMLFactory, HTMLDataListElement>; dd: DetailedHTMLFactory, HTMLElement>; del: DetailedHTMLFactory, HTMLModElement>; details: DetailedHTMLFactory, HTMLDetailsElement>; dfn: DetailedHTMLFactory, HTMLElement>; dialog: DetailedHTMLFactory, HTMLDialogElement>; div: DetailedHTMLFactory, HTMLDivElement>; dl: DetailedHTMLFactory, HTMLDListElement>; dt: DetailedHTMLFactory, HTMLElement>; em: DetailedHTMLFactory, HTMLElement>; embed: DetailedHTMLFactory, HTMLEmbedElement>; fieldset: DetailedHTMLFactory, HTMLFieldSetElement>; figcaption: DetailedHTMLFactory, HTMLElement>; figure: DetailedHTMLFactory, HTMLElement>; footer: DetailedHTMLFactory, HTMLElement>; form: DetailedHTMLFactory, HTMLFormElement>; h1: DetailedHTMLFactory, HTMLHeadingElement>; h2: DetailedHTMLFactory, HTMLHeadingElement>; h3: DetailedHTMLFactory, HTMLHeadingElement>; h4: DetailedHTMLFactory, HTMLHeadingElement>; h5: DetailedHTMLFactory, HTMLHeadingElement>; h6: DetailedHTMLFactory, HTMLHeadingElement>; head: DetailedHTMLFactory, HTMLHeadElement>; header: DetailedHTMLFactory, HTMLElement>; hgroup: DetailedHTMLFactory, HTMLElement>; hr: DetailedHTMLFactory, HTMLHRElement>; html: DetailedHTMLFactory, HTMLHtmlElement>; i: DetailedHTMLFactory, HTMLElement>; iframe: DetailedHTMLFactory, HTMLIFrameElement>; img: DetailedHTMLFactory, HTMLImageElement>; input: DetailedHTMLFactory, HTMLInputElement>; ins: DetailedHTMLFactory, HTMLModElement>; kbd: DetailedHTMLFactory, HTMLElement>; keygen: DetailedHTMLFactory, HTMLElement>; label: DetailedHTMLFactory, HTMLLabelElement>; legend: DetailedHTMLFactory, HTMLLegendElement>; li: DetailedHTMLFactory, HTMLLIElement>; link: DetailedHTMLFactory, HTMLLinkElement>; main: DetailedHTMLFactory, HTMLElement>; map: DetailedHTMLFactory, HTMLMapElement>; mark: DetailedHTMLFactory, HTMLElement>; menu: DetailedHTMLFactory, HTMLElement>; menuitem: DetailedHTMLFactory, HTMLElement>; meta: DetailedHTMLFactory, HTMLMetaElement>; meter: DetailedHTMLFactory, HTMLMeterElement>; nav: DetailedHTMLFactory, HTMLElement>; noscript: DetailedHTMLFactory, HTMLElement>; object: DetailedHTMLFactory, HTMLObjectElement>; ol: DetailedHTMLFactory, HTMLOListElement>; optgroup: DetailedHTMLFactory, HTMLOptGroupElement>; option: DetailedHTMLFactory, HTMLOptionElement>; output: DetailedHTMLFactory, HTMLOutputElement>; p: DetailedHTMLFactory, HTMLParagraphElement>; param: DetailedHTMLFactory, HTMLParamElement>; picture: DetailedHTMLFactory, HTMLElement>; pre: DetailedHTMLFactory, HTMLPreElement>; progress: DetailedHTMLFactory, HTMLProgressElement>; q: DetailedHTMLFactory, HTMLQuoteElement>; rp: DetailedHTMLFactory, HTMLElement>; rt: DetailedHTMLFactory, HTMLElement>; ruby: DetailedHTMLFactory, HTMLElement>; s: DetailedHTMLFactory, HTMLElement>; samp: DetailedHTMLFactory, HTMLElement>; search: DetailedHTMLFactory, HTMLElement>; slot: DetailedHTMLFactory, HTMLSlotElement>; script: DetailedHTMLFactory, HTMLScriptElement>; section: DetailedHTMLFactory, HTMLElement>; select: DetailedHTMLFactory, HTMLSelectElement>; small: DetailedHTMLFactory, HTMLElement>; source: DetailedHTMLFactory, HTMLSourceElement>; span: DetailedHTMLFactory, HTMLSpanElement>; strong: DetailedHTMLFactory, HTMLElement>; style: DetailedHTMLFactory, HTMLStyleElement>; sub: DetailedHTMLFactory, HTMLElement>; summary: DetailedHTMLFactory, HTMLElement>; sup: DetailedHTMLFactory, HTMLElement>; table: DetailedHTMLFactory, HTMLTableElement>; template: DetailedHTMLFactory, HTMLTemplateElement>; tbody: DetailedHTMLFactory, HTMLTableSectionElement>; td: DetailedHTMLFactory, HTMLTableDataCellElement>; textarea: DetailedHTMLFactory, HTMLTextAreaElement>; tfoot: DetailedHTMLFactory, HTMLTableSectionElement>; th: DetailedHTMLFactory, HTMLTableHeaderCellElement>; thead: DetailedHTMLFactory, HTMLTableSectionElement>; time: DetailedHTMLFactory, HTMLTimeElement>; title: DetailedHTMLFactory, HTMLTitleElement>; tr: DetailedHTMLFactory, HTMLTableRowElement>; track: DetailedHTMLFactory, HTMLTrackElement>; u: DetailedHTMLFactory, HTMLElement>; ul: DetailedHTMLFactory, HTMLUListElement>; "var": DetailedHTMLFactory, HTMLElement>; video: DetailedHTMLFactory, HTMLVideoElement>; wbr: DetailedHTMLFactory, HTMLElement>; webview: DetailedHTMLFactory, 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 // ---------------------------------------------------------------------- /** * @deprecated Use `Validator` from the ´prop-types` instead. */ type Validator = PropTypes.Validator; /** * @deprecated Use `Requireable` from the ´prop-types` instead. */ type Requireable = PropTypes.Requireable; /** * @deprecated Use `ValidationMap` from the ´prop-types` instead. */ type ValidationMap = PropTypes.ValidationMap; /** * @deprecated Use `WeakValidationMap` from the ´prop-types` instead. */ type WeakValidationMap = { [K in keyof T]?: null extends T[K] ? Validator : undefined extends T[K] ? Validator : Validator; }; /** * @deprecated Use `PropTypes.*` where `PropTypes` comes from `import * as PropTypes from 'prop-types'` instead. */ 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 // ---------------------------------------------------------------------- /** * @deprecated - Use `typeof React.Children` instead. */ // Sync with type of `const Children`. interface ReactChildren { map( children: C | readonly C[], fn: (child: C, index: number) => T, ): C extends null | undefined ? C : Array>; forEach(children: C | readonly C[], fn: (child: C, index: number) => void): void; count(children: any): number; only(children: C): C extends any[] ? never : C; toArray(children: ReactNode | ReactNode[]): Array>; } // // 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 | null; digest?: string | null; } // Keep in sync with JSX namespace in ./jsx-runtime.d.ts and ./jsx-dev-runtime.d.ts namespace JSX { type ElementType = GlobalJSXElementType; interface Element extends GlobalJSXElement {} interface ElementClass extends GlobalJSXElementClass {} interface ElementAttributesProperty extends GlobalJSXElementAttributesProperty {} interface ElementChildrenAttribute extends GlobalJSXElementChildrenAttribute {} type LibraryManagedAttributes = GlobalJSXLibraryManagedAttributes; interface IntrinsicAttributes extends GlobalJSXIntrinsicAttributes {} interface IntrinsicClassAttributes extends GlobalJSXIntrinsicClassAttributes {} interface IntrinsicElements extends GlobalJSXIntrinsicElements {} } } // 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 = boolean extends (T extends never ? true : false) ? true : false; type ExactlyAnyPropertyKeys = { [K in keyof T]: IsExactlyAny extends true ? K : never }[keyof T]; type NotExactlyAnyPropertyKeys = Exclude>; // Try to resolve ill-defined props like for JS users: props can be any, or sometimes objects with properties of type any type MergePropTypes = // Distribute over P in case it is a union type P extends any // If props is type any, use propTypes definitions ? IsExactlyAny
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> // For props which are exactly any, use the type inferred from propTypes if present & Pick>> // Keep leftover props not specified in propTypes & Pick> : never; type InexactPartial = { [K in keyof T]?: T[K] | undefined }; // 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 extends any ? string extends keyof P ? P : & Pick> & InexactPartial>> & InexactPartial>> : never; type ReactManagedAttributes = C extends { propTypes: infer T; defaultProps: infer D } ? Defaultize>, D> : C extends { propTypes: infer T } ? MergePropTypes> : C extends { defaultProps: infer D } ? Defaultize : P; declare global { /** * @deprecated Use `React.JSX` instead of the global `JSX` namespace. */ namespace JSX { // We don't just alias React.ElementType because React.ElementType // historically does more than we need it to. // E.g. it also contains .propTypes and so TS also verifies the declared // props type does match the declared .propTypes. // But if libraries declared their .propTypes but not props type, // or they mismatch, you won't be able to use the class component // as a JSX.ElementType. // We could fix this everywhere but we're ultimately not interested in // .propTypes assignability so we might as well drop it entirely here to // reduce the work of the type-checker. // TODO: Check impact of making React.ElementType
~~= React.JSXElementConstructor~~
type ElementType = string | React.JSXElementConstructor; interface Element extends React.ReactElement {} interface ElementClass extends React.Component { 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 extends React.MemoExoticComponent | React.LazyExoticComponent ? T extends React.MemoExoticComponent | React.LazyExoticComponent ? ReactManagedAttributes : ReactManagedAttributes : ReactManagedAttributes; interface IntrinsicAttributes extends React.Attributes {} interface IntrinsicClassAttributes extends React.ClassAttributes {} interface IntrinsicElements { // HTML a: React.DetailedHTMLProps, HTMLAnchorElement>; abbr: React.DetailedHTMLProps, HTMLElement>; address: React.DetailedHTMLProps, HTMLElement>; area: React.DetailedHTMLProps, HTMLAreaElement>; article: React.DetailedHTMLProps, HTMLElement>; aside: React.DetailedHTMLProps, HTMLElement>; audio: React.DetailedHTMLProps, HTMLAudioElement>; b: React.DetailedHTMLProps, HTMLElement>; base: React.DetailedHTMLProps, HTMLBaseElement>; bdi: React.DetailedHTMLProps, HTMLElement>; bdo: React.DetailedHTMLProps, HTMLElement>; big: React.DetailedHTMLProps, HTMLElement>; blockquote: React.DetailedHTMLProps, HTMLQuoteElement>; body: React.DetailedHTMLProps, HTMLBodyElement>; br: React.DetailedHTMLProps, HTMLBRElement>; button: React.DetailedHTMLProps, HTMLButtonElement>; canvas: React.DetailedHTMLProps, HTMLCanvasElement>; caption: React.DetailedHTMLProps, HTMLElement>; center: React.DetailedHTMLProps, HTMLElement>; cite: React.DetailedHTMLProps, HTMLElement>; code: React.DetailedHTMLProps, HTMLElement>; col: React.DetailedHTMLProps, HTMLTableColElement>; colgroup: React.DetailedHTMLProps, HTMLTableColElement>; data: React.DetailedHTMLProps, HTMLDataElement>; datalist: React.DetailedHTMLProps, HTMLDataListElement>; dd: React.DetailedHTMLProps, HTMLElement>; del: React.DetailedHTMLProps, HTMLModElement>; details: React.DetailedHTMLProps, HTMLDetailsElement>; dfn: React.DetailedHTMLProps, HTMLElement>; dialog: React.DetailedHTMLProps, HTMLDialogElement>; div: React.DetailedHTMLProps, HTMLDivElement>; dl: React.DetailedHTMLProps, HTMLDListElement>; dt: React.DetailedHTMLProps, HTMLElement>; em: React.DetailedHTMLProps, HTMLElement>; embed: React.DetailedHTMLProps, HTMLEmbedElement>; fieldset: React.DetailedHTMLProps, HTMLFieldSetElement>; figcaption: React.DetailedHTMLProps, HTMLElement>; figure: React.DetailedHTMLProps, HTMLElement>; footer: React.DetailedHTMLProps, HTMLElement>; form: React.DetailedHTMLProps, HTMLFormElement>; h1: React.DetailedHTMLProps, HTMLHeadingElement>; h2: React.DetailedHTMLProps, HTMLHeadingElement>; h3: React.DetailedHTMLProps, HTMLHeadingElement>; h4: React.DetailedHTMLProps, HTMLHeadingElement>; h5: React.DetailedHTMLProps, HTMLHeadingElement>; h6: React.DetailedHTMLProps, HTMLHeadingElement>; head: React.DetailedHTMLProps, HTMLHeadElement>; header: React.DetailedHTMLProps, HTMLElement>; hgroup: React.DetailedHTMLProps, HTMLElement>; hr: React.DetailedHTMLProps, HTMLHRElement>; html: React.DetailedHTMLProps, HTMLHtmlElement>; i: React.DetailedHTMLProps, HTMLElement>; iframe: React.DetailedHTMLProps, HTMLIFrameElement>; img: React.DetailedHTMLProps, HTMLImageElement>; input: React.DetailedHTMLProps, HTMLInputElement>; ins: React.DetailedHTMLProps, HTMLModElement>; kbd: React.DetailedHTMLProps, HTMLElement>; keygen: React.DetailedHTMLProps, HTMLElement>; label: React.DetailedHTMLProps, HTMLLabelElement>; legend: React.DetailedHTMLProps, HTMLLegendElement>; li: React.DetailedHTMLProps, HTMLLIElement>; link: React.DetailedHTMLProps, HTMLLinkElement>; main: React.DetailedHTMLProps, HTMLElement>; map: React.DetailedHTMLProps, HTMLMapElement>; mark: React.DetailedHTMLProps, HTMLElement>; menu: React.DetailedHTMLProps, HTMLElement>; menuitem: React.DetailedHTMLProps, HTMLElement>; meta: React.DetailedHTMLProps, HTMLMetaElement>; meter: React.DetailedHTMLProps, HTMLMeterElement>; nav: React.DetailedHTMLProps, HTMLElement>; noindex: React.DetailedHTMLProps, HTMLElement>; noscript: React.DetailedHTMLProps, HTMLElement>; object: React.DetailedHTMLProps, HTMLObjectElement>; ol: React.DetailedHTMLProps, HTMLOListElement>; optgroup: React.DetailedHTMLProps, HTMLOptGroupElement>; option: React.DetailedHTMLProps, HTMLOptionElement>; output: React.DetailedHTMLProps, HTMLOutputElement>; p: React.DetailedHTMLProps, HTMLParagraphElement>; param: React.DetailedHTMLProps, HTMLParamElement>; picture: React.DetailedHTMLProps, HTMLElement>; pre: React.DetailedHTMLProps, HTMLPreElement>; progress: React.DetailedHTMLProps, HTMLProgressElement>; q: React.DetailedHTMLProps, HTMLQuoteElement>; rp: React.DetailedHTMLProps, HTMLElement>; rt: React.DetailedHTMLProps, HTMLElement>; ruby: React.DetailedHTMLProps, HTMLElement>; s: React.DetailedHTMLProps, HTMLElement>; samp: React.DetailedHTMLProps, HTMLElement>; search: React.DetailedHTMLProps, HTMLElement>; slot: React.DetailedHTMLProps, HTMLSlotElement>; script: React.DetailedHTMLProps, HTMLScriptElement>; section: React.DetailedHTMLProps, HTMLElement>; select: React.DetailedHTMLProps, HTMLSelectElement>; small: React.DetailedHTMLProps, HTMLElement>; source: React.DetailedHTMLProps, HTMLSourceElement>; span: React.DetailedHTMLProps, HTMLSpanElement>; strong: React.DetailedHTMLProps, HTMLElement>; style: React.DetailedHTMLProps, HTMLStyleElement>; sub: React.DetailedHTMLProps, HTMLElement>; summary: React.DetailedHTMLProps, HTMLElement>; sup: React.DetailedHTMLProps, HTMLElement>; table: React.DetailedHTMLProps, HTMLTableElement>; template: React.DetailedHTMLProps, HTMLTemplateElement>; tbody: React.DetailedHTMLProps, HTMLTableSectionElement>; td: React.DetailedHTMLProps, HTMLTableDataCellElement>; textarea: React.DetailedHTMLProps, HTMLTextAreaElement>; tfoot: React.DetailedHTMLProps, HTMLTableSectionElement>; th: React.DetailedHTMLProps, HTMLTableHeaderCellElement>; thead: React.DetailedHTMLProps, HTMLTableSectionElement>; time: React.DetailedHTMLProps, HTMLTimeElement>; title: React.DetailedHTMLProps, HTMLTitleElement>; tr: React.DetailedHTMLProps, HTMLTableRowElement>; track: React.DetailedHTMLProps, HTMLTrackElement>; u: React.DetailedHTMLProps, HTMLElement>; ul: React.DetailedHTMLProps, HTMLUListElement>; "var": React.DetailedHTMLProps, HTMLElement>; video: React.DetailedHTMLProps, HTMLVideoElement>; wbr: React.DetailedHTMLProps, HTMLElement>; webview: React.DetailedHTMLProps, HTMLWebViewElement>; // SVG svg: React.SVGProps; animate: React.SVGProps; // TODO: It is SVGAnimateElement but is not in TypeScript's lib.dom.d.ts for now. animateMotion: React.SVGProps; animateTransform: React.SVGProps; // TODO: It is SVGAnimateTransformElement but is not in TypeScript's lib.dom.d.ts for now. circle: React.SVGProps; clipPath: React.SVGProps; defs: React.SVGProps; desc: React.SVGProps; ellipse: React.SVGProps; feBlend: React.SVGProps; feColorMatrix: React.SVGProps; feComponentTransfer: React.SVGProps; feComposite: React.SVGProps; feConvolveMatrix: React.SVGProps; feDiffuseLighting: React.SVGProps; feDisplacementMap: React.SVGProps; feDistantLight: React.SVGProps; feDropShadow: React.SVGProps; feFlood: React.SVGProps; feFuncA: React.SVGProps; feFuncB: React.SVGProps; feFuncG: React.SVGProps; feFuncR: React.SVGProps; feGaussianBlur: React.SVGProps; feImage: React.SVGProps; feMerge: React.SVGProps; feMergeNode: React.SVGProps; feMorphology: React.SVGProps; feOffset: React.SVGProps; fePointLight: React.SVGProps; feSpecularLighting: React.SVGProps; feSpotLight: React.SVGProps; feTile: React.SVGProps; feTurbulence: React.SVGProps; filter: React.SVGProps; foreignObject: React.SVGProps; g: React.SVGProps; image: React.SVGProps; line: React.SVGLineElementAttributes; linearGradient: React.SVGProps; marker: React.SVGProps; mask: React.SVGProps; metadata: React.SVGProps; mpath: React.SVGProps; path: React.SVGProps; pattern: React.SVGProps; polygon: React.SVGProps; polyline: React.SVGProps; radialGradient: React.SVGProps; rect: React.SVGProps; set: React.SVGProps; stop: React.SVGProps; switch: React.SVGProps; symbol: React.SVGProps; text: React.SVGTextElementAttributes; textPath: React.SVGProps; tspan: React.SVGProps; use: React.SVGProps; view: React.SVGProps; } } } // React.JSX needs to point to global.JSX to keep global module augmentations intact. // But we can't access global.JSX so we need to create these aliases instead. // Once the global JSX namespace will be removed we replace React.JSX with the contents of global.JSX type GlobalJSXElementType = JSX.ElementType; interface GlobalJSXElement extends JSX.Element {} interface GlobalJSXElementClass extends JSX.ElementClass {} interface GlobalJSXElementAttributesProperty extends JSX.ElementAttributesProperty {} interface GlobalJSXElementChildrenAttribute extends JSX.ElementChildrenAttribute {} type GlobalJSXLibraryManagedAttributes = JSX.LibraryManagedAttributes; interface GlobalJSXIntrinsicAttributes extends JSX.IntrinsicAttributes {} interface GlobalJSXIntrinsicClassAttributes extends JSX.IntrinsicClassAttributes {} interface GlobalJSXIntrinsicElements extends JSX.IntrinsicElements {}

Blog.