Remove JSX global type everywhere (#5117)

* Remove JSX global type everywhere

* Add JSX to restricted globals

* Fix last instances of JSX global

.eslintrc.js

@@ -175,6 +175,10 @@ module.exports = {
             name: 'require',
             message: 'Use import instead',
           },
+          {
+            name: 'JSX',
+            message: 'Use h.JSX.Element, ComponentChild, or ComponentChildren from Preact',
+          },
         ],
         'import/extensions': ['error', 'ignorePackages'],
       },
@@ -479,7 +483,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/@uppy/*/src/**/*.ts', 'packages/@uppy/*/src/**/*.tsx'],
+      files: ['packages/@uppy/*/src/**/*.ts'],
       excludedFiles: ['packages/@uppy/**/*.test.ts', 'packages/@uppy/core/src/mocks/*.ts'],
       rules: {
         '@typescript-eslint/explicit-module-boundary-types': 'error',

packages/@uppy/audio/src/Audio.tsx

@@ -348,7 +348,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     })
   }
 
-  render(): JSX.Element {
+  render() {
     if (!this.#audioActive) {
       this.#start()
     }

packages/@uppy/audio/src/AudioSourceSelect.tsx

@@ -10,7 +10,7 @@ export default ({
   currentDeviceId,
   audioSources,
   onChangeSource,
-}: AudioSourceSelectProps): JSX.Element => {
+}: AudioSourceSelectProps) => {
   return (
     <div className="uppy-Audio-videoSource">
       <select

packages/@uppy/audio/src/DiscardButton.tsx

@@ -6,7 +6,7 @@ interface DiscardButtonProps {
   i18n: I18n
 }
 
-function DiscardButton({ onDiscard, i18n }: DiscardButtonProps): JSX.Element {
+function DiscardButton({ onDiscard, i18n }: DiscardButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Audio-button"

packages/@uppy/audio/src/PermissionsScreen.tsx

@@ -2,12 +2,12 @@ import type { I18n } from '@uppy/utils/lib/Translator'
 import { h } from 'preact'
 
 interface PermissionsScreenProps {
-  icon: () => JSX.Element | null
+  icon: () => h.JSX.Element | null
   hasAudio: boolean
   i18n: I18n
 }
 
-export default (props: PermissionsScreenProps): JSX.Element => {
+export default (props: PermissionsScreenProps) => {
   const { icon, hasAudio, i18n } = props
   return (
     <div className="uppy-Audio-permissons">

packages/@uppy/audio/src/RecordButton.tsx

@@ -13,7 +13,7 @@ export default function RecordButton({
   onStartRecording,
   onStopRecording,
   i18n,
-}: RecordButtonProps): JSX.Element {
+}: RecordButtonProps) {
   if (recording) {
     return (
       <button

packages/@uppy/audio/src/RecordingLength.tsx

@@ -10,7 +10,7 @@ interface RecordingLengthProps {
 export default function RecordingLength({
   recordingLengthSeconds,
   i18n,
-}: RecordingLengthProps): JSX.Element {
+}: RecordingLengthProps) {
   const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds)
 
   return (

packages/@uppy/audio/src/RecordingScreen.tsx

@@ -26,9 +26,7 @@ interface RecordingScreenProps extends AudioSourceSelectProps {
   recordingLengthSeconds: number
 }
 
-export default function RecordingScreen(
-  props: RecordingScreenProps,
-): JSX.Element {
+export default function RecordingScreen(props: RecordingScreenProps) {
   const {
     stream,
     recordedAudio,

packages/@uppy/audio/src/SubmitButton.tsx

@@ -6,7 +6,7 @@ interface SubmitButtonProps {
   i18n: I18n
 }
 
-function SubmitButton({ onSubmit, i18n }: SubmitButtonProps): JSX.Element {
+function SubmitButton({ onSubmit, i18n }: SubmitButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Audio-button uppy-Audio-button--submit"

packages/@uppy/box/src/Box.tsx

@@ -25,7 +25,7 @@ export default class Box<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/core/src/Uppy.ts

@@ -1,6 +1,7 @@
 /* eslint-disable max-classes-per-file */
 /* global AggregateError */
 
+import type { h } from 'preact'
 import Translator from '@uppy/utils/lib/Translator'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore untyped
@@ -95,7 +96,7 @@ export type UnknownProviderPlugin<
   onFirstRender: () => void
   title: string
   files: UppyFile<M, B>[]
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
   provider: CompanionClientProvider
   storage: {
     getItem: (key: string) => Promise<string | null>
@@ -131,7 +132,7 @@ export type UnknownSearchProviderPlugin<
 > = UnknownPlugin<M, B, UnknownSearchProviderPluginState> & {
   onFirstRender: () => void
   title: string
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
   provider: CompanionClientSearchProvider
 }
 

packages/@uppy/dashboard/src/Dashboard.tsx

@@ -1149,7 +1149,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       .map(this.#attachRenderFunctionToTarget)
   })
 
-  render = (state: State<M, B>): JSX.Element => {
+  render = (state: State<M, B>) => {
     const pluginState = this.getPluginState()
     const { files, capabilities, allowNewUpload } = state
     const {

packages/@uppy/dashboard/src/components/Dashboard.tsx

@@ -25,7 +25,7 @@ const HEIGHT_MD = 330
 
 type $TSFixMe = any
 
-export default function Dashboard(props: $TSFixMe): JSX.Element {
+export default function Dashboard(props: $TSFixMe) {
   const isNoFiles = props.totalFileCount === 0
   const isSingleFile = props.totalFileCount === 1
   const isSizeMD = props.containerWidth > WIDTH_MD

packages/@uppy/dashboard/src/components/EditorPanel.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 type $TSFixMe = any
 
-function EditorPanel(props: $TSFixMe): JSX.Element {
+function EditorPanel(props: $TSFixMe) {
   const file = props.files[props.fileCardFor]
 
   const handleCancel = () => {

packages/@uppy/dashboard/src/components/FileCard/RenderMetaFields.tsx

@@ -2,7 +2,7 @@ import { h } from 'preact'
 
 type $TSFixMe = any
 
-export default function RenderMetaFields(props: $TSFixMe): JSX.Element {
+export default function RenderMetaFields(props: $TSFixMe) {
   const {
     computedMetaFields,
     requiredMetaFields,

packages/@uppy/dashboard/src/components/FileCard/index.tsx

@@ -9,7 +9,7 @@ import RenderMetaFields from './RenderMetaFields.tsx'
 
 type $TSFixMe = any
 
-export default function FileCard(props: $TSFixMe): JSX.Element {
+export default function FileCard(props: $TSFixMe) {
   const {
     files,
     fileCardFor,

packages/@uppy/dashboard/src/components/FileItem/MetaErrorMessage.tsx

@@ -8,7 +8,7 @@ const metaFieldIdToName = (metaFieldId: $TSFixMe, metaFields: $TSFixMe) => {
   return field[0].name
 }
 
-export default function MetaErrorMessage(props: $TSFixMe): JSX.Element {
+export default function MetaErrorMessage(props: $TSFixMe) {
   const { file, toggleFileCard, i18n, metaFields } = props
   const { missingRequiredMetaFields } = file
   if (!missingRequiredMetaFields?.length) {

packages/@uppy/dashboard/src/components/FileList.tsx

@@ -49,7 +49,7 @@ export default function FileList({
   toggleAddFilesPanel,
   containerWidth,
   containerHeight,
-}: $TSFixMe): JSX.Element {
+}: $TSFixMe) {
   // It's not great that this is hardcoded!
   // It's ESPECIALLY not great that this is checking against `itemsPerRow`!
   const rowHeight =

packages/@uppy/dashboard/src/components/FilePreview.tsx

@@ -3,7 +3,7 @@ import getFileTypeIcon from '../utils/getFileTypeIcon.tsx'
 
 type $TSFixMe = any
 
-export default function FilePreview(props: $TSFixMe): JSX.Element {
+export default function FilePreview(props: $TSFixMe) {
   const { file } = props
 
   if (file.preview) {

packages/@uppy/dashboard/src/components/PickerPanelContent.tsx

@@ -11,7 +11,7 @@ function PickerPanelContent({
   i18n,
   state,
   uppy,
-}: $TSFixMe): JSX.Element {
+}: $TSFixMe) {
   return (
     <div
       className={classNames('uppy-DashboardContent-panel', className)}

packages/@uppy/dashboard/src/components/PickerPanelTopBar.tsx

@@ -94,7 +94,7 @@ function UploadStatus({
   }
 }
 
-function PanelTopBar(props: $TSFixMe): JSX.Element {
+function PanelTopBar(props: $TSFixMe) {
   const {
     i18n,
     isAllComplete,

packages/@uppy/dashboard/src/components/Slide.tsx

@@ -19,11 +19,7 @@ const duration = 250
  * but it should be simple to extend this for any type of single-element
  * transition by setting the CSS name and duration as props.
  */
-function Slide({
-  children,
-}: {
-  children: ComponentChildren
-}): JSX.Element | null {
+function Slide({ children }: { children: ComponentChildren }) {
   const [cachedChildren, setCachedChildren] = useState<VNode<{
     className?: string
   }> | null>(null)

packages/@uppy/dropbox/src/Dropbox.tsx

@@ -25,7 +25,7 @@ export default class Dropbox<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/facebook/src/Facebook.tsx

@@ -25,7 +25,7 @@ export default class Facebook<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/file-input/src/FileInput.tsx

@@ -94,7 +94,7 @@ export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
       overflow: 'hidden',
       position: 'absolute',
       zIndex: -1,
-    } satisfies JSX.IntrinsicElements['input']['style']
+    } satisfies h.JSX.IntrinsicElements['input']['style']
 
     const { restrictions } = this.uppy.opts
     const accept =

packages/@uppy/google-drive/src/GoogleDrive.tsx

@@ -24,7 +24,7 @@ export default class GoogleDrive<
 > extends UIPlugin<GoogleDriveOptions, M, B, UnknownProviderPluginState> {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/image-editor/src/Editor.tsx

@@ -141,7 +141,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     this.cropper.scale(scaleFactorX, scaleFactor)
   }
 
-  renderGranularRotate(): JSX.Element {
+  renderGranularRotate() {
     const { i18n } = this.props
     const { angleGranular } = this.state
 
@@ -166,7 +166,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderRevert(): JSX.Element {
+  renderRevert() {
     const { i18n, opts } = this.props
 
     return (
@@ -198,7 +198,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderRotate(): JSX.Element {
+  renderRotate() {
     const { i18n } = this.props
 
     return (
@@ -224,7 +224,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderFlip(): JSX.Element {
+  renderFlip() {
     const { i18n } = this.props
 
     return (
@@ -252,7 +252,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderZoomIn(): JSX.Element {
+  renderZoomIn() {
     const { i18n } = this.props
 
     return (
@@ -279,7 +279,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderZoomOut(): JSX.Element {
+  renderZoomOut() {
     const { i18n } = this.props
 
     return (
@@ -305,7 +305,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderCropSquare(): JSX.Element {
+  renderCropSquare() {
     const { i18n } = this.props
 
     return (
@@ -331,7 +331,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderCropWidescreen(): JSX.Element {
+  renderCropWidescreen() {
     const { i18n } = this.props
 
     return (
@@ -357,7 +357,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderCropWidescreenVertical(): JSX.Element {
+  renderCropWidescreenVertical() {
     const { i18n } = this.props
 
     return (
@@ -383,7 +383,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  render(): JSX.Element {
+  render() {
     const { currentImage, opts } = this.props
     const { actions } = opts
     const imageURL = URL.createObjectURL(currentImage.data)

packages/@uppy/image-editor/src/ImageEditor.tsx

@@ -218,7 +218,7 @@ export default class ImageEditor<
     this.unmount()
   }
 
-  render(): JSX.Element | null {
+  render() {
     const { currentImage } = this.getPluginState()
 
     if (currentImage === null || currentImage.isRemote) {

packages/@uppy/instagram/src/Instagram.tsx

@@ -25,7 +25,7 @@ export default class Instagram<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/onedrive/src/OneDrive.tsx

@@ -25,7 +25,7 @@ export default class OneDrive<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/provider-views/src/Breadcrumbs.tsx

@@ -29,13 +29,13 @@ const Breadcrumb = (props: BreadcrumbProps) => {
 type BreadcrumbsProps<M extends Meta, B extends Body> = {
   getFolder: ProviderView<M, B>['getFolder']
   title: string
-  breadcrumbsIcon: JSX.Element
+  breadcrumbsIcon: h.JSX.Element
   breadcrumbs: UnknownProviderPluginState['breadcrumbs']
 }
 
 export default function Breadcrumbs<M extends Meta, B extends Body>(
   props: BreadcrumbsProps<M, B>,
-): JSX.Element {
+) {
   const { getFolder, title, breadcrumbsIcon, breadcrumbs } = props
 
   return (

packages/@uppy/provider-views/src/Browser.tsx

@@ -31,9 +31,7 @@ type ListItemProps<M extends Meta, B extends Body> = {
   f: CompanionFile
 }
 
-function ListItem<M extends Meta, B extends Body>(
-  props: ListItemProps<M, B>,
-): JSX.Element {
+function ListItem<M extends Meta, B extends Body>(props: ListItemProps<M, B>) {
   const {
     currentSelection,
     uppyFiles,
@@ -96,7 +94,7 @@ type BrowserProps<M extends Meta, B extends Body> = {
   files: CompanionFile[]
   uppyFiles: UppyFile<M, B>[]
   viewType: string
-  headerComponent?: JSX.Element
+  headerComponent?: h.JSX.Element
   showBreadcrumbs: boolean
   isChecked: (file: any) => boolean
   toggleCheckbox: (event: Event, file: CompanionFile) => void
@@ -120,9 +118,7 @@ type BrowserProps<M extends Meta, B extends Body> = {
   loadAllFiles?: boolean
 }
 
-function Browser<M extends Meta, B extends Body>(
-  props: BrowserProps<M, B>,
-): JSX.Element {
+function Browser<M extends Meta, B extends Body>(props: BrowserProps<M, B>) {
   const {
     currentSelection,
     folders,

packages/@uppy/provider-views/src/FooterActions.tsx

@@ -11,7 +11,7 @@ export default function FooterActions({
   done: () => void
   i18n: I18n
   selected: number
-}): JSX.Element {
+}) {
   return (
     <div className="uppy-ProviderBrowser-footer">
       <button

packages/@uppy/provider-views/src/Item/components/GridLi.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/require-default-props */
-import { h } from 'preact'
+import { h, type ComponentChildren } from 'preact'
 import classNames from 'classnames'
 import type { RestrictionError } from '@uppy/core/lib/Restricter'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
@@ -15,7 +15,7 @@ type GridListItemProps<M extends Meta, B extends Body> = {
   toggleCheckbox: (event: Event) => void
   recordShiftKeyPress: (event: KeyboardEvent) => void
   id: string
-  children?: JSX.Element
+  children?: ComponentChildren
 }
 
 function GridListItem<M extends Meta, B extends Body>(

packages/@uppy/provider-views/src/Loader.tsx

@@ -7,7 +7,7 @@ export default function Loader({
 }: {
   i18n: I18n
   loading: string | boolean
-}): JSX.Element {
+}) {
   return (
     <div className="uppy-Provider-loading">
       <span>{i18n('loading')}</span>

packages/@uppy/provider-views/src/ProviderView/AuthView.tsx

@@ -9,7 +9,7 @@ import type ProviderViews from './ProviderView'
 type AuthViewProps<M extends Meta, B extends Body> = {
   loading: boolean | string
   pluginName: string
-  pluginIcon: () => JSX.Element
+  pluginIcon: () => h.JSX.Element
   i18n: Translator['translateArray']
   handleAuth: ProviderViews<M, B>['handleAuth']
   renderForm?: ProviderViewOptions<M, B>['renderAuthForm']
@@ -107,7 +107,7 @@ const defaultRenderForm = ({
 
 export default function AuthView<M extends Meta, B extends Body>(
   props: AuthViewProps<M, B>,
-): JSX.Element {
+) {
   const {
     loading,
     pluginName,

packages/@uppy/provider-views/src/ProviderView/Header.tsx

@@ -11,7 +11,7 @@ type HeaderProps<M extends Meta, B extends Body> = {
   showBreadcrumbs: boolean
   getFolder: ProviderView<M, B>['getFolder']
   breadcrumbs: UnknownProviderPluginState['breadcrumbs']
-  pluginIcon: () => JSX.Element
+  pluginIcon: () => h.JSX.Element
   title: string
   logout: () => void
   username: string | undefined
@@ -20,7 +20,7 @@ type HeaderProps<M extends Meta, B extends Body> = {
 
 export default function Header<M extends Meta, B extends Body>(
   props: HeaderProps<M, B>,
-): JSX.Element {
+) {
   return (
     <Fragment>
       {props.showBreadcrumbs && (

packages/@uppy/provider-views/src/ProviderView/ProviderView.tsx

@@ -36,7 +36,7 @@ function prependPath(path: string | undefined, component: string): string {
   return `${path}/${component}`
 }
 
-export function defaultPickerIcon(): JSX.Element {
+export function defaultPickerIcon() {
   return (
     <svg
       aria-hidden="true"
@@ -67,7 +67,7 @@ export interface ProviderViewOptions<M extends Meta, B extends Body>
     i18n: Translator['translateArray']
     loading: boolean | string
     onAuth: (authFormData: unknown) => Promise<void>
-  }) => JSX.Element
+  }) => h.JSX.Element
 }
 
 type Opts<M extends Meta, B extends Body> = DefinePluginOpts<
@@ -547,7 +547,7 @@ export default class ProviderView<M extends Meta, B extends Body> extends View<
   render(
     state: unknown,
     viewOptions: Omit<ViewOptions<M, B, PluginType>, 'provider'> = {},
-  ): JSX.Element {
+  ) {
     const { authenticated, didFirstRender } = this.plugin.getPluginState()
     const { i18n } = this.plugin.uppy
 

packages/@uppy/provider-views/src/ProviderView/User.tsx

@@ -6,11 +6,7 @@ type UserProps = {
   username: string | undefined
 }
 
-export default function User({
-  i18n,
-  logout,
-  username,
-}: UserProps): JSX.Element {
+export default function User({ i18n, logout, username }: UserProps) {
   return (
     <Fragment>
       <span className="uppy-ProviderBrowser-user" key="username">

packages/@uppy/provider-views/src/SearchFilterInput.tsx

@@ -17,7 +17,7 @@ type Props = {
   buttonCSSClassName?: string
 }
 
-export default function SearchFilterInput(props: Props): JSX.Element {
+export default function SearchFilterInput(props: Props) {
   const {
     search,
     searchOnInput,

packages/@uppy/provider-views/src/SearchProviderView/SearchProviderView.tsx

@@ -155,7 +155,7 @@ export default class SearchProviderView<
   render(
     state: unknown,
     viewOptions: Omit<ViewOptions<M, B, PluginType>, 'provider'> = {},
-  ): JSX.Element {
+  ) {
     const { didFirstRender, isInputMode, searchTerm } =
       this.plugin.getPluginState()
     const { i18n } = this.plugin.uppy

packages/@uppy/react/src/Dashboard.ts

@@ -95,7 +95,8 @@ class Dashboard<M extends Meta, B extends Body> extends Component<
     uppy.removePlugin(this.plugin)
   }
 
-  render(): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  render() {
     return h('div', {
       className: 'uppy-Container',
       ref: (container: HTMLElement): void => {

packages/@uppy/react/src/DashboardModal.ts

@@ -182,7 +182,8 @@ class DashboardModal<M extends Meta, B extends Body> extends Component<
     uppy.removePlugin(this.plugin)
   }
 
-  render(): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  render() {
     return h('div', {
       className: 'uppy-Container',
       ref: (container: HTMLElement) => {

packages/@uppy/react/src/DragDrop.ts

@@ -85,7 +85,8 @@ class DragDrop<M extends Meta, B extends Body> extends Component<
     uppy.removePlugin(this.plugin)
   }
 
-  render(): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  render() {
     return h('div', {
       className: 'uppy-Container',
       ref: (container: HTMLElement) => {

packages/@uppy/react/src/FileInput.ts

@@ -76,7 +76,8 @@ class FileInput<M extends Meta, B extends Body> extends Component<
     uppy.removePlugin(this.plugin)
   }
 
-  render(): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  render() {
     return h('div', {
       className: 'uppy-Container',
       ref: (container: HTMLElement) => {

packages/@uppy/react/src/ProgressBar.ts

@@ -76,7 +76,8 @@ class ProgressBar<M extends Meta, B extends Body> extends Component<
     uppy.removePlugin(this.plugin)
   }
 
-  render(): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  render() {
     return h('div', {
       className: 'uppy-Container',
       ref: (container: HTMLElement) => {

packages/@uppy/react/src/StatusBar.ts

@@ -100,7 +100,8 @@ class StatusBar<M extends Meta, B extends Body> extends Component<
     uppy.removePlugin(this.plugin)
   }
 
-  render(): JSX.Element {
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  render() {
     return h('div', {
       className: 'uppy-Container',
       ref: (container: HTMLElement) => {

packages/@uppy/status-bar/src/Components.tsx

@@ -24,7 +24,7 @@ interface UploadBtnProps<M extends Meta, B extends Body> {
 
 function UploadBtn<M extends Meta, B extends Body>(
   props: UploadBtnProps<M, B>,
-): JSX.Element {
+) {
   const {
     newFiles,
     isUploadStarted,
@@ -70,9 +70,7 @@ interface RetryBtnProps<M extends Meta, B extends Body> {
   uppy: Uppy<M, B>
 }
 
-function RetryBtn<M extends Meta, B extends Body>(
-  props: RetryBtnProps<M, B>,
-): JSX.Element {
+function RetryBtn<M extends Meta, B extends Body>(props: RetryBtnProps<M, B>) {
   const { i18n, uppy } = props
 
   return (
@@ -110,7 +108,7 @@ interface CancelBtnProps<M extends Meta, B extends Body> {
 
 function CancelBtn<M extends Meta, B extends Body>(
   props: CancelBtnProps<M, B>,
-): JSX.Element {
+) {
   const { i18n, uppy } = props
 
   return (
@@ -153,7 +151,7 @@ interface PauseResumeButtonProps<M extends Meta, B extends Body> {
 
 function PauseResumeButton<M extends Meta, B extends Body>(
   props: PauseResumeButtonProps<M, B>,
-): JSX.Element {
+) {
   const { isAllPaused, i18n, isAllComplete, resumableUploads, uppy } = props
   const title = isAllPaused ? i18n('resume') : i18n('pause')
 
@@ -212,7 +210,7 @@ interface DoneBtnProps {
   doneButtonHandler: (() => void) | undefined
 }
 
-function DoneBtn(props: DoneBtnProps): JSX.Element {
+function DoneBtn(props: DoneBtnProps) {
   const { i18n, doneButtonHandler } = props
 
   return (
@@ -227,7 +225,7 @@ function DoneBtn(props: DoneBtnProps): JSX.Element {
   )
 }
 
-function LoadingSpinner(): JSX.Element {
+function LoadingSpinner() {
   return (
     <svg
       className="uppy-StatusBar-spinner"
@@ -248,7 +246,7 @@ interface ProgressBarProcessingProps {
   progress: FileProcessingInfo
 }
 
-function ProgressBarProcessing(props: ProgressBarProcessingProps): JSX.Element {
+function ProgressBarProcessing(props: ProgressBarProcessingProps) {
   const { progress } = props
   const { value, mode, message } = progress
   const dot = `\u00B7`
@@ -271,7 +269,7 @@ interface ProgressDetailsProps {
   totalETA: number
 }
 
-function ProgressDetails(props: ProgressDetailsProps): JSX.Element {
+function ProgressDetails(props: ProgressDetailsProps) {
   const { numUploads, complete, totalUploadedSize, totalSize, totalETA, i18n } =
     props
 
@@ -312,7 +310,7 @@ interface FileUploadCountProps {
   numUploads: number
 }
 
-function FileUploadCount(props: FileUploadCountProps): JSX.Element {
+function FileUploadCount(props: FileUploadCountProps) {
   const { i18n, complete, numUploads } = props
 
   return (
@@ -328,7 +326,7 @@ interface UploadNewlyAddedFilesProps {
   startUpload: () => void
 }
 
-function UploadNewlyAddedFiles(props: UploadNewlyAddedFilesProps): JSX.Element {
+function UploadNewlyAddedFiles(props: UploadNewlyAddedFilesProps) {
   const { i18n, newFiles, startUpload } = props
   const uploadBtnClassNames = classNames(
     'uppy-u-reset',
@@ -371,9 +369,7 @@ interface ProgressBarUploadingProps {
   startUpload: () => void
 }
 
-function ProgressBarUploading(
-  props: ProgressBarUploadingProps,
-): JSX.Element | null {
+function ProgressBarUploading(props: ProgressBarUploadingProps) {
   const {
     i18n,
     supportsUploadProgress,
@@ -399,7 +395,7 @@ function ProgressBarUploading(
 
   const title = isAllPaused ? i18n('paused') : i18n('uploading')
 
-  function renderProgressDetails(): JSX.Element | null {
+  function renderProgressDetails() {
     if (!isAllPaused && !showUploadNewlyAddedFiles && showProgressDetails) {
       if (supportsUploadProgress) {
         return (
@@ -452,7 +448,7 @@ interface ProgressBarCompleteProps {
   i18n: I18n
 }
 
-function ProgressBarComplete(props: ProgressBarCompleteProps): JSX.Element {
+function ProgressBarComplete(props: ProgressBarCompleteProps) {
   const { i18n } = props
 
   return (
@@ -487,7 +483,7 @@ interface ProgressBarErrorProps {
   numUploads: number
 }
 
-function ProgressBarError(props: ProgressBarErrorProps): JSX.Element {
+function ProgressBarError(props: ProgressBarErrorProps) {
   const { error, i18n, complete, numUploads } = props
 
   function displayErrorAlert(): void {

packages/@uppy/status-bar/src/StatusBarUI.tsx

@@ -62,7 +62,7 @@ export interface StatusBarUIProps<M extends Meta, B extends Body> {
 // TODO: rename the function to StatusBarUI on the next major.
 export default function StatusBar<M extends Meta, B extends Body>(
   props: StatusBarUIProps<M, B>,
-): JSX.Element {
+) {
   const {
     newFiles,
     allowNewUpload,
@@ -204,7 +204,7 @@ export default function StatusBar<M extends Meta, B extends Body>(
         aria-valuenow={progressValue!}
       />
 
-      {((): JSX.Element | null => {
+      {(() => {
         switch (uploadState) {
           case STATE_PREPROCESSING:
           case STATE_POSTPROCESSING:

packages/@uppy/unsplash/src/Unsplash.tsx

@@ -24,7 +24,7 @@ export default class Unsplash<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: SearchProvider<M, B>
 

packages/@uppy/url/src/Url.tsx

@@ -81,7 +81,7 @@ export default class Url<M extends Meta, B extends Body> extends UIPlugin<
 
   static requestClientId = Url.name
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   hostname: string
 

packages/@uppy/webcam/src/DiscardButton.tsx

@@ -6,7 +6,7 @@ interface DiscardButtonProps {
   i18n: I18n
 }
 
-function DiscardButton({ onDiscard, i18n }: DiscardButtonProps): JSX.Element {
+function DiscardButton({ onDiscard, i18n }: DiscardButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--discard"

packages/@uppy/webcam/src/PermissionsScreen.tsx

@@ -11,7 +11,7 @@ export default function PermissionsScreen({
   icon,
   i18n,
   hasCamera,
-}: PermissionScreenProps): JSX.Element {
+}: PermissionScreenProps) {
   return (
     <div className="uppy-Webcam-permissons">
       <div className="uppy-Webcam-permissonsIcon">{icon()}</div>

packages/@uppy/webcam/src/RecordButton.tsx

@@ -13,7 +13,7 @@ export default function RecordButton({
   onStartRecording,
   onStopRecording,
   i18n,
-}: RecordButtonProps): JSX.Element {
+}: RecordButtonProps) {
   if (recording) {
     return (
       <button

packages/@uppy/webcam/src/RecordingLength.tsx

@@ -10,7 +10,7 @@ interface RecordingLengthProps {
 export default function RecordingLength({
   recordingLengthSeconds,
   i18n,
-}: RecordingLengthProps): JSX.Element {
+}: RecordingLengthProps) {
   const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds)
 
   return (

packages/@uppy/webcam/src/SnapshotButton.tsx

@@ -10,7 +10,7 @@ interface SnapshotButtonProps {
 export default function SnapshotButton({
   onSnapshot,
   i18n,
-}: SnapshotButtonProps): JSX.Element {
+}: SnapshotButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--picture"

packages/@uppy/webcam/src/SubmitButton.tsx

@@ -6,7 +6,7 @@ interface SubmitButtonProps {
   i18n: I18n
 }
 
-function SubmitButton({ onSubmit, i18n }: SubmitButtonProps): JSX.Element {
+function SubmitButton({ onSubmit, i18n }: SubmitButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Webcam-button uppy-Webcam-button--submit"

packages/@uppy/webcam/src/Webcam.tsx

@@ -125,7 +125,7 @@ export default class Webcam<M extends Meta, B extends Body> extends UIPlugin<
 
   private capturedMediaFile: MinimalRequiredUppyFile<M, B> | null
 
-  private icon: () => JSX.Element
+  private icon: () => h.JSX.Element
 
   private webcamActive
 

packages/@uppy/zoom/src/Zoom.tsx

@@ -25,7 +25,7 @@ export default class Zoom<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>