diff --git a/.github/workflows/azuretesting_soucting2024.yml b/.github/workflows/azuretesting_soucting2024.yml new file mode 100644 index 0000000..d0eeb30 --- /dev/null +++ b/.github/workflows/azuretesting_soucting2024.yml @@ -0,0 +1,71 @@ +# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy +# More GitHub Actions for Azure: https://github.com/Azure/actions + +name: Build and deploy Node.js app to Azure Web App - Soucting2024 + +on: + push: + branches: + - AzureTesting + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Set up Node.js version + uses: actions/setup-node@v3 + with: + node-version: '20.x' + + - name: npm install, build, and test + run: | + npm install + npm run build --if-present + npm run test --if-present + + - name: Zip artifact for deployment + run: zip release.zip ./* -r + + - name: Upload artifact for deployment job + uses: actions/upload-artifact@v3 + with: + name: node-app + path: release.zip + + deploy: + runs-on: ubuntu-latest + needs: build + environment: + name: 'Production' + url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} + permissions: + id-token: write #This is required for requesting the JWT + + steps: + - name: Download artifact from build job + uses: actions/download-artifact@v3 + with: + name: node-app + + - name: Unzip artifact for deployment + run: unzip release.zip + + - name: Login to Azure + uses: azure/login@v1 + with: + client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_6D62EEE4CFF84CD5A0E1F91362BBB5D0 }} + tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_FEB49CC9B4964DA69540746FE4DAE8C5 }} + subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_2364481ABFED4DA885CAE62591999CF3 }} + + - name: 'Deploy to Azure Web App' + id: deploy-to-webapp + uses: azure/webapps-deploy@v2 + with: + app-name: 'Soucting2024' + slot-name: 'Production' + package: . + \ No newline at end of file diff --git a/.github/workflows/main_scouting7127.yml b/.github/workflows/main_scouting7127.yml new file mode 100644 index 0000000..6dc1468 --- /dev/null +++ b/.github/workflows/main_scouting7127.yml @@ -0,0 +1,66 @@ +# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy +# More GitHub Actions for Azure: https://github.com/Azure/actions + +name: Build and deploy PHP app to Azure Web App - Scouting7127 + +on: + push: + branches: + - main + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Setup PHP + uses: shivammathur/setup-php@v2 + with: + php-version: '8.2' + + - name: Check if composer.json exists + id: check_files + uses: andstor/file-existence-action@v1 + with: + files: 'composer.json' + + - name: Run composer install if composer.json exists + if: steps.check_files.outputs.files_exists == 'true' + run: composer validate --no-check-publish && composer install --prefer-dist --no-progress + + - name: Zip artifact for deployment + run: zip release.zip ./* -r + + - name: Upload artifact for deployment job + uses: actions/upload-artifact@v3 + with: + name: php-app + path: release.zip + + deploy: + runs-on: ubuntu-latest + needs: build + environment: + name: 'Production' + url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} + + steps: + - name: Download artifact from build job + uses: actions/download-artifact@v3 + with: + name: php-app + + - name: Unzip artifact for deployment + run: unzip release.zip + + - name: 'Deploy to Azure Web App' + uses: azure/webapps-deploy@v2 + id: deploy-to-webapp + with: + app-name: 'Scouting7127' + slot-name: 'Production' + publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_EC691B8978674A549C7C7DD389A10940 }} + package: . diff --git a/.github/workflows/main_soucting2024.yml b/.github/workflows/main_soucting2024.yml new file mode 100644 index 0000000..dd228f5 --- /dev/null +++ b/.github/workflows/main_soucting2024.yml @@ -0,0 +1,71 @@ +# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy +# More GitHub Actions for Azure: https://github.com/Azure/actions + +name: Build and deploy Node.js app to Azure Web App - Soucting2024 + +on: + push: + branches: + - main + workflow_dispatch: + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + + - name: Set up Node.js version + uses: actions/setup-node@v3 + with: + node-version: '20.x' + + - name: npm install, build, and test + run: | + npm install + npm run build --if-present + npm run test --if-present + + - name: Zip artifact for deployment + run: zip release.zip ./* -r + + - name: Upload artifact for deployment job + uses: actions/upload-artifact@v3 + with: + name: node-app + path: release.zip + + deploy: + runs-on: ubuntu-latest + needs: build + environment: + name: 'Production' + url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} + permissions: + id-token: write #This is required for requesting the JWT + + steps: + - name: Download artifact from build job + uses: actions/download-artifact@v3 + with: + name: node-app + + - name: Unzip artifact for deployment + run: unzip release.zip + + - name: Login to Azure + uses: azure/login@v1 + with: + client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_11BB77DD6BF74296BF3323527201B43E }} + tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_2BB5126B64474337AC450F6772CF20CC }} + subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_4FCA4753EC994801A4E837E9E0E8D822 }} + + - name: 'Deploy to Azure Web App' + id: deploy-to-webapp + uses: azure/webapps-deploy@v2 + with: + app-name: 'Soucting2024' + slot-name: 'Production' + package: . + \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..328b382 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# ignore ALL .log files +*.log + +# ignore ALL files in ANY directory named temp +temp/ +phpMyAdmin/ \ No newline at end of file diff --git a/README.md b/README.md index c7fdd3c..5597ed9 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,12 @@ # scouting2024 -scouting app for competitions written with xcode (vscode?) +scouting app for competitions written with xcode/vscode +// +current HTML page references the link below for experimental purposes +https://blog.openreplay.com/building-a-mobile-app-using-html-css-and-js/#:~:text=Cheap%20and%20Fast%20Development%3A%20PWAs,are%20required%20for%20a%20PWA. + +https://scouting7127.azurewebsites.net/ + +https://scouting7127.azurewebsites.net/phpmyadmin/ + +https://stackoverflow.com/questions/22342836/syncing-indexeddb-with-sql-server + diff --git a/index.css b/index.css index 1825404..e39fbee 100644 --- a/index.css +++ b/index.css @@ -10,6 +10,7 @@ --teamlist: #cfedff; --text: #2d3875; --deletebutton: #de4e4e; + --navbar: #565f90 } * { @@ -18,6 +19,15 @@ font-family: "Fira sans", sans-serif; } +nav { + display: flex; + justify-content: space-around; + align-items: center; + min-height: 8vh; + background-color: var(--navbar); + font-family: "Montserrat", sans-serif; +} + body { display: flex; flex-direction: column; diff --git a/index.html b/index.html index 4e05dd6..5f9073a 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ Teams + + + \ No newline at end of file diff --git a/index.js b/index.js index 9d0b842..2187c49 100644 --- a/index.js +++ b/index.js @@ -39,4 +39,31 @@ window.onload = getTodos; const deleteTodo = async (event, id) => { await db.todos.delete(id); await getTodos(); -}; \ No newline at end of file +}; + +// CHATGPT CODE TO CONNECT TO MYSQL SERVER + +function saveTeam(teamName) { + db.teams.add({ name: teamName }).then(() => { + syncTeamWithServer(teamName); + }); +} + +function syncTeamWithServer(teamName) { + fetch('/sync', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ teamName: teamName }) + }) + .then(response => { + if (!response.ok) { + throw new Error('Failed to sync data'); + } + return response.json(); + }) + .catch(error => { + console.error(error); + }); +} diff --git a/node_modules/.bin/loose-envify b/node_modules/.bin/loose-envify new file mode 100644 index 0000000..60598cb --- /dev/null +++ b/node_modules/.bin/loose-envify @@ -0,0 +1,12 @@ +#!/bin/sh +basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") + +case `uname` in + *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;; +esac + +if [ -x "$basedir/node" ]; then + exec "$basedir/node" "$basedir/../loose-envify/cli.js" "$@" +else + exec node "$basedir/../loose-envify/cli.js" "$@" +fi diff --git a/node_modules/.bin/loose-envify.cmd b/node_modules/.bin/loose-envify.cmd new file mode 100644 index 0000000..599576f --- /dev/null +++ b/node_modules/.bin/loose-envify.cmd @@ -0,0 +1,17 @@ +@ECHO off +GOTO start +:find_dp0 +SET dp0=%~dp0 +EXIT /b +:start +SETLOCAL +CALL :find_dp0 + +IF EXIST "%dp0%\node.exe" ( + SET "_prog=%dp0%\node.exe" +) ELSE ( + SET "_prog=node" + SET PATHEXT=%PATHEXT:;.JS;=;% +) + +endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%" "%dp0%\..\loose-envify\cli.js" %* diff --git a/node_modules/.bin/loose-envify.ps1 b/node_modules/.bin/loose-envify.ps1 new file mode 100644 index 0000000..eb866fc --- /dev/null +++ b/node_modules/.bin/loose-envify.ps1 @@ -0,0 +1,28 @@ +#!/usr/bin/env pwsh +$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent + +$exe="" +if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) { + # Fix case when both the Windows and Linux builds of Node + # are installed in the same directory + $exe=".exe" +} +$ret=0 +if (Test-Path "$basedir/node$exe") { + # Support pipeline input + if ($MyInvocation.ExpectingInput) { + $input | & "$basedir/node$exe" "$basedir/../loose-envify/cli.js" $args + } else { + & "$basedir/node$exe" "$basedir/../loose-envify/cli.js" $args + } + $ret=$LASTEXITCODE +} else { + # Support pipeline input + if ($MyInvocation.ExpectingInput) { + $input | & "node$exe" "$basedir/../loose-envify/cli.js" $args + } else { + & "node$exe" "$basedir/../loose-envify/cli.js" $args + } + $ret=$LASTEXITCODE +} +exit $ret diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json index d0252c3..7ae8d6d 100644 --- a/node_modules/.package-lock.json +++ b/node_modules/.package-lock.json @@ -3,6 +3,35 @@ "lockfileVersion": 3, "requires": true, "packages": { + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", + "peer": true + }, + "node_modules/@types/react": { + "version": "18.2.55", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz", + "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==", + "peer": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", + "peer": true + }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "peer": true + }, "node_modules/dexie": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/dexie/-/dexie-3.2.4.tgz", @@ -10,6 +39,46 @@ "engines": { "node": ">=6.0" } + }, + "node_modules/dexie-react-hooks": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.7.tgz", + "integrity": "sha512-Lwv5W0Hk+uOW3kGnsU9GZoR1er1B7WQ5DSdonoNG+focTNeJbHW6vi6nBoX534VKI3/uwHebYzSw1fwY6a7mTw==", + "peerDependencies": { + "@types/react": ">=16", + "dexie": "^3.2 || ^4.0.1-alpha", + "react": ">=16" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } } } } diff --git a/node_modules/@types/prop-types/LICENSE b/node_modules/@types/prop-types/LICENSE new file mode 100644 index 0000000..9e841e7 --- /dev/null +++ b/node_modules/@types/prop-types/LICENSE @@ -0,0 +1,21 @@ + MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE diff --git a/node_modules/@types/prop-types/README.md b/node_modules/@types/prop-types/README.md new file mode 100644 index 0000000..19331d9 --- /dev/null +++ b/node_modules/@types/prop-types/README.md @@ -0,0 +1,15 @@ +# Installation +> `npm install --save @types/prop-types` + +# Summary +This package contains type definitions for prop-types (https://github.com/reactjs/prop-types). + +# Details +Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/prop-types. + +### Additional Details + * Last updated: Mon, 20 Nov 2023 23:36:24 GMT + * Dependencies: none + +# Credits +These definitions were written by [DovydasNavickas](https://github.com/DovydasNavickas), [Ferdy Budhidharma](https://github.com/ferdaber), and [Sebastian Silbermann](https://github.com/eps1lon). diff --git a/node_modules/@types/prop-types/index.d.ts b/node_modules/@types/prop-types/index.d.ts new file mode 100644 index 0000000..19f806d --- /dev/null +++ b/node_modules/@types/prop-types/index.d.ts @@ -0,0 +1,98 @@ +export type ReactComponentLike = + | string + | ((props: any, context?: any) => any) + | (new(props: any, context?: any) => any); + +export interface ReactElementLike { + type: ReactComponentLike; + props: any; + key: string | null; +} + +export interface ReactNodeArray extends Iterable {} + +export type ReactNodeLike = + | ReactElementLike + | ReactNodeArray + | string + | number + | boolean + | null + | undefined; + +export const nominalTypeHack: unique symbol; + +export type IsOptional = undefined extends T ? true : false; + +export type RequiredKeys = { + [K in keyof V]-?: Exclude extends Validator ? IsOptional extends true ? never : K + : never; +}[keyof V]; +export type OptionalKeys = Exclude>; +export type InferPropsInner = { [K in keyof V]-?: InferType }; + +export interface Validator { + ( + props: { [key: string]: any }, + propName: string, + componentName: string, + location: string, + propFullName: string, + ): Error | null; + [nominalTypeHack]?: { + type: T; + } | undefined; +} + +export interface Requireable extends Validator { + isRequired: Validator>; +} + +export type ValidationMap = { [K in keyof T]?: Validator }; + +export type InferType = V extends Validator ? T : any; +export type InferProps = + & InferPropsInner>> + & Partial>>>; + +export const any: Requireable; +export const array: Requireable; +export const bool: Requireable; +export const func: Requireable<(...args: any[]) => any>; +export const number: Requireable; +export const object: Requireable; +export const string: Requireable; +export const node: Requireable; +export const element: Requireable; +export const symbol: Requireable; +export const elementType: Requireable; +export function instanceOf(expectedClass: new(...args: any[]) => T): Requireable; +export function oneOf(types: readonly T[]): Requireable; +export function oneOfType>(types: T[]): Requireable>>; +export function arrayOf(type: Validator): Requireable; +export function objectOf(type: Validator): Requireable<{ [K in keyof any]: T }>; +export function shape

>(type: P): Requireable>; +export function exact

>(type: P): Requireable>>; + +/** + * Assert that the values match with the type specs. + * Error messages are memorized and will only be shown once. + * + * @param typeSpecs Map of name to a ReactPropType + * @param values Runtime values that need to be type-checked + * @param location e.g. "prop", "context", "child context" + * @param componentName Name of the component for error messages + * @param getStack Returns the component stack + */ +export function checkPropTypes( + typeSpecs: any, + values: any, + location: string, + componentName: string, + getStack?: () => any, +): void; + +/** + * Only available if NODE_ENV=production + */ +export function resetWarningCache(): void; diff --git a/node_modules/@types/prop-types/package.json b/node_modules/@types/prop-types/package.json new file mode 100644 index 0000000..79d55b5 --- /dev/null +++ b/node_modules/@types/prop-types/package.json @@ -0,0 +1,35 @@ +{ + "name": "@types/prop-types", + "version": "15.7.11", + "description": "TypeScript definitions for prop-types", + "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/prop-types", + "license": "MIT", + "contributors": [ + { + "name": "DovydasNavickas", + "githubUsername": "DovydasNavickas", + "url": "https://github.com/DovydasNavickas" + }, + { + "name": "Ferdy Budhidharma", + "githubUsername": "ferdaber", + "url": "https://github.com/ferdaber" + }, + { + "name": "Sebastian Silbermann", + "githubUsername": "eps1lon", + "url": "https://github.com/eps1lon" + } + ], + "main": "", + "types": "index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", + "directory": "types/prop-types" + }, + "scripts": {}, + "dependencies": {}, + "typesPublisherContentHash": "a098c8938982c7e7bc31f162c77bc407178535e98c85370e3b456598ee52e7c0", + "typeScriptVersion": "4.5" +} \ No newline at end of file diff --git a/node_modules/@types/react/LICENSE b/node_modules/@types/react/LICENSE new file mode 100644 index 0000000..9e841e7 --- /dev/null +++ b/node_modules/@types/react/LICENSE @@ -0,0 +1,21 @@ + MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE diff --git a/node_modules/@types/react/README.md b/node_modules/@types/react/README.md new file mode 100644 index 0000000..bac6225 --- /dev/null +++ b/node_modules/@types/react/README.md @@ -0,0 +1,15 @@ +# Installation +> `npm install --save @types/react` + +# Summary +This package contains type definitions for react (https://react.dev/). + +# Details +Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react. + +### Additional Details + * Last updated: Tue, 06 Feb 2024 09:35:42 GMT + * Dependencies: [@types/prop-types](https://npmjs.com/package/@types/prop-types), [@types/scheduler](https://npmjs.com/package/@types/scheduler), [csstype](https://npmjs.com/package/csstype) + +# Credits +These definitions were written by [Asana](https://asana.com), [AssureSign](http://www.assuresign.com), [Microsoft](https://microsoft.com), [John Reilly](https://github.com/johnnyreilly), [Benoit Benezech](https://github.com/bbenezech), [Patricio Zavolinsky](https://github.com/pzavolinsky), [Eric Anderson](https://github.com/ericanderson), [Dovydas Navickas](https://github.com/DovydasNavickas), [Josh Rutherford](https://github.com/theruther4d), [Guilherme Hübner](https://github.com/guilhermehubner), [Ferdy Budhidharma](https://github.com/ferdaber), [Johann Rakotoharisoa](https://github.com/jrakotoharisoa), [Olivier Pascal](https://github.com/pascaloliv), [Martin Hochel](https://github.com/hotell), [Frank Li](https://github.com/franklixuefei), [Jessica Franco](https://github.com/Jessidhia), [Saransh Kataria](https://github.com/saranshkataria), [Kanitkorn Sujautra](https://github.com/lukyth), [Sebastian Silbermann](https://github.com/eps1lon), [Kyle Scully](https://github.com/zieka), [Cong Zhang](https://github.com/dancerphil), [Dimitri Mitropoulos](https://github.com/dimitropoulos), [JongChan Choi](https://github.com/disjukr), [Victor Magalhães](https://github.com/vhfmag), [Dale Tan](https://github.com/hellatan), [Priyanshu Rav](https://github.com/priyanshurav), and [Dmitry Semigradsky](https://github.com/Semigradsky). diff --git a/node_modules/@types/react/canary.d.ts b/node_modules/@types/react/canary.d.ts new file mode 100644 index 0000000..a85e407 --- /dev/null +++ b/node_modules/@types/react/canary.d.ts @@ -0,0 +1,112 @@ +/** + * These are types for things that are present in the React `canary` release channel. + * + * To load the types declared here in an actual project, there are three ways. The easiest one, + * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, + * is to add `"react/canary"` to the `"types"` array. + * + * Alternatively, a specific import syntax can to be used from a typescript file. + * This module does not exist in reality, which is why the {} is important: + * + * ```ts + * import {} from 'react/canary' + * ``` + * + * It is also possible to include it through a triple-slash reference: + * + * ```ts + * /// + * ``` + * + * Either the import or the reference only needs to appear once, anywhere in the project. + */ + +// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared, + +import React = require("."); + +export {}; + +declare const UNDEFINED_VOID_ONLY: unique symbol; +type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never }; + +declare module "." { + interface ThenableImpl { + then(onFulfill: (value: T) => unknown, onReject: (error: unknown) => unknown): void | PromiseLike; + } + interface UntrackedThenable extends ThenableImpl { + status?: void; + } + + export interface PendingThenable extends ThenableImpl { + status: "pending"; + } + + export interface FulfilledThenable extends ThenableImpl { + status: "fulfilled"; + value: T; + } + + export interface RejectedThenable extends ThenableImpl { + status: "rejected"; + reason: unknown; + } + + export type Thenable = UntrackedThenable | PendingThenable | FulfilledThenable | RejectedThenable; + + export type Usable = Thenable | Context; + + export function use(usable: Usable): T; + + interface ServerContextJSONArray extends ReadonlyArray {} + export type ServerContextJSONValue = + | string + | boolean + | number + | null + | ServerContextJSONArray + | { [key: string]: ServerContextJSONValue }; + export interface ServerContext { + Provider: Provider; + } + /** + * Accepts a context object (the value returned from `React.createContext` or `React.createServerContext`) and returns the current + * context value, as given by the nearest context provider for the given context. + * + * @version 16.8.0 + * @see https://react.dev/reference/react/useContext + */ + function useContext(context: ServerContext): T; + export function createServerContext( + globalName: string, + defaultValue: T, + ): ServerContext; + + // eslint-disable-next-line @typescript-eslint/ban-types + export function cache(fn: CachedFunction): CachedFunction; + + export function unstable_useCacheRefresh(): () => void; + + interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS { + functions: (formData: FormData) => void; + } + + export interface TransitionStartFunction { + /** + * Marks all state updates inside the async function as transitions + * + * @see {https://react.dev/reference/react/useTransition#starttransition} + * + * @param callback + */ + (callback: () => Promise): void; + } + + function useOptimistic( + passthrough: State, + ): [State, (action: State | ((pendingState: State) => State)) => void]; + function useOptimistic( + passthrough: State, + reducer: (state: State, action: Action) => State, + ): [State, (action: Action) => void]; +} diff --git a/node_modules/@types/react/experimental.d.ts b/node_modules/@types/react/experimental.d.ts new file mode 100644 index 0000000..de15239 --- /dev/null +++ b/node_modules/@types/react/experimental.d.ts @@ -0,0 +1,126 @@ +/** + * These are types for things that are present in the `experimental` builds of React but not yet + * on a stable build. + * + * Once they are promoted to stable they can just be moved to the main index file. + * + * To load the types declared here in an actual project, there are three ways. The easiest one, + * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, + * is to add `"react/experimental"` to the `"types"` array. + * + * Alternatively, a specific import syntax can to be used from a typescript file. + * This module does not exist in reality, which is why the {} is important: + * + * ```ts + * import {} from 'react/experimental' + * ``` + * + * It is also possible to include it through a triple-slash reference: + * + * ```ts + * /// + * ``` + * + * Either the import or the reference only needs to appear once, anywhere in the project. + */ + +// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared, +// and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are +// flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`. +// +// For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js +// is a good place to start looking for details; it generally calls prop validation functions or delegates +// all tasks done as part of the render phase (the concurrent part of the React update cycle). +// +// Suspense-related handling can be found in ReactFiberThrow.js. + +import React = require("./canary"); + +export {}; + +declare const UNDEFINED_VOID_ONLY: unique symbol; +type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never }; + +declare module "." { + // Need an interface to not cause ReactNode to be a self-referential type. + interface PromiseLikeOfReactNode extends PromiseLike {} + interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES { + promises: PromiseLikeOfReactNode; + } + + export interface SuspenseProps { + /** + * The presence of this prop indicates that the content is computationally expensive to render. + * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data). + * @see {@link https://github.com/facebook/react/pull/19936} + */ + unstable_expectedLoadTime?: number | undefined; + } + + export type SuspenseListRevealOrder = "forwards" | "backwards" | "together"; + export type SuspenseListTailMode = "collapsed" | "hidden"; + + export interface SuspenseListCommonProps { + /** + * Note that SuspenseList require more than one child; + * it is a runtime warning to provide only a single child. + * + * It does, however, allow those children to be wrapped inside a single + * level of ``. + */ + children: ReactElement | Iterable; + } + + interface DirectionalSuspenseListProps extends SuspenseListCommonProps { + /** + * Defines the order in which the `SuspenseList` children should be revealed. + */ + revealOrder: "forwards" | "backwards"; + /** + * Dictates how unloaded items in a SuspenseList is shown. + * + * - By default, `SuspenseList` will show all fallbacks in the list. + * - `collapsed` shows only the next fallback in the list. + * - `hidden` doesn’t show any unloaded items. + */ + tail?: SuspenseListTailMode | undefined; + } + + interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps { + /** + * Defines the order in which the `SuspenseList` children should be revealed. + */ + revealOrder?: Exclude | undefined; + /** + * The tail property is invalid when not using the `forwards` or `backwards` reveal orders. + */ + tail?: never | undefined; + } + + export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps; + + /** + * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order + * in which these components are revealed to the user. + * + * When multiple components need to fetch data, this data may arrive in an unpredictable order. + * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list + * until previous items have been displayed (this behavior is adjustable). + * + * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist + * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist + */ + export const unstable_SuspenseList: ExoticComponent; + + // eslint-disable-next-line @typescript-eslint/ban-types + export function experimental_useEffectEvent(event: T): T; + + type Reference = object; + type TaintableUniqueValue = string | bigint | ArrayBufferView; + function experimental_taintUniqueValue( + message: string | undefined, + lifetime: Reference, + value: TaintableUniqueValue, + ): void; + function experimental_taintObjectReference(message: string | undefined, object: Reference): void; +} diff --git a/node_modules/@types/react/global.d.ts b/node_modules/@types/react/global.d.ts new file mode 100644 index 0000000..91094ee --- /dev/null +++ b/node_modules/@types/react/global.d.ts @@ -0,0 +1,158 @@ +/* +React projects that don't include the DOM library need these interfaces to compile. +React Native applications use React, but there is no DOM available. The JavaScript runtime +is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`. + +Warning: all of these interfaces are empty. If you want type definitions for various properties +(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json). +*/ + +interface Event {} +interface AnimationEvent extends Event {} +interface ClipboardEvent extends Event {} +interface CompositionEvent extends Event {} +interface DragEvent extends Event {} +interface FocusEvent extends Event {} +interface KeyboardEvent extends Event {} +interface MouseEvent extends Event {} +interface TouchEvent extends Event {} +interface PointerEvent extends Event {} +interface TransitionEvent extends Event {} +interface UIEvent extends Event {} +interface WheelEvent extends Event {} + +interface EventTarget {} +interface Document {} +interface DataTransfer {} +interface StyleMedia {} + +interface Element {} +interface DocumentFragment {} + +interface HTMLElement extends Element {} +interface HTMLAnchorElement extends HTMLElement {} +interface HTMLAreaElement extends HTMLElement {} +interface HTMLAudioElement extends HTMLElement {} +interface HTMLBaseElement extends HTMLElement {} +interface HTMLBodyElement extends HTMLElement {} +interface HTMLBRElement extends HTMLElement {} +interface HTMLButtonElement extends HTMLElement {} +interface HTMLCanvasElement extends HTMLElement {} +interface HTMLDataElement extends HTMLElement {} +interface HTMLDataListElement extends HTMLElement {} +interface HTMLDetailsElement extends HTMLElement {} +interface HTMLDialogElement extends HTMLElement {} +interface HTMLDivElement extends HTMLElement {} +interface HTMLDListElement extends HTMLElement {} +interface HTMLEmbedElement extends HTMLElement {} +interface HTMLFieldSetElement extends HTMLElement {} +interface HTMLFormElement extends HTMLElement {} +interface HTMLHeadingElement extends HTMLElement {} +interface HTMLHeadElement extends HTMLElement {} +interface HTMLHRElement extends HTMLElement {} +interface HTMLHtmlElement extends HTMLElement {} +interface HTMLIFrameElement extends HTMLElement {} +interface HTMLImageElement extends HTMLElement {} +interface HTMLInputElement extends HTMLElement {} +interface HTMLModElement extends HTMLElement {} +interface HTMLLabelElement extends HTMLElement {} +interface HTMLLegendElement extends HTMLElement {} +interface HTMLLIElement extends HTMLElement {} +interface HTMLLinkElement extends HTMLElement {} +interface HTMLMapElement extends HTMLElement {} +interface HTMLMetaElement extends HTMLElement {} +interface HTMLMeterElement extends HTMLElement {} +interface HTMLObjectElement extends HTMLElement {} +interface HTMLOListElement extends HTMLElement {} +interface HTMLOptGroupElement extends HTMLElement {} +interface HTMLOptionElement extends HTMLElement {} +interface HTMLOutputElement extends HTMLElement {} +interface HTMLParagraphElement extends HTMLElement {} +interface HTMLParamElement extends HTMLElement {} +interface HTMLPreElement extends HTMLElement {} +interface HTMLProgressElement extends HTMLElement {} +interface HTMLQuoteElement extends HTMLElement {} +interface HTMLSlotElement extends HTMLElement {} +interface HTMLScriptElement extends HTMLElement {} +interface HTMLSelectElement extends HTMLElement {} +interface HTMLSourceElement extends HTMLElement {} +interface HTMLSpanElement extends HTMLElement {} +interface HTMLStyleElement extends HTMLElement {} +interface HTMLTableElement extends HTMLElement {} +interface HTMLTableColElement extends HTMLElement {} +interface HTMLTableDataCellElement extends HTMLElement {} +interface HTMLTableHeaderCellElement extends HTMLElement {} +interface HTMLTableRowElement extends HTMLElement {} +interface HTMLTableSectionElement extends HTMLElement {} +interface HTMLTemplateElement extends HTMLElement {} +interface HTMLTextAreaElement extends HTMLElement {} +interface HTMLTimeElement extends HTMLElement {} +interface HTMLTitleElement extends HTMLElement {} +interface HTMLTrackElement extends HTMLElement {} +interface HTMLUListElement extends HTMLElement {} +interface HTMLVideoElement extends HTMLElement {} +interface HTMLWebViewElement extends HTMLElement {} + +interface SVGElement extends Element {} +interface SVGSVGElement extends SVGElement {} +interface SVGCircleElement extends SVGElement {} +interface SVGClipPathElement extends SVGElement {} +interface SVGDefsElement extends SVGElement {} +interface SVGDescElement extends SVGElement {} +interface SVGEllipseElement extends SVGElement {} +interface SVGFEBlendElement extends SVGElement {} +interface SVGFEColorMatrixElement extends SVGElement {} +interface SVGFEComponentTransferElement extends SVGElement {} +interface SVGFECompositeElement extends SVGElement {} +interface SVGFEConvolveMatrixElement extends SVGElement {} +interface SVGFEDiffuseLightingElement extends SVGElement {} +interface SVGFEDisplacementMapElement extends SVGElement {} +interface SVGFEDistantLightElement extends SVGElement {} +interface SVGFEDropShadowElement extends SVGElement {} +interface SVGFEFloodElement extends SVGElement {} +interface SVGFEFuncAElement extends SVGElement {} +interface SVGFEFuncBElement extends SVGElement {} +interface SVGFEFuncGElement extends SVGElement {} +interface SVGFEFuncRElement extends SVGElement {} +interface SVGFEGaussianBlurElement extends SVGElement {} +interface SVGFEImageElement extends SVGElement {} +interface SVGFEMergeElement extends SVGElement {} +interface SVGFEMergeNodeElement extends SVGElement {} +interface SVGFEMorphologyElement extends SVGElement {} +interface SVGFEOffsetElement extends SVGElement {} +interface SVGFEPointLightElement extends SVGElement {} +interface SVGFESpecularLightingElement extends SVGElement {} +interface SVGFESpotLightElement extends SVGElement {} +interface SVGFETileElement extends SVGElement {} +interface SVGFETurbulenceElement extends SVGElement {} +interface SVGFilterElement extends SVGElement {} +interface SVGForeignObjectElement extends SVGElement {} +interface SVGGElement extends SVGElement {} +interface SVGImageElement extends SVGElement {} +interface SVGLineElement extends SVGElement {} +interface SVGLinearGradientElement extends SVGElement {} +interface SVGMarkerElement extends SVGElement {} +interface SVGMaskElement extends SVGElement {} +interface SVGMetadataElement extends SVGElement {} +interface SVGPathElement extends SVGElement {} +interface SVGPatternElement extends SVGElement {} +interface SVGPolygonElement extends SVGElement {} +interface SVGPolylineElement extends SVGElement {} +interface SVGRadialGradientElement extends SVGElement {} +interface SVGRectElement extends SVGElement {} +interface SVGStopElement extends SVGElement {} +interface SVGSwitchElement extends SVGElement {} +interface SVGSymbolElement extends SVGElement {} +interface SVGTextElement extends SVGElement {} +interface SVGTextPathElement extends SVGElement {} +interface SVGTSpanElement extends SVGElement {} +interface SVGUseElement extends SVGElement {} +interface SVGViewElement extends SVGElement {} + +interface FormData {} +interface Text {} +interface TouchList {} +interface WebGLRenderingContext {} +interface WebGL2RenderingContext {} + +interface TrustedHTML {} diff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts new file mode 100644 index 0000000..d1128df --- /dev/null +++ b/node_modules/@types/react/index.d.ts @@ -0,0 +1,4351 @@ +// 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"; +import { Interaction as SchedulerInteraction } from "scheduler/tracing"; + +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; + } + + /** + * 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 }["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 + *
+ * ``` + */ + 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 Ref< + infer Instance + > ? 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; + + interface Attributes { + key?: Key | null | undefined; + } + 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?: Ref | undefined; + } + + /** + * Represents the built-in attributes available to class components. + */ + interface ClassAttributes 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 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; + } + + 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 {} + /** + * @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
} /> + * ``` + */ + 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( + 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, + interactions: Set, + ) => 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: Readonly

| 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

) => Pick | S | null) | (Pick | S | null), + callback?: () => void, + ): void; + + forceUpdate(callback?: () => void): void; + render(): ReactNode; + + 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

= + // 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; + onPointerEnterCapture?: PointerEventHandler | undefined; + onPointerLeave?: PointerEventHandler | undefined; + onPointerLeaveCapture?: 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; + 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 & {}); + + interface InputHTMLAttributes extends HTMLAttributes { + accept?: string | undefined; + alt?: string | undefined; + autoComplete?: string | 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 + // ---------------------------------------------------------------------- + + type Validator = PropTypes.Validator; + + type Requireable = PropTypes.Requireable; + + type ValidationMap = PropTypes.ValidationMap; + + type WeakValidationMap = { + [K in keyof T]?: null extends T[K] ? Validator + : undefined extends T[K] ? Validator + : Validator; + }; + + 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; + 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 {} diff --git a/node_modules/@types/react/jsx-dev-runtime.d.ts b/node_modules/@types/react/jsx-dev-runtime.d.ts new file mode 100644 index 0000000..14b0dfa --- /dev/null +++ b/node_modules/@types/react/jsx-dev-runtime.d.ts @@ -0,0 +1,13 @@ +import * as React from "./"; + +export namespace JSX { + type ElementType = React.JSX.ElementType; + interface Element extends React.JSX.Element {} + interface ElementClass extends React.JSX.ElementClass {} + interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {} + interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {} + type LibraryManagedAttributes = React.JSX.LibraryManagedAttributes; + interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {} + interface IntrinsicClassAttributes extends React.JSX.IntrinsicClassAttributes {} + interface IntrinsicElements extends React.JSX.IntrinsicElements {} +} diff --git a/node_modules/@types/react/jsx-runtime.d.ts b/node_modules/@types/react/jsx-runtime.d.ts new file mode 100644 index 0000000..14b0dfa --- /dev/null +++ b/node_modules/@types/react/jsx-runtime.d.ts @@ -0,0 +1,13 @@ +import * as React from "./"; + +export namespace JSX { + type ElementType = React.JSX.ElementType; + interface Element extends React.JSX.Element {} + interface ElementClass extends React.JSX.ElementClass {} + interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {} + interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {} + type LibraryManagedAttributes = React.JSX.LibraryManagedAttributes; + interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {} + interface IntrinsicClassAttributes extends React.JSX.IntrinsicClassAttributes {} + interface IntrinsicElements extends React.JSX.IntrinsicElements {} +} diff --git a/node_modules/@types/react/package.json b/node_modules/@types/react/package.json new file mode 100644 index 0000000..cc0ffec --- /dev/null +++ b/node_modules/@types/react/package.json @@ -0,0 +1,206 @@ +{ + "name": "@types/react", + "version": "18.2.55", + "description": "TypeScript definitions for react", + "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react", + "license": "MIT", + "contributors": [ + { + "name": "Asana", + "url": "https://asana.com" + }, + { + "name": "AssureSign", + "url": "http://www.assuresign.com" + }, + { + "name": "Microsoft", + "url": "https://microsoft.com" + }, + { + "name": "John Reilly", + "githubUsername": "johnnyreilly", + "url": "https://github.com/johnnyreilly" + }, + { + "name": "Benoit Benezech", + "githubUsername": "bbenezech", + "url": "https://github.com/bbenezech" + }, + { + "name": "Patricio Zavolinsky", + "githubUsername": "pzavolinsky", + "url": "https://github.com/pzavolinsky" + }, + { + "name": "Eric Anderson", + "githubUsername": "ericanderson", + "url": "https://github.com/ericanderson" + }, + { + "name": "Dovydas Navickas", + "githubUsername": "DovydasNavickas", + "url": "https://github.com/DovydasNavickas" + }, + { + "name": "Josh Rutherford", + "githubUsername": "theruther4d", + "url": "https://github.com/theruther4d" + }, + { + "name": "Guilherme Hübner", + "githubUsername": "guilhermehubner", + "url": "https://github.com/guilhermehubner" + }, + { + "name": "Ferdy Budhidharma", + "githubUsername": "ferdaber", + "url": "https://github.com/ferdaber" + }, + { + "name": "Johann Rakotoharisoa", + "githubUsername": "jrakotoharisoa", + "url": "https://github.com/jrakotoharisoa" + }, + { + "name": "Olivier Pascal", + "githubUsername": "pascaloliv", + "url": "https://github.com/pascaloliv" + }, + { + "name": "Martin Hochel", + "githubUsername": "hotell", + "url": "https://github.com/hotell" + }, + { + "name": "Frank Li", + "githubUsername": "franklixuefei", + "url": "https://github.com/franklixuefei" + }, + { + "name": "Jessica Franco", + "githubUsername": "Jessidhia", + "url": "https://github.com/Jessidhia" + }, + { + "name": "Saransh Kataria", + "githubUsername": "saranshkataria", + "url": "https://github.com/saranshkataria" + }, + { + "name": "Kanitkorn Sujautra", + "githubUsername": "lukyth", + "url": "https://github.com/lukyth" + }, + { + "name": "Sebastian Silbermann", + "githubUsername": "eps1lon", + "url": "https://github.com/eps1lon" + }, + { + "name": "Kyle Scully", + "githubUsername": "zieka", + "url": "https://github.com/zieka" + }, + { + "name": "Cong Zhang", + "githubUsername": "dancerphil", + "url": "https://github.com/dancerphil" + }, + { + "name": "Dimitri Mitropoulos", + "githubUsername": "dimitropoulos", + "url": "https://github.com/dimitropoulos" + }, + { + "name": "JongChan Choi", + "githubUsername": "disjukr", + "url": "https://github.com/disjukr" + }, + { + "name": "Victor Magalhães", + "githubUsername": "vhfmag", + "url": "https://github.com/vhfmag" + }, + { + "name": "Dale Tan", + "githubUsername": "hellatan", + "url": "https://github.com/hellatan" + }, + { + "name": "Priyanshu Rav", + "githubUsername": "priyanshurav", + "url": "https://github.com/priyanshurav" + }, + { + "name": "Dmitry Semigradsky", + "githubUsername": "Semigradsky", + "url": "https://github.com/Semigradsky" + } + ], + "main": "", + "types": "index.d.ts", + "typesVersions": { + "<=5.0": { + "*": [ + "ts5.0/*" + ] + } + }, + "exports": { + ".": { + "types@<=5.0": { + "default": "./ts5.0/index.d.ts" + }, + "types": { + "default": "./index.d.ts" + } + }, + "./canary": { + "types@<=5.0": { + "default": "./ts5.0/canary.d.ts" + }, + "types": { + "default": "./canary.d.ts" + } + }, + "./experimental": { + "types@<=5.0": { + "default": "./ts5.0/experimental.d.ts" + }, + "types": { + "default": "./experimental.d.ts" + } + }, + "./jsx-runtime": { + "types@<=5.0": { + "default": "./ts5.0/jsx-runtime.d.ts" + }, + "types": { + "default": "./jsx-runtime.d.ts" + } + }, + "./jsx-dev-runtime": { + "types@<=5.0": { + "default": "./ts5.0/jsx-dev-runtime.d.ts" + }, + "types": { + "default": "./jsx-dev-runtime.d.ts" + } + }, + "./package.json": "./package.json" + }, + "repository": { + "type": "git", + "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", + "directory": "types/react" + }, + "scripts": {}, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + }, + "typesPublisherContentHash": "41cc4f9203a010eff4158b37583d535e6867e99253ce9e203f10ddc95a2cdb36", + "typeScriptVersion": "4.6" +} \ No newline at end of file diff --git a/node_modules/@types/react/ts5.0/canary.d.ts b/node_modules/@types/react/ts5.0/canary.d.ts new file mode 100644 index 0000000..f5ba259 --- /dev/null +++ b/node_modules/@types/react/ts5.0/canary.d.ts @@ -0,0 +1,112 @@ +/** + * These are types for things that are present in the React `canary` release channel. + * + * To load the types declared here in an actual project, there are three ways. The easiest one, + * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, + * is to add `"react/canary"` to the `"types"` array. + * + * Alternatively, a specific import syntax can to be used from a typescript file. + * This module does not exist in reality, which is why the {} is important: + * + * ```ts + * import {} from 'react/canary' + * ``` + * + * It is also possible to include it through a triple-slash reference: + * + * ```ts + * /// + * ``` + * + * Either the import or the reference only needs to appear once, anywhere in the project. + */ + +// See https://github.com/facebook/react/blob/main/packages/react/src/React.js to see how the exports are declared, + +import React = require("."); + +export {}; + +declare const UNDEFINED_VOID_ONLY: unique symbol; +type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never }; + +declare module "." { + interface ThenableImpl { + then(onFulfill: (value: T) => unknown, onReject: (error: unknown) => unknown): void | PromiseLike; + } + interface UntrackedThenable extends ThenableImpl { + status?: void; + } + + export interface PendingThenable extends ThenableImpl { + status: "pending"; + } + + export interface FulfilledThenable extends ThenableImpl { + status: "fulfilled"; + value: T; + } + + export interface RejectedThenable extends ThenableImpl { + status: "rejected"; + reason: unknown; + } + + export type Thenable = UntrackedThenable | PendingThenable | FulfilledThenable | RejectedThenable; + + export type Usable = Thenable | Context; + + export function use(usable: Usable): T; + + interface ServerContextJSONArray extends ReadonlyArray {} + export type ServerContextJSONValue = + | string + | boolean + | number + | null + | ServerContextJSONArray + | { [key: string]: ServerContextJSONValue }; + export interface ServerContext { + Provider: Provider; + } + /** + * Accepts a context object (the value returned from `React.createContext` or `React.createServerContext`) and returns the current + * context value, as given by the nearest context provider for the given context. + * + * @version 16.8.0 + * @see https://react.dev/reference/react/useContext + */ + function useContext(context: ServerContext): T; + export function createServerContext( + globalName: string, + defaultValue: T, + ): ServerContext; + + // eslint-disable-next-line @typescript-eslint/ban-types + export function cache(fn: CachedFunction): CachedFunction; + + export function unstable_useCacheRefresh(): () => void; + + interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS { + functions: (formData: FormData) => void; + } + + export interface TransitionStartFunction { + /** + * Marks all state updates inside the async function as transitions + * + * @see {https://react.dev/reference/react/ts5.0/useTransition#starttransition} + * + * @param callback + */ + (callback: () => Promise): void; + } + + function useOptimistic( + passthrough: State, + ): [State, (action: State | ((pendingState: State) => State)) => void]; + function useOptimistic( + passthrough: State, + reducer: (state: State, action: Action) => State, + ): [State, (action: Action) => void]; +} diff --git a/node_modules/@types/react/ts5.0/experimental.d.ts b/node_modules/@types/react/ts5.0/experimental.d.ts new file mode 100644 index 0000000..de15239 --- /dev/null +++ b/node_modules/@types/react/ts5.0/experimental.d.ts @@ -0,0 +1,126 @@ +/** + * These are types for things that are present in the `experimental` builds of React but not yet + * on a stable build. + * + * Once they are promoted to stable they can just be moved to the main index file. + * + * To load the types declared here in an actual project, there are three ways. The easiest one, + * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, + * is to add `"react/experimental"` to the `"types"` array. + * + * Alternatively, a specific import syntax can to be used from a typescript file. + * This module does not exist in reality, which is why the {} is important: + * + * ```ts + * import {} from 'react/experimental' + * ``` + * + * It is also possible to include it through a triple-slash reference: + * + * ```ts + * /// + * ``` + * + * Either the import or the reference only needs to appear once, anywhere in the project. + */ + +// See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared, +// and https://github.com/facebook/react/blob/master/packages/shared/ReactFeatureFlags.js to verify which APIs are +// flagged experimental or not. Experimental APIs will be tagged with `__EXPERIMENTAL__`. +// +// For the inputs of types exported as simply a fiber tag, the `beginWork` function of ReactFiberBeginWork.js +// is a good place to start looking for details; it generally calls prop validation functions or delegates +// all tasks done as part of the render phase (the concurrent part of the React update cycle). +// +// Suspense-related handling can be found in ReactFiberThrow.js. + +import React = require("./canary"); + +export {}; + +declare const UNDEFINED_VOID_ONLY: unique symbol; +type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never }; + +declare module "." { + // Need an interface to not cause ReactNode to be a self-referential type. + interface PromiseLikeOfReactNode extends PromiseLike {} + interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES { + promises: PromiseLikeOfReactNode; + } + + export interface SuspenseProps { + /** + * The presence of this prop indicates that the content is computationally expensive to render. + * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data). + * @see {@link https://github.com/facebook/react/pull/19936} + */ + unstable_expectedLoadTime?: number | undefined; + } + + export type SuspenseListRevealOrder = "forwards" | "backwards" | "together"; + export type SuspenseListTailMode = "collapsed" | "hidden"; + + export interface SuspenseListCommonProps { + /** + * Note that SuspenseList require more than one child; + * it is a runtime warning to provide only a single child. + * + * It does, however, allow those children to be wrapped inside a single + * level of ``. + */ + children: ReactElement | Iterable; + } + + interface DirectionalSuspenseListProps extends SuspenseListCommonProps { + /** + * Defines the order in which the `SuspenseList` children should be revealed. + */ + revealOrder: "forwards" | "backwards"; + /** + * Dictates how unloaded items in a SuspenseList is shown. + * + * - By default, `SuspenseList` will show all fallbacks in the list. + * - `collapsed` shows only the next fallback in the list. + * - `hidden` doesn’t show any unloaded items. + */ + tail?: SuspenseListTailMode | undefined; + } + + interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps { + /** + * Defines the order in which the `SuspenseList` children should be revealed. + */ + revealOrder?: Exclude | undefined; + /** + * The tail property is invalid when not using the `forwards` or `backwards` reveal orders. + */ + tail?: never | undefined; + } + + export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps; + + /** + * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order + * in which these components are revealed to the user. + * + * When multiple components need to fetch data, this data may arrive in an unpredictable order. + * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list + * until previous items have been displayed (this behavior is adjustable). + * + * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist + * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist + */ + export const unstable_SuspenseList: ExoticComponent; + + // eslint-disable-next-line @typescript-eslint/ban-types + export function experimental_useEffectEvent(event: T): T; + + type Reference = object; + type TaintableUniqueValue = string | bigint | ArrayBufferView; + function experimental_taintUniqueValue( + message: string | undefined, + lifetime: Reference, + value: TaintableUniqueValue, + ): void; + function experimental_taintObjectReference(message: string | undefined, object: Reference): void; +} diff --git a/node_modules/@types/react/ts5.0/global.d.ts b/node_modules/@types/react/ts5.0/global.d.ts new file mode 100644 index 0000000..91094ee --- /dev/null +++ b/node_modules/@types/react/ts5.0/global.d.ts @@ -0,0 +1,158 @@ +/* +React projects that don't include the DOM library need these interfaces to compile. +React Native applications use React, but there is no DOM available. The JavaScript runtime +is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`. + +Warning: all of these interfaces are empty. If you want type definitions for various properties +(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json). +*/ + +interface Event {} +interface AnimationEvent extends Event {} +interface ClipboardEvent extends Event {} +interface CompositionEvent extends Event {} +interface DragEvent extends Event {} +interface FocusEvent extends Event {} +interface KeyboardEvent extends Event {} +interface MouseEvent extends Event {} +interface TouchEvent extends Event {} +interface PointerEvent extends Event {} +interface TransitionEvent extends Event {} +interface UIEvent extends Event {} +interface WheelEvent extends Event {} + +interface EventTarget {} +interface Document {} +interface DataTransfer {} +interface StyleMedia {} + +interface Element {} +interface DocumentFragment {} + +interface HTMLElement extends Element {} +interface HTMLAnchorElement extends HTMLElement {} +interface HTMLAreaElement extends HTMLElement {} +interface HTMLAudioElement extends HTMLElement {} +interface HTMLBaseElement extends HTMLElement {} +interface HTMLBodyElement extends HTMLElement {} +interface HTMLBRElement extends HTMLElement {} +interface HTMLButtonElement extends HTMLElement {} +interface HTMLCanvasElement extends HTMLElement {} +interface HTMLDataElement extends HTMLElement {} +interface HTMLDataListElement extends HTMLElement {} +interface HTMLDetailsElement extends HTMLElement {} +interface HTMLDialogElement extends HTMLElement {} +interface HTMLDivElement extends HTMLElement {} +interface HTMLDListElement extends HTMLElement {} +interface HTMLEmbedElement extends HTMLElement {} +interface HTMLFieldSetElement extends HTMLElement {} +interface HTMLFormElement extends HTMLElement {} +interface HTMLHeadingElement extends HTMLElement {} +interface HTMLHeadElement extends HTMLElement {} +interface HTMLHRElement extends HTMLElement {} +interface HTMLHtmlElement extends HTMLElement {} +interface HTMLIFrameElement extends HTMLElement {} +interface HTMLImageElement extends HTMLElement {} +interface HTMLInputElement extends HTMLElement {} +interface HTMLModElement extends HTMLElement {} +interface HTMLLabelElement extends HTMLElement {} +interface HTMLLegendElement extends HTMLElement {} +interface HTMLLIElement extends HTMLElement {} +interface HTMLLinkElement extends HTMLElement {} +interface HTMLMapElement extends HTMLElement {} +interface HTMLMetaElement extends HTMLElement {} +interface HTMLMeterElement extends HTMLElement {} +interface HTMLObjectElement extends HTMLElement {} +interface HTMLOListElement extends HTMLElement {} +interface HTMLOptGroupElement extends HTMLElement {} +interface HTMLOptionElement extends HTMLElement {} +interface HTMLOutputElement extends HTMLElement {} +interface HTMLParagraphElement extends HTMLElement {} +interface HTMLParamElement extends HTMLElement {} +interface HTMLPreElement extends HTMLElement {} +interface HTMLProgressElement extends HTMLElement {} +interface HTMLQuoteElement extends HTMLElement {} +interface HTMLSlotElement extends HTMLElement {} +interface HTMLScriptElement extends HTMLElement {} +interface HTMLSelectElement extends HTMLElement {} +interface HTMLSourceElement extends HTMLElement {} +interface HTMLSpanElement extends HTMLElement {} +interface HTMLStyleElement extends HTMLElement {} +interface HTMLTableElement extends HTMLElement {} +interface HTMLTableColElement extends HTMLElement {} +interface HTMLTableDataCellElement extends HTMLElement {} +interface HTMLTableHeaderCellElement extends HTMLElement {} +interface HTMLTableRowElement extends HTMLElement {} +interface HTMLTableSectionElement extends HTMLElement {} +interface HTMLTemplateElement extends HTMLElement {} +interface HTMLTextAreaElement extends HTMLElement {} +interface HTMLTimeElement extends HTMLElement {} +interface HTMLTitleElement extends HTMLElement {} +interface HTMLTrackElement extends HTMLElement {} +interface HTMLUListElement extends HTMLElement {} +interface HTMLVideoElement extends HTMLElement {} +interface HTMLWebViewElement extends HTMLElement {} + +interface SVGElement extends Element {} +interface SVGSVGElement extends SVGElement {} +interface SVGCircleElement extends SVGElement {} +interface SVGClipPathElement extends SVGElement {} +interface SVGDefsElement extends SVGElement {} +interface SVGDescElement extends SVGElement {} +interface SVGEllipseElement extends SVGElement {} +interface SVGFEBlendElement extends SVGElement {} +interface SVGFEColorMatrixElement extends SVGElement {} +interface SVGFEComponentTransferElement extends SVGElement {} +interface SVGFECompositeElement extends SVGElement {} +interface SVGFEConvolveMatrixElement extends SVGElement {} +interface SVGFEDiffuseLightingElement extends SVGElement {} +interface SVGFEDisplacementMapElement extends SVGElement {} +interface SVGFEDistantLightElement extends SVGElement {} +interface SVGFEDropShadowElement extends SVGElement {} +interface SVGFEFloodElement extends SVGElement {} +interface SVGFEFuncAElement extends SVGElement {} +interface SVGFEFuncBElement extends SVGElement {} +interface SVGFEFuncGElement extends SVGElement {} +interface SVGFEFuncRElement extends SVGElement {} +interface SVGFEGaussianBlurElement extends SVGElement {} +interface SVGFEImageElement extends SVGElement {} +interface SVGFEMergeElement extends SVGElement {} +interface SVGFEMergeNodeElement extends SVGElement {} +interface SVGFEMorphologyElement extends SVGElement {} +interface SVGFEOffsetElement extends SVGElement {} +interface SVGFEPointLightElement extends SVGElement {} +interface SVGFESpecularLightingElement extends SVGElement {} +interface SVGFESpotLightElement extends SVGElement {} +interface SVGFETileElement extends SVGElement {} +interface SVGFETurbulenceElement extends SVGElement {} +interface SVGFilterElement extends SVGElement {} +interface SVGForeignObjectElement extends SVGElement {} +interface SVGGElement extends SVGElement {} +interface SVGImageElement extends SVGElement {} +interface SVGLineElement extends SVGElement {} +interface SVGLinearGradientElement extends SVGElement {} +interface SVGMarkerElement extends SVGElement {} +interface SVGMaskElement extends SVGElement {} +interface SVGMetadataElement extends SVGElement {} +interface SVGPathElement extends SVGElement {} +interface SVGPatternElement extends SVGElement {} +interface SVGPolygonElement extends SVGElement {} +interface SVGPolylineElement extends SVGElement {} +interface SVGRadialGradientElement extends SVGElement {} +interface SVGRectElement extends SVGElement {} +interface SVGStopElement extends SVGElement {} +interface SVGSwitchElement extends SVGElement {} +interface SVGSymbolElement extends SVGElement {} +interface SVGTextElement extends SVGElement {} +interface SVGTextPathElement extends SVGElement {} +interface SVGTSpanElement extends SVGElement {} +interface SVGUseElement extends SVGElement {} +interface SVGViewElement extends SVGElement {} + +interface FormData {} +interface Text {} +interface TouchList {} +interface WebGLRenderingContext {} +interface WebGL2RenderingContext {} + +interface TrustedHTML {} diff --git a/node_modules/@types/react/ts5.0/index.d.ts b/node_modules/@types/react/ts5.0/index.d.ts new file mode 100644 index 0000000..fc7a8fc --- /dev/null +++ b/node_modules/@types/react/ts5.0/index.d.ts @@ -0,0 +1,4333 @@ +// 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"; +import { Interaction as SchedulerInteraction } from "scheduler/tracing"; + +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 component or + * a class component. + * + * @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, + ) => ReactElement | null) + | (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; + } + + /** + * 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 }["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 + *
+ * ``` + */ + 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) => ReactElement | null) + | 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 Ref< + infer Instance + > ? 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 You shouldn't need to use this type since you never see these attributes + * inside your component or have to validate them. + */ + interface Attributes { + key?: Key | null | undefined; + } + 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} + */ + ref?: Ref | undefined; + } + /** + * Represents the built-in attributes available to class components. + */ + interface ClassAttributes 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} + */ + ref?: LegacyRef | undefined; + } + + /** + * 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; + } + + 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 `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; + + /** + * 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_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
} /> + * ``` + */ + 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): ReactElement | null; + 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, + interactions: Set, + ) => 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 { + // tslint won't let me format the sample code in a way that vscode likes it :( + /** + * If set, `this.context` will be set at runtime to the current value of the given Context. + * + * @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} + */ + context: unknown; + + constructor(props: Readonly

| P); + /** + * @deprecated + * @see {@link https://legacy.reactjs.org/docs/legacy-context.html} + */ + constructor(props: P, context: any); + + // We MUST keep setState() as a unified signature because it allows proper checking of the method return type. + // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257 + // Also, the ` | S` allows intellisense to not be dumbisense + setState( + state: ((prevState: Readonly, props: Readonly

) => Pick | S | null) | (Pick | S | null), + callback?: () => void, + ): void; + + forceUpdate(callback?: () => void): void; + render(): ReactNode; + + readonly props: Readonly

; + state: Readonly; + /** + * @deprecated + * https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs + */ + 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): ReactElement | null; + /** + * 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} + */ + type VFC

= VoidFunctionComponent

; + + /** + * @deprecated - Equivalent to {@link React.FunctionComponent}. + * + * @see {@link React.FunctionComponent} + */ + interface VoidFunctionComponent

{ + (props: P, context?: any): ReactElement | null; + 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): ReactElement | null; + /** + * 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 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 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 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 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 https://legacy.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html + */ + 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

= + // 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; + + type LazyExoticComponent> = 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 + // ---------------------------------------------------------------------- + + // based on the code in https://github.com/facebook/react/pull/13968 + + /** + * 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; + onPointerEnterCapture?: PointerEventHandler | undefined; + onPointerLeave?: PointerEventHandler | undefined; + onPointerLeaveCapture?: 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; + 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 & {}); + + interface InputHTMLAttributes extends HTMLAttributes { + accept?: string | undefined; + alt?: string | undefined; + autoComplete?: string | 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 + // ---------------------------------------------------------------------- + + type Validator = PropTypes.Validator; + + type Requireable = PropTypes.Requireable; + + type ValidationMap = PropTypes.ValidationMap; + + type WeakValidationMap = { + [K in keyof T]?: null extends T[K] ? Validator + : undefined extends T[K] ? Validator + : Validator; + }; + + 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; + } + + namespace JSX { + 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 { + 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; + 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 +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 {} diff --git a/node_modules/@types/react/ts5.0/jsx-dev-runtime.d.ts b/node_modules/@types/react/ts5.0/jsx-dev-runtime.d.ts new file mode 100644 index 0000000..52cba79 --- /dev/null +++ b/node_modules/@types/react/ts5.0/jsx-dev-runtime.d.ts @@ -0,0 +1,12 @@ +import * as React from "./"; + +export namespace JSX { + interface Element extends React.JSX.Element {} + interface ElementClass extends React.JSX.ElementClass {} + interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {} + interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {} + type LibraryManagedAttributes = React.JSX.LibraryManagedAttributes; + interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {} + interface IntrinsicClassAttributes extends React.JSX.IntrinsicClassAttributes {} + interface IntrinsicElements extends React.JSX.IntrinsicElements {} +} diff --git a/node_modules/@types/react/ts5.0/jsx-runtime.d.ts b/node_modules/@types/react/ts5.0/jsx-runtime.d.ts new file mode 100644 index 0000000..52cba79 --- /dev/null +++ b/node_modules/@types/react/ts5.0/jsx-runtime.d.ts @@ -0,0 +1,12 @@ +import * as React from "./"; + +export namespace JSX { + interface Element extends React.JSX.Element {} + interface ElementClass extends React.JSX.ElementClass {} + interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {} + interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {} + type LibraryManagedAttributes = React.JSX.LibraryManagedAttributes; + interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {} + interface IntrinsicClassAttributes extends React.JSX.IntrinsicClassAttributes {} + interface IntrinsicElements extends React.JSX.IntrinsicElements {} +} diff --git a/node_modules/@types/scheduler/LICENSE b/node_modules/@types/scheduler/LICENSE new file mode 100644 index 0000000..9e841e7 --- /dev/null +++ b/node_modules/@types/scheduler/LICENSE @@ -0,0 +1,21 @@ + MIT License + + Copyright (c) Microsoft Corporation. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE diff --git a/node_modules/@types/scheduler/README.md b/node_modules/@types/scheduler/README.md new file mode 100644 index 0000000..b1890d1 --- /dev/null +++ b/node_modules/@types/scheduler/README.md @@ -0,0 +1,15 @@ +# Installation +> `npm install --save @types/scheduler` + +# Summary +This package contains type definitions for scheduler (https://reactjs.org/). + +# Details +Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/scheduler. + +### Additional Details + * Last updated: Wed, 22 Nov 2023 00:24:48 GMT + * Dependencies: none + +# Credits +These definitions were written by [Nathan Bierema](https://github.com/Methuselah96), and [Sebastian Silbermann](https://github.com/eps1lon). diff --git a/node_modules/@types/scheduler/index.d.ts b/node_modules/@types/scheduler/index.d.ts new file mode 100644 index 0000000..e30b3bd --- /dev/null +++ b/node_modules/@types/scheduler/index.d.ts @@ -0,0 +1,30 @@ +// eslint-disable-next-line @typescript-eslint/no-invalid-void-type +export type FrameCallbackType = (didTimeout: boolean) => FrameCallbackType | void; +export interface CallbackNode { + callback: FrameCallbackType; + priorityLevel: number; + expirationTime: number; + next: CallbackNode | null; + prev: CallbackNode | null; +} + +export const unstable_ImmediatePriority = 1; +export const unstable_UserBlockingPriority = 2; +export const unstable_NormalPriority = 3; +export const unstable_IdlePriority = 5; +export const unstable_LowPriority = 4; +export function unstable_runWithPriority(priorityLevel: number, eventHandler: () => T): T; +export function unstable_scheduleCallback( + priorityLevel: number, + callback: FrameCallbackType, + options?: { delay?: number | undefined; timeout?: number | undefined }, +): CallbackNode; +export function unstable_next(eventHandler: () => T): T; +export function unstable_cancelCallback(callbackNode: CallbackNode): void; +export function unstable_wrapCallback(callback: FrameCallbackType): () => FrameCallbackType; +export function unstable_getCurrentPriorityLevel(): number; +export function unstable_shouldYield(): boolean; +export function unstable_continueExecution(): void; +export function unstable_pauseExecution(): void; +export function unstable_getFirstCallbackNode(): CallbackNode | null; +export function unstable_now(): number; diff --git a/node_modules/@types/scheduler/package.json b/node_modules/@types/scheduler/package.json new file mode 100644 index 0000000..3de54c8 --- /dev/null +++ b/node_modules/@types/scheduler/package.json @@ -0,0 +1,30 @@ +{ + "name": "@types/scheduler", + "version": "0.16.8", + "description": "TypeScript definitions for scheduler", + "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/scheduler", + "license": "MIT", + "contributors": [ + { + "name": "Nathan Bierema", + "githubUsername": "Methuselah96", + "url": "https://github.com/Methuselah96" + }, + { + "name": "Sebastian Silbermann", + "githubUsername": "eps1lon", + "url": "https://github.com/eps1lon" + } + ], + "main": "", + "types": "index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git", + "directory": "types/scheduler" + }, + "scripts": {}, + "dependencies": {}, + "typesPublisherContentHash": "9d7d043580552b4f12920f8562a456a2a9799eee67136f013daf1bf22f17fbb6", + "typeScriptVersion": "4.5" +} \ No newline at end of file diff --git a/node_modules/@types/scheduler/tracing.d.ts b/node_modules/@types/scheduler/tracing.d.ts new file mode 100644 index 0000000..4b8ff9a --- /dev/null +++ b/node_modules/@types/scheduler/tracing.d.ts @@ -0,0 +1,127 @@ +// disable automatic export +export {}; +/** + * This type is only interesting if you're only using this module for a specifc build environment. + * + * With module augmentation you can declare what build of scheduler you are using by + * augmenting this interface with e.g. `interface Build { type: 'development'; }` + * Depending on the build some exported members have different types. + * Possible values are `production`, `profiling` and `development`. + * The default behavior for the types is to use a union of all possible types. + */ +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface Build {} + +export type EnableSchedulerTracing = Build extends { type: infer BuildType } + ? BuildType extends "production" | "profiling" ? false + : BuildType extends "development" ? true + : undefined + : undefined; + +type TypeByBuildFlag< + Flag extends boolean | undefined, + WhenTrue, + WhenFalse, +> = Flag extends undefined ? (WhenTrue | WhenFalse) + : Flag extends true ? WhenTrue + : WhenFalse; + +type IfSchedulerTracing = TypeByBuildFlag< + EnableSchedulerTracing, + WhenTrue, + WhenFalse +>; + +export interface Interaction { + __count: number; + id: number; + name: string; + timestamp: number; +} + +export interface Subscriber { + /** + * A new interaction has been created via the trace() method. + */ + onInteractionTraced: (interaction: Interaction) => void; + + /** + * All scheduled async work for an interaction has finished. + */ + onInteractionScheduledWorkCompleted: (interaction: Interaction) => void; + + /** + * New async work has been scheduled for a set of interactions. + * When this work is later run, onWorkStarted/onWorkStopped will be called. + * A batch of async/yieldy work may be scheduled multiple times before completing. + * In that case, onWorkScheduled may be called more than once before onWorkStopped. + * Work is scheduled by a "thread" which is identified by a unique ID. + */ + onWorkScheduled: (interactions: Set, threadID: number) => void; + + /** + * A batch of scheduled work has been canceled. + * Work is done by a "thread" which is identified by a unique ID. + */ + onWorkCanceled: (interactions: Set, threadID: number) => void; + + /** + * A batch of work has started for a set of interactions. + * When this work is complete, onWorkStopped will be called. + * Work is not always completed synchronously; yielding may occur in between. + * A batch of async/yieldy work may also be re-started before completing. + * In that case, onWorkStarted may be called more than once before onWorkStopped. + * Work is done by a "thread" which is identified by a unique ID. + */ + onWorkStarted: (interactions: Set, threadID: number) => void; + + /** + * A batch of work has completed for a set of interactions. + * Work is done by a "thread" which is identified by a unique ID. + */ + onWorkStopped: (interactions: Set, threadID: number) => void; +} + +export interface InteractionsRef { + current: Set; +} + +export interface SubscriberRef { + current: Subscriber | null; +} + +export const __interactionsRef: IfSchedulerTracing; +export const __subscriberRef: IfSchedulerTracing; + +export function unstable_clear(callback: () => T): T; + +export function unstable_getCurrent(): Set | null; + +export function unstable_getThreadID(): number; + +export function unstable_trace( + name: string, + timestamp: number, + callback: () => T, + threadID?: number, +): T; + +export type WrappedFunction any> = T & { + cancel: () => void; +}; + +/** + * The callback is immediately returned if the enableSchedulerTracing is disabled. + * It is unclear for which bundles this is the case. + * + * @param callback + * @param threadID + */ +export function unstable_wrap any>( + callback: T, + threadID?: number, +): IfSchedulerTracing, T>; + +export function unstable_subscribe(subscriber: Subscriber): void; + +export function unstable_unsubscribe(subscriber: Subscriber): void; diff --git a/node_modules/csstype/LICENSE b/node_modules/csstype/LICENSE new file mode 100644 index 0000000..ac06f62 --- /dev/null +++ b/node_modules/csstype/LICENSE @@ -0,0 +1,19 @@ +Copyright (c) 2017-2018 Fredrik Nicol + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/node_modules/csstype/README.md b/node_modules/csstype/README.md new file mode 100644 index 0000000..75947e1 --- /dev/null +++ b/node_modules/csstype/README.md @@ -0,0 +1,277 @@ +# CSSType + +[![npm](https://img.shields.io/npm/v/csstype.svg)](https://www.npmjs.com/package/csstype) + +TypeScript and Flow definitions for CSS, generated by [data from MDN](https://github.com/mdn/data). It provides autocompletion and type checking for CSS properties and values. + +**TypeScript** + +```ts +import type * as CSS from 'csstype'; + +const style: CSS.Properties = { + colour: 'white', // Type error on property + textAlign: 'middle', // Type error on value +}; +``` + +**Flow** + +```js +// @flow strict +import * as CSS from 'csstype'; + +const style: CSS.Properties<> = { + colour: 'white', // Type error on property + textAlign: 'middle', // Type error on value +}; +``` + +_Further examples below will be in TypeScript!_ + +## Getting started + +```sh +$ npm install csstype +``` + +## Table of content + +- [Style types](#style-types) +- [At-rule types](#at-rule-types) +- [Pseudo types](#pseudo-types) +- [Generics](#generics) +- [Usage](#usage) +- [What should I do when I get type errors?](#what-should-i-do-when-i-get-type-errors) +- [Version 3.0](#version-30) +- [Contributing](#contributing) + +## Style types + +Properties are categorized in different uses and in several technical variations to provide typings that suits as many as possible. + +| | Default | `Hyphen` | `Fallback` | `HyphenFallback` | +| -------------- | -------------------- | -------------------------- | ---------------------------- | ---------------------------------- | +| **All** | `Properties` | `PropertiesHyphen` | `PropertiesFallback` | `PropertiesHyphenFallback` | +| **`Standard`** | `StandardProperties` | `StandardPropertiesHyphen` | `StandardPropertiesFallback` | `StandardPropertiesHyphenFallback` | +| **`Vendor`** | `VendorProperties` | `VendorPropertiesHyphen` | `VendorPropertiesFallback` | `VendorPropertiesHyphenFallback` | +| **`Obsolete`** | `ObsoleteProperties` | `ObsoletePropertiesHyphen` | `ObsoletePropertiesFallback` | `ObsoletePropertiesHyphenFallback` | +| **`Svg`** | `SvgProperties` | `SvgPropertiesHyphen` | `SvgPropertiesFallback` | `SvgPropertiesHyphenFallback` | + +Categories: + +- **All** - Includes `Standard`, `Vendor`, `Obsolete` and `Svg` +- **`Standard`** - Current properties and extends subcategories `StandardLonghand` and `StandardShorthand` _(e.g. `StandardShorthandProperties`)_ +- **`Vendor`** - Vendor prefixed properties and extends subcategories `VendorLonghand` and `VendorShorthand` _(e.g. `VendorShorthandProperties`)_ +- **`Obsolete`** - Removed or deprecated properties +- **`Svg`** - SVG-specific properties + +Variations: + +- **Default** - JavaScript (camel) cased property names +- **`Hyphen`** - CSS (kebab) cased property names +- **`Fallback`** - Also accepts array of values e.g. `string | string[]` + +## At-rule types + +At-rule interfaces with descriptors. + +**TypeScript**: These will be found in the `AtRule` namespace, e.g. `AtRule.Viewport`. +**Flow**: These will be prefixed with `AtRule$`, e.g. `AtRule$Viewport`. + +| | Default | `Hyphen` | `Fallback` | `HyphenFallback` | +| -------------------- | -------------- | -------------------- | ---------------------- | ---------------------------- | +| **`@counter-style`** | `CounterStyle` | `CounterStyleHyphen` | `CounterStyleFallback` | `CounterStyleHyphenFallback` | +| **`@font-face`** | `FontFace` | `FontFaceHyphen` | `FontFaceFallback` | `FontFaceHyphenFallback` | +| **`@viewport`** | `Viewport` | `ViewportHyphen` | `ViewportFallback` | `ViewportHyphenFallback` | + +## Pseudo types + +String literals of pseudo classes and pseudo elements + +- `Pseudos` + + Extends: + + - `AdvancedPseudos` + + Function-like pseudos e.g. `:not(:first-child)`. The string literal contains the value excluding the parenthesis: `:not`. These are separated because they require an argument that results in infinite number of variations. + + - `SimplePseudos` + + Plain pseudos e.g. `:hover` that can only be **one** variation. + +## Generics + +All interfaces has two optional generic argument to define length and time: `CSS.Properties` + +- **Length** is the first generic parameter and defaults to `string | 0` because `0` is the only [length where the unit identifier is optional](https://drafts.csswg.org/css-values-3/#lengths). You can specify this, e.g. `string | number`, for platforms and libraries that accepts any numeric value as length with a specific unit. + ```tsx + const style: CSS.Properties = { + width: 100, + }; + ``` +- **Time** is the second generic argument and defaults to `string`. You can specify this, e.g. `string | number`, for platforms and libraries that accepts any numeric value as length with a specific unit. + ```tsx + const style: CSS.Properties = { + transitionDuration: 1000, + }; + ``` + +## Usage + +```ts +import type * as CSS from 'csstype'; + +const style: CSS.Properties = { + width: '10px', + margin: '1em', +}; +``` + +In some cases, like for CSS-in-JS libraries, an array of values is a way to provide fallback values in CSS. Using `CSS.PropertiesFallback` instead of `CSS.Properties` will add the possibility to use any property value as an array of values. + +```ts +import type * as CSS from 'csstype'; + +const style: CSS.PropertiesFallback = { + display: ['-webkit-flex', 'flex'], + color: 'white', +}; +``` + +There's even string literals for pseudo selectors and elements. + +```ts +import type * as CSS from 'csstype'; + +const pseudos: { [P in CSS.SimplePseudos]?: CSS.Properties } = { + ':hover': { + display: 'flex', + }, +}; +``` + +Hyphen cased (kebab cased) properties are provided in `CSS.PropertiesHyphen` and `CSS.PropertiesHyphenFallback`. It's not **not** added by default in `CSS.Properties`. To allow both of them, you can simply extend with `CSS.PropertiesHyphen` or/and `CSS.PropertiesHyphenFallback`. + +```ts +import type * as CSS from 'csstype'; + +interface Style extends CSS.Properties, CSS.PropertiesHyphen {} + +const style: Style = { + 'flex-grow': 1, + 'flex-shrink': 0, + 'font-weight': 'normal', + backgroundColor: 'white', +}; +``` + +Adding type checked CSS properties to a `HTMLElement`. + +```ts +import type * as CSS from 'csstype'; + +const style: CSS.Properties = { + color: 'red', + margin: '1em', +}; + +let button = document.createElement('button'); + +Object.assign(button.style, style); +``` + +## What should I do when I get type errors? + +The goal is to have as perfect types as possible and we're trying to do our best. But with CSS Custom Properties, the CSS specification changing frequently and vendors implementing their own specifications with new releases sometimes causes type errors even if it should work. Here's some steps you could take to get it fixed: + +_If you're using CSS Custom Properties you can step directly to step 3._ + +1. **First of all, make sure you're doing it right.** A type error could also indicate that you're not :wink: + + - Some CSS specs that some vendors has implemented could have been officially rejected or haven't yet received any official acceptance and are therefor not included + - If you're using TypeScript, [type widening](https://blog.mariusschulz.com/2017/02/04/TypeScript-2-1-literal-type-widening) could be the reason you get `Type 'string' is not assignable to...` errors + +2. **Have a look in [issues](https://github.com/frenic/csstype/issues) to see if an issue already has been filed. If not, create a new one.** To help us out, please refer to any information you have found. +3. Fix the issue locally with **TypeScript** (Flow further down): + + - The recommended way is to use **module augmentation**. Here's a few examples: + + ```ts + // My css.d.ts file + import type * as CSS from 'csstype'; + + declare module 'csstype' { + interface Properties { + // Add a missing property + WebkitRocketLauncher?: string; + + // Add a CSS Custom Property + '--theme-color'?: 'black' | 'white'; + + // Allow namespaced CSS Custom Properties + [index: `--theme-${string}`]: any; + + // Allow any CSS Custom Properties + [index: `--${string}`]: any; + + // ...or allow any other property + [index: string]: any; + } + } + ``` + + - The alternative way is to use **type assertion**. Here's a few examples: + + ```ts + const style: CSS.Properties = { + // Add a missing property + ['WebkitRocketLauncher' as any]: 'launching', + + // Add a CSS Custom Property + ['--theme-color' as any]: 'black', + }; + ``` + + Fix the issue locally with **Flow**: + + - Use **type assertion**. Here's a few examples: + + ```js + const style: $Exact> = { + // Add a missing property + [('WebkitRocketLauncher': any)]: 'launching', + + // Add a CSS Custom Property + [('--theme-color': any)]: 'black', + }; + ``` + +## Version 3.0 + +- **All property types are exposed with namespace** + TypeScript: `Property.AlignContent` (was `AlignContentProperty` before) + Flow: `Property$AlignContent` +- **All at-rules are exposed with namespace** + TypeScript: `AtRule.FontFace` (was `FontFace` before) + Flow: `AtRule$FontFace` +- **Data types are NOT exposed** + E.g. `Color` and `Box`. Because the generation of data types may suddenly be removed or renamed. +- **TypeScript hack for autocompletion** + Uses `(string & {})` for literal string unions and `(number & {})` for literal number unions ([related issue](https://github.com/microsoft/TypeScript/issues/29729)). Utilize `PropertyValue` to unpack types from e.g. `(string & {})` to `string`. +- **New generic for time** + Read more on the ["Generics"](#generics) section. +- **Flow types improvements** + Flow Strict enabled and exact types are used. + +## Contributing + +**Never modify `index.d.ts` and `index.js.flow` directly. They are generated automatically and committed so that we can easily follow any change it results in.** Therefor it's important that you run `$ git config merge.ours.driver true` after you've forked and cloned. That setting prevents merge conflicts when doing rebase. + +### Commands + +- `npm run build` Generates typings and type checks them +- `npm run watch` Runs build on each save +- `npm run test` Runs the tests +- `npm run lazy` Type checks, lints and formats everything diff --git a/node_modules/csstype/index.d.ts b/node_modules/csstype/index.d.ts new file mode 100644 index 0000000..b466d21 --- /dev/null +++ b/node_modules/csstype/index.d.ts @@ -0,0 +1,21297 @@ +export {}; + +export type PropertyValue = TValue extends Array + ? Array + : TValue extends infer TUnpacked & {} + ? TUnpacked + : TValue; + +export type Fallback = { [P in keyof T]: T[P] | readonly NonNullable[] }; + +export interface StandardLonghandProperties { + /** + * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. + * + * **Syntax**: `auto | ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :------: | :--: | :-: | + * | **93** | **92** | **15.4** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/accent-color + */ + accentColor?: Property.AccentColor | undefined; + /** + * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. + * + * **Syntax**: `normal | | | ? ` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **28** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-content + */ + alignContent?: Property.AlignContent | undefined; + /** + * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. + * + * **Syntax**: `normal | stretch | | [ ? ]` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-items + */ + alignItems?: Property.AlignItems | undefined; + /** + * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. + * + * **Syntax**: `auto | normal | stretch | | ? ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **10** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-self + */ + alignSelf?: Property.AlignSelf | undefined; + /** + * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. + * + * **Syntax**: `[ normal | | | ? ]#` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :----: | :--: | :-: | + * | No | n/a | No | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks + */ + alignTracks?: Property.AlignTracks | undefined; + /** + * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. + * + * **Syntax**: `#` + * + * **Initial value**: `replace` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :-----: | :-----: | :----: | :--: | :-: | + * | **112** | **115** | **16** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/animation-composition + */ + animationComposition?: Property.AnimationComposition | undefined; + /** + * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. + * + * **Syntax**: `