AK-21/Graphite-Industrial-Intelligence
0
1// NOTE: Users of the `experimental` builds of React should add a reference2// to 'react/experimental' in their project. See experimental.d.ts's top comment3// for reference and documentation on how exactly to do it.4 5/// <reference path="global.d.ts" />6 7import * as CSS from "csstype";8 9type NativeAnimationEvent = AnimationEvent;10type NativeClipboardEvent = ClipboardEvent;11type NativeCompositionEvent = CompositionEvent;12type NativeDragEvent = DragEvent;13type NativeFocusEvent = FocusEvent;14type NativeInputEvent = InputEvent;15type NativeKeyboardEvent = KeyboardEvent;16type NativeMouseEvent = MouseEvent;17type NativeTouchEvent = TouchEvent;18type NativePointerEvent = PointerEvent;19type NativeSubmitEvent = SubmitEvent;20type NativeToggleEvent = ToggleEvent;21type NativeTransitionEvent = TransitionEvent;22type NativeUIEvent = UIEvent;23type NativeWheelEvent = WheelEvent;24 25/**26 * Used to represent DOM API's where users can either pass27 * true or false as a boolean or as its equivalent strings.28 */29type Booleanish = boolean | "true" | "false";30 31/**32 * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}33 */34type CrossOrigin = "anonymous" | "use-credentials" | "" | undefined;35 36declare const UNDEFINED_VOID_ONLY: unique symbol;37 38/**39 * @internal Use `Awaited<ReactNode>` instead40 */41// Helper type to enable `Awaited<ReactNode>`.42// Must be a copy of the non-thenables of `ReactNode`.43type AwaitedReactNode =44 | React.ReactElement45 | string46 | number47 | bigint48 | Iterable<React.ReactNode>49 | React.ReactPortal50 | boolean51 | null52 | undefined53 | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[54 keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES55 ];56 57/**58 * The function returned from an effect passed to {@link React.useEffect useEffect},59 * which can be used to clean up the effect when the component unmounts.60 *61 * @see {@link https://react.dev/reference/react/useEffect React Docs}62 */63type Destructor = () => void | { [UNDEFINED_VOID_ONLY]: never };64type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never };65 66// eslint-disable-next-line @definitelytyped/export-just-namespace67export = React;68export as namespace React;69 70declare namespace React {71 //72 // React Elements73 // ----------------------------------------------------------------------74 75 /**76 * Used to retrieve the possible components which accept a given set of props.77 *78 * Can be passed no type parameters to get a union of all possible components79 * and tags.80 *81 * Is a superset of {@link ComponentType}.82 *83 * @template P The props to match against. If not passed, defaults to any.84 * @template Tag An optional tag to match against. If not passed, attempts to match against all possible tags.85 *86 * @example87 *88 * ```tsx89 * // All components and tags (img, embed etc.)90 * // which accept `src`91 * type SrcComponents = ElementType<{ src: any }>;92 * ```93 *94 * @example95 *96 * ```tsx97 * // All components98 * type AllComponents = ElementType;99 * ```100 *101 * @example102 *103 * ```tsx104 * // All custom components which match `src`, and tags which105 * // match `src`, narrowed down to just `audio` and `embed`106 * type SrcComponents = ElementType<{ src: any }, 'audio' | 'embed'>;107 * ```108 */109 type ElementType<P = any, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> =110 | { [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never }[Tag]111 | ComponentType<P>;112 113 /**114 * Represents any user-defined component, either as a function or a class.115 *116 * Similar to {@link JSXElementConstructor}, but with extra properties like117 * {@link FunctionComponent.defaultProps defaultProps }.118 *119 * @template P The props the component accepts.120 *121 * @see {@link ComponentClass}122 * @see {@link FunctionComponent}123 */124 type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;125 126 /**127 * Represents any user-defined component, either as a function or a class.128 *129 * Similar to {@link ComponentType}, but without extra properties like130 * {@link FunctionComponent.defaultProps defaultProps }.131 *132 * @template P The props the component accepts.133 */134 type JSXElementConstructor<P> =135 | ((136 props: P,137 ) => ReactNode | Promise<ReactNode>)138 // constructor signature must match React.Component139 | (new(props: P, context: any) => Component<any, any>);140 141 /**142 * Created by {@link createRef}, or {@link useRef} when passed `null`.143 *144 * @template T The type of the ref's value.145 *146 * @example147 *148 * ```tsx149 * const ref = createRef<HTMLDivElement>();150 *151 * ref.current = document.createElement('div'); // Error152 * ```153 */154 interface RefObject<T> {155 /**156 * The current value of the ref.157 */158 current: T;159 }160 161 interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES {162 }163 /**164 * A callback fired whenever the ref's value changes.165 *166 * @template T The type of the ref's value.167 *168 * @see {@link https://react.dev/reference/react-dom/components/common#ref-callback React Docs}169 *170 * @example171 *172 * ```tsx173 * <div ref={(node) => console.log(node)} />174 * ```175 */176 type RefCallback<T> = {177 bivarianceHack(178 instance: T | null,179 ):180 | void181 | (() => VoidOrUndefinedOnly)182 | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[183 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES184 ];185 }["bivarianceHack"];186 187 /**188 * A union type of all possible shapes for React refs.189 *190 * @see {@link RefCallback}191 * @see {@link RefObject}192 */193 194 type Ref<T> = RefCallback<T> | RefObject<T | null> | null;195 /**196 * @deprecated Use `Ref` instead. String refs are no longer supported.197 * If you're typing a library with support for React versions with string refs, use `RefAttributes<T>['ref']` instead.198 */199 type LegacyRef<T> = Ref<T>;200 /**201 * @deprecated Use `ComponentRef<T>` instead202 *203 * Retrieves the type of the 'ref' prop for a given component type or tag name.204 *205 * @template C The component type.206 *207 * @example208 *209 * ```tsx210 * type MyComponentRef = React.ElementRef<typeof MyComponent>;211 * ```212 *213 * @example214 *215 * ```tsx216 * type DivRef = React.ElementRef<'div'>;217 * ```218 */219 type ElementRef<220 C extends221 | ForwardRefExoticComponent<any>222 | { new(props: any, context: any): Component<any> }223 | ((props: any) => ReactNode)224 | keyof JSX.IntrinsicElements,225 > = ComponentRef<C>;226 227 type ComponentState = any;228 229 interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES {}230 231 /**232 * A value which uniquely identifies a node among items in an array.233 *234 * @see {@link https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key React Docs}235 */236 type Key =237 | string238 | number239 | bigint240 | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES[241 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_KEY_TYPES242 ];243 244 /**245 * @internal The props any component can receive.246 * You don't have to add this type. All components automatically accept these props.247 * ```tsx248 * const Component = () => <div />;249 * <Component key="one" />250 * ```251 *252 * WARNING: The implementation of a component will never have access to these attributes.253 * The following example would be incorrect usage because {@link Component} would never have access to `key`:254 * ```tsx255 * const Component = (props: React.Attributes) => props.key;256 * ```257 */258 interface Attributes {259 key?: Key | null | undefined;260 }261 /**262 * The props any component accepting refs can receive.263 * Class components, built-in browser components (e.g. `div`) and forwardRef components can receive refs and automatically accept these props.264 * ```tsx265 * const Component = forwardRef(() => <div />);266 * <Component ref={(current) => console.log(current)} />267 * ```268 *269 * You only need this type if you manually author the types of props that need to be compatible with legacy refs.270 * ```tsx271 * interface Props extends React.RefAttributes<HTMLDivElement> {}272 * declare const Component: React.FunctionComponent<Props>;273 * ```274 *275 * Otherwise it's simpler to directly use {@link Ref} since you can safely use the276 * props type to describe to props that a consumer can pass to the component277 * as well as describing the props the implementation of a component "sees".278 * {@link RefAttributes} is generally not safe to describe both consumer and seen props.279 *280 * ```tsx281 * interface Props extends {282 * ref?: React.Ref<HTMLDivElement> | undefined;283 * }284 * declare const Component: React.FunctionComponent<Props>;285 * ```286 *287 * WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs.288 * The following example would be incorrect usage because {@link Component} would never have access to a `ref` with type `string`289 * ```tsx290 * const Component = (props: React.RefAttributes) => props.ref;291 * ```292 */293 interface RefAttributes<T> extends Attributes {294 /**295 * Allows getting a ref to the component instance.296 * Once the component unmounts, React will set `ref.current` to `null`297 * (or call the ref with `null` if you passed a callback ref).298 *299 * @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}300 */301 ref?: Ref<T> | undefined;302 }303 304 /**305 * Represents the built-in attributes available to class components.306 */307 interface ClassAttributes<T> extends RefAttributes<T> {308 }309 310 /**311 * Represents a JSX element.312 *313 * Where {@link ReactNode} represents everything that can be rendered, `ReactElement`314 * only represents JSX.315 *316 * @template P The type of the props object317 * @template T The type of the component or tag318 *319 * @example320 *321 * ```tsx322 * const element: ReactElement = <div />;323 * ```324 */325 interface ReactElement<326 P = unknown,327 T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,328 > {329 type: T;330 props: P;331 key: string | null;332 }333 334 /**335 * @deprecated336 */337 interface ReactComponentElement<338 T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,339 P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, "key" | "ref">>,340 > extends ReactElement<P, Exclude<T, number>> {}341 342 /**343 * @deprecated Use `ReactElement<P, React.FunctionComponent<P>>`344 */345 interface FunctionComponentElement<P> extends ReactElement<P, FunctionComponent<P>> {346 /**347 * @deprecated Use `element.props.ref` instead.348 */349 ref?: ("ref" extends keyof P ? P extends { ref?: infer R | undefined } ? R : never : never) | undefined;350 }351 352 /**353 * @deprecated Use `ReactElement<P, React.ComponentClass<P>>`354 */355 type CElement<P, T extends Component<P, ComponentState>> = ComponentElement<P, T>;356 /**357 * @deprecated Use `ReactElement<P, React.ComponentClass<P>>`358 */359 interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P, ComponentClass<P>> {360 /**361 * @deprecated Use `element.props.ref` instead.362 */363 ref?: Ref<T> | undefined;364 }365 366 /**367 * @deprecated Use {@link ComponentElement} instead.368 */369 type ClassicElement<P> = CElement<P, ClassicComponent<P, ComponentState>>;370 371 // string fallback for custom web-components372 /**373 * @deprecated Use `ReactElement<P, string>`374 */375 interface DOMElement<P extends HTMLAttributes<T> | SVGAttributes<T>, T extends Element>376 extends ReactElement<P, string>377 {378 /**379 * @deprecated Use `element.props.ref` instead.380 */381 ref: Ref<T>;382 }383 384 // ReactHTML for ReactHTMLElement385 interface ReactHTMLElement<T extends HTMLElement> extends DetailedReactHTMLElement<AllHTMLAttributes<T>, T> {}386 387 interface DetailedReactHTMLElement<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> {388 type: HTMLElementType;389 }390 391 // ReactSVG for ReactSVGElement392 interface ReactSVGElement extends DOMElement<SVGAttributes<SVGElement>, SVGElement> {393 type: SVGElementType;394 }395 396 interface ReactPortal extends ReactElement {397 children: ReactNode;398 }399 400 /**401 * Different release channels declare additional types of ReactNode this particular release channel accepts.402 * App or library types should never augment this interface.403 */404 interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}405 406 /**407 * Represents all of the things React can render.408 *409 * Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.410 *411 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/reference/reactnode/ React TypeScript Cheatsheet}412 *413 * @example414 *415 * ```tsx416 * // Typing children417 * type Props = { children: ReactNode }418 *419 * const Component = ({ children }: Props) => <div>{children}</div>420 *421 * <Component>hello</Component>422 * ```423 *424 * @example425 *426 * ```tsx427 * // Typing a custom element428 * type Props = { customElement: ReactNode }429 *430 * const Component = ({ customElement }: Props) => <div>{customElement}</div>431 *432 * <Component customElement={<div>hello</div>} />433 * ```434 */435 // non-thenables need to be kept in sync with AwaitedReactNode436 type ReactNode =437 | ReactElement438 | string439 | number440 | bigint441 | Iterable<ReactNode>442 | ReactPortal443 | boolean444 | null445 | undefined446 | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[447 keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES448 ]449 | Promise<AwaitedReactNode>;450 451 //452 // Top Level API453 // ----------------------------------------------------------------------454 455 // DOM Elements456 // TODO: generalize this to everything in `keyof ReactHTML`, not just "input"457 function createElement(458 type: "input",459 props?: InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement> | null,460 ...children: ReactNode[]461 ): DetailedReactHTMLElement<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;462 function createElement<P extends HTMLAttributes<T>, T extends HTMLElement>(463 type: HTMLElementType,464 props?: ClassAttributes<T> & P | null,465 ...children: ReactNode[]466 ): DetailedReactHTMLElement<P, T>;467 function createElement<P extends SVGAttributes<T>, T extends SVGElement>(468 type: SVGElementType,469 props?: ClassAttributes<T> & P | null,470 ...children: ReactNode[]471 ): ReactSVGElement;472 function createElement<P extends DOMAttributes<T>, T extends Element>(473 type: string,474 props?: ClassAttributes<T> & P | null,475 ...children: ReactNode[]476 ): DOMElement<P, T>;477 478 // Custom components479 480 function createElement<P extends {}>(481 type: FunctionComponent<P>,482 props?: Attributes & P | null,483 ...children: ReactNode[]484 ): FunctionComponentElement<P>;485 function createElement<P extends {}, T extends Component<P, ComponentState>, C extends ComponentClass<P>>(486 type: ClassType<P, T, C>,487 props?: ClassAttributes<T> & P | null,488 ...children: ReactNode[]489 ): CElement<P, T>;490 function createElement<P extends {}>(491 type: FunctionComponent<P> | ComponentClass<P> | string,492 props?: Attributes & P | null,493 ...children: ReactNode[]494 ): ReactElement<P>;495 496 // DOM Elements497 // ReactHTMLElement498 function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(499 element: DetailedReactHTMLElement<P, T>,500 props?: P,501 ...children: ReactNode[]502 ): DetailedReactHTMLElement<P, T>;503 // ReactHTMLElement, less specific504 function cloneElement<P extends HTMLAttributes<T>, T extends HTMLElement>(505 element: ReactHTMLElement<T>,506 props?: P,507 ...children: ReactNode[]508 ): ReactHTMLElement<T>;509 // SVGElement510 function cloneElement<P extends SVGAttributes<T>, T extends SVGElement>(511 element: ReactSVGElement,512 props?: P,513 ...children: ReactNode[]514 ): ReactSVGElement;515 // DOM Element (has to be the last, because type checking stops at first overload that fits)516 function cloneElement<P extends DOMAttributes<T>, T extends Element>(517 element: DOMElement<P, T>,518 props?: DOMAttributes<T> & P,519 ...children: ReactNode[]520 ): DOMElement<P, T>;521 522 // Custom components523 function cloneElement<P>(524 element: FunctionComponentElement<P>,525 props?: Partial<P> & Attributes,526 ...children: ReactNode[]527 ): FunctionComponentElement<P>;528 function cloneElement<P, T extends Component<P, ComponentState>>(529 element: CElement<P, T>,530 props?: Partial<P> & ClassAttributes<T>,531 ...children: ReactNode[]532 ): CElement<P, T>;533 function cloneElement<P>(534 element: ReactElement<P>,535 props?: Partial<P> & Attributes,536 ...children: ReactNode[]537 ): ReactElement<P>;538 539 /**540 * Describes the props accepted by a Context {@link Provider}.541 *542 * @template T The type of the value the context provides.543 */544 interface ProviderProps<T> {545 value: T;546 children?: ReactNode | undefined;547 }548 549 /**550 * Describes the props accepted by a Context {@link Consumer}.551 *552 * @template T The type of the value the context provides.553 */554 interface ConsumerProps<T> {555 children: (value: T) => ReactNode;556 }557 558 /**559 * An object masquerading as a component. These are created by functions560 * like {@link forwardRef}, {@link memo}, and {@link createContext}.561 *562 * In order to make TypeScript work, we pretend that they are normal563 * components.564 *565 * But they are, in fact, not callable - instead, they are objects which566 * are treated specially by the renderer.567 *568 * @template P The props the component accepts.569 */570 interface ExoticComponent<P = {}> {571 (props: P): ReactNode;572 readonly $$typeof: symbol;573 }574 575 /**576 * An {@link ExoticComponent} with a `displayName` property applied to it.577 *578 * @template P The props the component accepts.579 */580 interface NamedExoticComponent<P = {}> extends ExoticComponent<P> {581 /**582 * Used in debugging messages. You might want to set it583 * explicitly if you want to display a different name for584 * debugging purposes.585 *586 * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}587 */588 displayName?: string | undefined;589 }590 591 /**592 * An {@link ExoticComponent} with a `propTypes` property applied to it.593 *594 * @template P The props the component accepts.595 */596 interface ProviderExoticComponent<P> extends ExoticComponent<P> {597 }598 599 /**600 * Used to retrieve the type of a context object from a {@link Context}.601 *602 * @template C The context object.603 *604 * @example605 *606 * ```tsx607 * import { createContext } from 'react';608 *609 * const MyContext = createContext({ foo: 'bar' });610 *611 * type ContextType = ContextType<typeof MyContext>;612 * // ContextType = { foo: string }613 * ```614 */615 type ContextType<C extends Context<any>> = C extends Context<infer T> ? T : never;616 617 /**618 * Wraps your components to specify the value of this context for all components inside.619 *620 * @see {@link https://react.dev/reference/react/createContext#provider React Docs}621 *622 * @example623 *624 * ```tsx625 * import { createContext } from 'react';626 *627 * const ThemeContext = createContext('light');628 *629 * function App() {630 * return (631 * <ThemeContext.Provider value="dark">632 * <Toolbar />633 * </ThemeContext.Provider>634 * );635 * }636 * ```637 */638 type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;639 640 /**641 * The old way to read context, before {@link useContext} existed.642 *643 * @see {@link https://react.dev/reference/react/createContext#consumer React Docs}644 *645 * @example646 *647 * ```tsx648 * import { UserContext } from './user-context';649 *650 * function Avatar() {651 * return (652 * <UserContext.Consumer>653 * {user => <img src={user.profileImage} alt={user.name} />}654 * </UserContext.Consumer>655 * );656 * }657 * ```658 */659 type Consumer<T> = ExoticComponent<ConsumerProps<T>>;660 661 /**662 * Context lets components pass information deep down without explicitly663 * passing props.664 *665 * Created from {@link createContext}666 *667 * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}668 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}669 *670 * @example671 *672 * ```tsx673 * import { createContext } from 'react';674 *675 * const ThemeContext = createContext('light');676 * ```677 */678 interface Context<T> extends Provider<T> {679 Provider: Provider<T>;680 Consumer: Consumer<T>;681 /**682 * Used in debugging messages. You might want to set it683 * explicitly if you want to display a different name for684 * debugging purposes.685 *686 * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}687 */688 displayName?: string | undefined;689 }690 691 /**692 * Lets you create a {@link Context} that components can provide or read.693 *694 * @param defaultValue The value you want the context to have when there is no matching695 * {@link Provider} in the tree above the component reading the context. This is meant696 * as a "last resort" fallback.697 *698 * @see {@link https://react.dev/reference/react/createContext#reference React Docs}699 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}700 *701 * @example702 *703 * ```tsx704 * import { createContext } from 'react';705 *706 * const ThemeContext = createContext('light');707 * function App() {708 * return (709 * <ThemeContext value="dark">710 * <Toolbar />711 * </ThemeContext>712 * );713 * }714 * ```715 */716 function createContext<T>(717 // If you thought this should be optional, see718 // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213106719 defaultValue: T,720 ): Context<T>;721 722 function isValidElement<P>(object: {} | null | undefined): object is ReactElement<P>;723 724 const Children: {725 map<T, C>(726 children: C | readonly C[],727 fn: (child: C, index: number) => T,728 ): C extends null | undefined ? C : Array<Exclude<T, boolean | null | undefined>>;729 forEach<C>(children: C | readonly C[], fn: (child: C, index: number) => void): void;730 count(children: any): number;731 only<C>(children: C): C extends any[] ? never : C;732 toArray(children: ReactNode | ReactNode[]): Array<Exclude<ReactNode, boolean | null | undefined>>;733 };734 735 export interface FragmentProps {736 children?: React.ReactNode;737 }738 /**739 * Lets you group elements without a wrapper node.740 *741 * @see {@link https://react.dev/reference/react/Fragment React Docs}742 *743 * @example744 *745 * ```tsx746 * import { Fragment } from 'react';747 *748 * <Fragment>749 * <td>Hello</td>750 * <td>World</td>751 * </Fragment>752 * ```753 *754 * @example755 *756 * ```tsx757 * // Using the <></> shorthand syntax:758 *759 * <>760 * <td>Hello</td>761 * <td>World</td>762 * </>763 * ```764 */765 const Fragment: ExoticComponent<FragmentProps>;766 767 /**768 * Lets you find common bugs in your components early during development.769 *770 * @see {@link https://react.dev/reference/react/StrictMode React Docs}771 *772 * @example773 *774 * ```tsx775 * import { StrictMode } from 'react';776 *777 * <StrictMode>778 * <App />779 * </StrictMode>780 * ```781 */782 const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;783 784 /**785 * The props accepted by {@link Suspense}.786 *787 * @see {@link https://react.dev/reference/react/Suspense React Docs}788 */789 interface SuspenseProps {790 children?: ReactNode | undefined;791 792 /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */793 fallback?: ReactNode;794 795 /**796 * A name for this Suspense boundary for instrumentation purposes.797 * The name will help identify this boundary in React DevTools.798 */799 name?: string | undefined;800 }801 802 /**803 * Lets you display a fallback until its children have finished loading.804 *805 * @see {@link https://react.dev/reference/react/Suspense React Docs}806 *807 * @example808 *809 * ```tsx810 * import { Suspense } from 'react';811 *812 * <Suspense fallback={<Loading />}>813 * <ProfileDetails />814 * </Suspense>815 * ```816 */817 const Suspense: ExoticComponent<SuspenseProps>;818 const version: string;819 820 /**821 * The callback passed to {@link ProfilerProps.onRender}.822 *823 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}824 */825 type ProfilerOnRenderCallback = (826 /**827 * The string id prop of the {@link Profiler} tree that has just committed. This lets828 * you identify which part of the tree was committed if you are using multiple829 * profilers.830 *831 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}832 */833 id: string,834 /**835 * This lets you know whether the tree has just been mounted for the first time836 * or re-rendered due to a change in props, state, or hooks.837 *838 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}839 */840 phase: "mount" | "update" | "nested-update",841 /**842 * The number of milliseconds spent rendering the {@link Profiler} and its descendants843 * for the current update. This indicates how well the subtree makes use of844 * memoization (e.g. {@link memo} and {@link useMemo}). Ideally this value should decrease845 * significantly after the initial mount as many of the descendants will only need to846 * re-render if their specific props change.847 *848 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}849 */850 actualDuration: number,851 /**852 * The number of milliseconds estimating how much time it would take to re-render the entire853 * {@link Profiler} subtree without any optimizations. It is calculated by summing up the most854 * recent render durations of each component in the tree. This value estimates a worst-case855 * cost of rendering (e.g. the initial mount or a tree with no memoization). Compare856 * {@link actualDuration} against it to see if memoization is working.857 *858 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}859 */860 baseDuration: number,861 /**862 * A numeric timestamp for when React began rendering the current update.863 *864 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}865 */866 startTime: number,867 /**868 * A numeric timestamp for when React committed the current update. This value is shared869 * between all profilers in a commit, enabling them to be grouped if desirable.870 *871 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}872 */873 commitTime: number,874 ) => void;875 876 /**877 * The props accepted by {@link Profiler}.878 *879 * @see {@link https://react.dev/reference/react/Profiler React Docs}880 */881 interface ProfilerProps {882 children?: ReactNode | undefined;883 id: string;884 onRender: ProfilerOnRenderCallback;885 }886 887 /**888 * Lets you measure rendering performance of a React tree programmatically.889 *890 * @see {@link https://react.dev/reference/react/Profiler#onrender-callback React Docs}891 *892 * @example893 *894 * ```tsx895 * <Profiler id="App" onRender={onRender}>896 * <App />897 * </Profiler>898 * ```899 */900 const Profiler: ExoticComponent<ProfilerProps>;901 902 //903 // Component API904 // ----------------------------------------------------------------------905 906 type ReactInstance = Component<any> | Element;907 908 // Base component for plain JS classes909 interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}910 class Component<P, S> {911 /**912 * If set, `this.context` will be set at runtime to the current value of the given Context.913 *914 * @example915 *916 * ```ts917 * type MyContext = number918 * const Ctx = React.createContext<MyContext>(0)919 *920 * class Foo extends React.Component {921 * static contextType = Ctx922 * context!: React.ContextType<typeof Ctx>923 * render () {924 * return <>My context's value: {this.context}</>;925 * }926 * }927 * ```928 *929 * @see {@link https://react.dev/reference/react/Component#static-contexttype}930 */931 static contextType?: Context<any> | undefined;932 933 /**934 * Ignored by React.935 * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.936 */937 static propTypes?: any;938 939 /**940 * If using React Context, re-declare this in your class to be the941 * `React.ContextType` of your `static contextType`.942 * Should be used with type annotation or static contextType.943 *944 * @example945 * ```ts946 * static contextType = MyContext947 * // For TS pre-3.7:948 * context!: React.ContextType<typeof MyContext>949 * // For TS 3.7 and above:950 * declare context: React.ContextType<typeof MyContext>951 * ```952 *953 * @see {@link https://react.dev/reference/react/Component#context React Docs}954 */955 context: unknown;956 957 // Keep in sync with constructor signature of JSXElementConstructor and ComponentClass.958 constructor(props: P);959 /**960 * @param props961 * @param context value of the parent {@link https://react.dev/reference/react/Component#context Context} specified962 * in `contextType`.963 */964 // TODO: Ideally we'd infer the constructor signatur from `contextType`.965 // Might be hard to ship without breaking existing code.966 constructor(props: P, context: any);967 968 // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.969 // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257970 // Also, the ` | S` allows intellisense to not be dumbisense971 setState<K extends keyof S>(972 state: ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null) | (Pick<S, K> | S | null),973 callback?: () => void,974 ): void;975 976 forceUpdate(callback?: () => void): void;977 render(): ReactNode;978 979 readonly props: Readonly<P>;980 state: Readonly<S>;981 }982 983 class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {}984 985 /**986 * @deprecated Use `ClassicComponent` from `create-react-class`987 *988 * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}989 * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}990 */991 interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {992 replaceState(nextState: S, callback?: () => void): void;993 isMounted(): boolean;994 getInitialState?(): S;995 }996 997 //998 // Class Interfaces999 // ----------------------------------------------------------------------1000 1001 /**1002 * Represents the type of a function component. Can optionally1003 * receive a type argument that represents the props the component1004 * receives.1005 *1006 * @template P The props the component accepts.1007 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}1008 * @alias for {@link FunctionComponent}1009 *1010 * @example1011 *1012 * ```tsx1013 * // With props:1014 * type Props = { name: string }1015 *1016 * const MyComponent: FC<Props> = (props) => {1017 * return <div>{props.name}</div>1018 * }1019 * ```1020 *1021 * @example1022 *1023 * ```tsx1024 * // Without props:1025 * const MyComponentWithoutProps: FC = () => {1026 * return <div>MyComponentWithoutProps</div>1027 * }1028 * ```1029 */1030 type FC<P = {}> = FunctionComponent<P>;1031 1032 /**1033 * Represents the type of a function component. Can optionally1034 * receive a type argument that represents the props the component1035 * accepts.1036 *1037 * @template P The props the component accepts.1038 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components React TypeScript Cheatsheet}1039 *1040 * @example1041 *1042 * ```tsx1043 * // With props:1044 * type Props = { name: string }1045 *1046 * const MyComponent: FunctionComponent<Props> = (props) => {1047 * return <div>{props.name}</div>1048 * }1049 * ```1050 *1051 * @example1052 *1053 * ```tsx1054 * // Without props:1055 * const MyComponentWithoutProps: FunctionComponent = () => {1056 * return <div>MyComponentWithoutProps</div>1057 * }1058 * ```1059 */1060 interface FunctionComponent<P = {}> {1061 (props: P): ReactNode | Promise<ReactNode>;1062 /**1063 * Ignored by React.1064 * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.1065 */1066 propTypes?: any;1067 /**1068 * Used in debugging messages. You might want to set it1069 * explicitly if you want to display a different name for1070 * debugging purposes.1071 *1072 * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}1073 *1074 * @example1075 *1076 * ```tsx1077 *1078 * const MyComponent: FC = () => {1079 * return <div>Hello!</div>1080 * }1081 *1082 * MyComponent.displayName = 'MyAwesomeComponent'1083 * ```1084 */1085 displayName?: string | undefined;1086 }1087 1088 /**1089 * The type of the ref received by a {@link ForwardRefRenderFunction}.1090 *1091 * @see {@link ForwardRefRenderFunction}1092 */1093 // Making T nullable is assuming the refs will be managed by React or the component impl will write it somewhere else.1094 // But this isn't necessarily true. We haven't heard complains about it yet and hopefully `forwardRef` is removed from React before we do.1095 type ForwardedRef<T> = ((instance: T | null) => void) | RefObject<T | null> | null;1096 1097 /**1098 * The type of the function passed to {@link forwardRef}. This is considered different1099 * to a normal {@link FunctionComponent} because it receives an additional argument,1100 *1101 * @param props Props passed to the component, if any.1102 * @param ref A ref forwarded to the component of type {@link ForwardedRef}.1103 *1104 * @template T The type of the forwarded ref.1105 * @template P The type of the props the component accepts.1106 *1107 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/ React TypeScript Cheatsheet}1108 * @see {@link forwardRef}1109 */1110 interface ForwardRefRenderFunction<T, P = {}> {1111 (props: P, ref: ForwardedRef<T>): ReactNode;1112 /**1113 * Used in debugging messages. You might want to set it1114 * explicitly if you want to display a different name for1115 * debugging purposes.1116 *1117 * Will show `ForwardRef(${Component.displayName || Component.name})`1118 * in devtools by default, but can be given its own specific name.1119 *1120 * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}1121 */1122 displayName?: string | undefined;1123 /**1124 * Ignored by React.1125 * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.1126 */1127 propTypes?: any;1128 }1129 1130 /**1131 * Represents a component class in React.1132 *1133 * @template P The props the component accepts.1134 * @template S The internal state of the component.1135 */1136 interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {1137 // constructor signature must match React.Component1138 new(1139 props: P,1140 /**1141 * Value of the parent {@link https://react.dev/reference/react/Component#context Context} specified1142 * in `contextType`.1143 */1144 context?: any,1145 ): Component<P, S>;1146 /**1147 * Ignored by React.1148 * @deprecated Only kept in types for backwards compatibility. Will be removed in a future major release.1149 */1150 propTypes?: any;1151 contextType?: Context<any> | undefined;1152 defaultProps?: Partial<P> | undefined;1153 /**1154 * Used in debugging messages. You might want to set it1155 * explicitly if you want to display a different name for1156 * debugging purposes.1157 *1158 * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}1159 */1160 displayName?: string | undefined;1161 }1162 1163 /**1164 * @deprecated Use `ClassicComponentClass` from `create-react-class`1165 *1166 * @see {@link https://legacy.reactjs.org/docs/react-without-es6.html Legacy React Docs}1167 * @see {@link https://www.npmjs.com/package/create-react-class `create-react-class` on npm}1168 */1169 interface ClassicComponentClass<P = {}> extends ComponentClass<P> {1170 new(props: P): ClassicComponent<P, ComponentState>;1171 getDefaultProps?(): P;1172 }1173 1174 /**1175 * Used in {@link createElement} and {@link createFactory} to represent1176 * a class.1177 *1178 * An intersection type is used to infer multiple type parameters from1179 * a single argument, which is useful for many top-level API defs.1180 * See {@link https://github.com/Microsoft/TypeScript/issues/7234 this GitHub issue}1181 * for more info.1182 */1183 type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =1184 & C1185 & (new(props: P, context: any) => T);1186 1187 //1188 // Component Specs and Lifecycle1189 // ----------------------------------------------------------------------1190 1191 // This should actually be something like `Lifecycle<P, S> | DeprecatedLifecycle<P, S>`,1192 // as React will _not_ call the deprecated lifecycle methods if any of the new lifecycle1193 // methods are present.1194 interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> {1195 /**1196 * Called immediately after a component is mounted. Setting state here will trigger re-rendering.1197 */1198 componentDidMount?(): void;1199 /**1200 * Called to determine whether the change in props and state should trigger a re-render.