Merge branch 'main' into 4.x

* main:
  @uppy/dashboard: add new `autoOpen` option (#5001)
  @uppy/core: fix some type errors (#5015)
  add missing exports (#5014)
  Bump webpack-dev-middleware from 5.3.3 to 5.3.4 (#5013)

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

@@ -17,7 +17,7 @@ import locale from './locale.ts'
 // @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 
-interface AudioOptions extends UIPluginOptions {
+export interface AudioOptions extends UIPluginOptions {
   showAudioSourceDropdown?: boolean
 }
 interface AudioState {

packages/@uppy/audio/src/index.ts

@@ -1 +1,2 @@
 export { default } from './Audio.tsx'
+export type { AudioOptions } from './Audio.tsx'

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

@@ -49,17 +49,17 @@ export default class BasePlugin<
 
   opts: Opts
 
-  id: string
+  id!: string
 
   defaultLocale: OptionalPluralizeLocale
 
-  i18n: I18n
+  i18n!: I18n
 
-  i18nArray: Translator['translateArray']
+  i18nArray!: Translator['translateArray']
 
-  type: string
+  type!: string
 
-  VERSION: string
+  VERSION!: string
 
   constructor(uppy: Uppy<M, B>, opts?: Opts) {
     this.uppy = uppy

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

@@ -41,7 +41,7 @@ const defaultOptions = {
 class RestrictionError<M extends Meta, B extends Body> extends Error {
   isUserFacing: boolean
 
-  file: UppyFile<M, B>
+  file!: UppyFile<M, B>
 
   constructor(
     message: string,

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

@@ -376,17 +376,17 @@ export class Uppy<M extends Meta, B extends Body> {
 
   defaultLocale: Locale
 
-  locale: Locale
+  locale!: Locale
 
   // The user optionally passes in options, but we set defaults for missing options.
   // We consider all options present after the contructor has run.
   opts: NonNullableUppyOptions<M, B>
 
   store: NonNullableUppyOptions<M, B>['store']
 
-  i18n: I18n
+  i18n!: I18n
 
-  i18nArray: Translator['translateArray']
+  i18nArray!: Translator['translateArray']
 
   scheduledAutoProceed: ReturnType<typeof setTimeout> | null = null
 
@@ -828,7 +828,7 @@ export class Uppy<M extends Meta, B extends Body> {
     try {
       this.#restricter.validate(files, [file])
     } catch (err) {
-      return err
+      return err as any
     }
     return null
   }
@@ -1019,7 +1019,7 @@ export class Uppy<M extends Meta, B extends Body> {
         nextFilesState[newFile.id] = newFile
         validFilesToAdd.push(newFile)
       } catch (err) {
-        errors.push(err)
+        errors.push(err as any)
       }
     }
 
@@ -1031,7 +1031,7 @@ export class Uppy<M extends Meta, B extends Body> {
         validFilesToAdd,
       )
     } catch (err) {
-      errors.push(err)
+      errors.push(err as any)
 
       // If we have any aggregate error, don't allow adding this batch
       return {
@@ -2135,7 +2135,7 @@ export class Uppy<M extends Meta, B extends Body> {
    * Start an upload for all the files that are not currently being uploaded.
    */
   upload(): Promise<NonNullable<UploadResult<M, B>> | undefined> {
-    if (!this.#plugins.uploader?.length) {
+    if (!this.#plugins['uploader']?.length) {
       this.log('No uploader type plugins are used', 'warning')
     }
 

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

@@ -112,7 +112,7 @@ interface DashboardState<M extends Meta, B extends Body> {
   [key: string]: unknown
 }
 
-interface DashboardOptions<M extends Meta, B extends Body>
+export interface DashboardOptions<M extends Meta, B extends Body>
   extends UIPluginOptions {
   animateOpenClose?: boolean
   browserBackButtonClose?: boolean
@@ -150,6 +150,8 @@ interface DashboardOptions<M extends Meta, B extends Body>
   theme?: 'auto' | 'dark' | 'light'
   trigger?: string
   width?: string | number
+  autoOpen?: 'metaEditor' | 'imageEditor' | null
+  /** @deprecated use option autoOpen instead */
   autoOpenFileEditor?: boolean
   disabled?: boolean
   disableLocalFiles?: boolean
@@ -195,6 +197,7 @@ const defaultOptions = {
   showNativePhotoCameraButton: false,
   showNativeVideoCameraButton: false,
   theme: 'light',
+  autoOpen: null,
   autoOpenFileEditor: false,
   disabled: false,
   disableLocalFiles: false,
@@ -243,7 +246,17 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
   private removeDragOverClassTimeout: ReturnType<typeof setTimeout>
 
   constructor(uppy: Uppy<M, B>, opts?: DashboardOptions<M, B>) {
-    super(uppy, { ...defaultOptions, ...opts })
+    // support for the legacy `autoOpenFileEditor` option,
+    // TODO: we can remove this code when we update the Uppy major version
+    let autoOpen: DashboardOptions<M, B>['autoOpen']
+    if (!opts) {
+      autoOpen = null
+    } else if (opts.autoOpen === undefined) {
+      autoOpen = opts.autoOpenFileEditor ? 'imageEditor' : null
+    } else {
+      autoOpen = opts.autoOpen
+    }
+    super(uppy, { ...defaultOptions, ...opts, autoOpen })
     this.id = this.opts.id || 'Dashboard'
     this.title = 'Dashboard'
     this.type = 'orchestrator'
@@ -939,11 +952,11 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
 
     const { metaFields } = this.getPluginState()
     const isMetaEditorEnabled = metaFields && metaFields.length > 0
-    const isFileEditorEnabled = this.canEditFile(firstFile)
+    const isImageEditorEnabled = this.canEditFile(firstFile)
 
-    if (isMetaEditorEnabled) {
+    if (isMetaEditorEnabled && this.opts.autoOpen === 'metaEditor') {
       this.toggleFileCard(true, firstFile.id)
-    } else if (isFileEditorEnabled) {
+    } else if (isImageEditorEnabled && this.opts.autoOpen === 'imageEditor') {
       this.openFileEditor(firstFile)
     }
   }
@@ -985,7 +998,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       this.el!.addEventListener('keydown', this.handleKeyDownInInline)
     }
 
-    if (this.opts.autoOpenFileEditor) {
+    if (this.opts.autoOpen) {
       this.uppy.on('files-added', this.#openFileEditorWhenFilesAdded)
     }
   }
@@ -1018,7 +1031,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       this.el!.removeEventListener('keydown', this.handleKeyDownInInline)
     }
 
-    if (this.opts.autoOpenFileEditor) {
+    if (this.opts.autoOpen) {
       this.uppy.off('files-added', this.#openFileEditorWhenFilesAdded)
     }
   }

packages/@uppy/dashboard/src/index.ts

@@ -1 +1,2 @@
 export { default } from './Dashboard.tsx'
+export type { DashboardOptions } from './Dashboard.tsx'

packages/@uppy/drop-target/src/index.ts

@@ -8,7 +8,7 @@ import toArray from '@uppy/utils/lib/toArray'
 // @ts-ignore We don't want TS to generate types for the package.json
 import packageJson from '../package.json'
 
-interface DropTargetOptions extends PluginOpts {
+export interface DropTargetOptions extends PluginOpts {
   target?: HTMLElement | string | null
   onDrop?: (event: DragEvent) => void
   onDragOver?: (event: DragEvent) => void

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

@@ -37,90 +37,15 @@ class DashboardModal extends Component {
   }
 
   installPlugin () {
-    const {
-      id = 'react:DashboardModal',
-      uppy,
-      target,
-      open,
-      onRequestClose,
-      closeModalOnClickOutside,
-      disablePageScrollWhenModalOpen,
-      inline,
-      plugins, // eslint-disable-line no-shadow
-      width,
-      height,
-      showProgressDetails,
-      note,
-      metaFields, // eslint-disable-line no-shadow
-      proudlyDisplayPoweredByUppy,
-      autoOpenFileEditor,
-      animateOpenClose,
-      browserBackButtonClose,
-      closeAfterFinish,
-      disableStatusBar,
-      disableInformer,
-      disableThumbnailGenerator,
-      disableLocalFiles,
-      disabled,
-      hideCancelButton,
-      hidePauseResumeButton,
-      hideProgressAfterFinish,
-      hideRetryButton,
-      hideUploadButton,
-      showLinkToFileUploadResult,
-      showRemoveButtonAfterComplete,
-      showSelectedFiles,
-      waitForThumbnailsBeforeUpload,
-      fileManagerSelectionType,
-      theme,
-      thumbnailType,
-      thumbnailWidth,
-      locale, // eslint-disable-line no-shadow
-    } = this.props
+    const { id='react:DashboardModal', target=this.container, open, onRequestClose, uppy } = this.props
     const options = {
+      ...this.props,
       id,
       target,
-      closeModalOnClickOutside,
-      disablePageScrollWhenModalOpen,
-      inline,
-      plugins,
-      width,
-      height,
-      showProgressDetails,
-      note,
-      metaFields,
-      proudlyDisplayPoweredByUppy,
-      autoOpenFileEditor,
-      animateOpenClose,
-      browserBackButtonClose,
-      closeAfterFinish,
-      disableStatusBar,
-      disableInformer,
-      disableThumbnailGenerator,
-      disableLocalFiles,
-      disabled,
-      hideCancelButton,
-      hidePauseResumeButton,
-      hideProgressAfterFinish,
-      hideRetryButton,
-      hideUploadButton,
-      showLinkToFileUploadResult,
-      showRemoveButtonAfterComplete,
-      showSelectedFiles,
-      waitForThumbnailsBeforeUpload,
-      fileManagerSelectionType,
-      theme,
-      thumbnailType,
-      thumbnailWidth,
-      locale,
       onRequestCloseModal: onRequestClose,
     }
-
-    if (!options.target) {
-      options.target = this.container
-    }
-
     delete options.uppy
+
     uppy.use(DashboardPlugin, options)
 
     this.plugin = uppy.getPlugin(options.id)
@@ -146,6 +71,7 @@ class DashboardModal extends Component {
   }
 }
 
+/* eslint-disable react/no-unused-prop-types */
 DashboardModal.propTypes = {
   uppy: uppyPropType.isRequired,
   target: typeof window !== 'undefined' ? PropTypes.instanceOf(window.HTMLElement) : PropTypes.any,
@@ -161,7 +87,7 @@ DashboardModal.propTypes = {
   note: PropTypes.string,
   metaFields,
   proudlyDisplayPoweredByUppy: PropTypes.bool,
-  autoOpenFileEditor: PropTypes.bool,
+  autoOpen: PropTypes.oneOf(['imageEditor', 'metaEditor', null]),
   animateOpenClose: PropTypes.bool,
   browserBackButtonClose: PropTypes.bool,
   closeAfterFinish: PropTypes.bool,
@@ -186,7 +112,7 @@ DashboardModal.propTypes = {
   thumbnailWidth: PropTypes.number,
   locale,
 }
-// Must be kept in sync with @uppy/dashboard/src/Dashboard.jsx.
+// Must be kept in sync with @uppy/dashboard/src/Dashboard.tsx.
 DashboardModal.defaultProps = {
   metaFields: [],
   plugins: [],
@@ -217,7 +143,7 @@ DashboardModal.defaultProps = {
   showRemoveButtonAfterComplete: false,
   browserBackButtonClose: false,
   theme: 'light',
-  autoOpenFileEditor: false,
+  autoOpen: false,
   disabled: false,
   disableLocalFiles: false,
 

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

@@ -59,7 +59,7 @@ function isModeAvailable<T>(modes: T[], mode: unknown): mode is T {
   return modes.includes(mode as T)
 }
 
-interface WebcamOptions<M extends Meta, B extends Body>
+export interface WebcamOptions<M extends Meta, B extends Body>
   extends UIPluginOptions {
   target?: PluginTarget<M, B>
   onBeforeSnapshot?: () => Promise<void>

packages/@uppy/webcam/src/index.ts

@@ -1 +1,2 @@
 export { default } from './Webcam.tsx'
+export type { WebcamOptions } from './Webcam.tsx'

yarn.lock

@@ -31756,8 +31756,8 @@ __metadata:
   linkType: hard
 
 "webpack-dev-middleware@npm:^5.3.1":
-  version: 5.3.3
-  resolution: "webpack-dev-middleware@npm:5.3.3"
+  version: 5.3.4
+  resolution: "webpack-dev-middleware@npm:5.3.4"
   dependencies:
     colorette: ^2.0.10
     memfs: ^3.4.3
@@ -31766,7 +31766,7 @@ __metadata:
     schema-utils: ^4.0.0
   peerDependencies:
     webpack: ^4.0.0 || ^5.0.0
-  checksum: dd332cc6da61222c43d25e5a2155e23147b777ff32fdf1f1a0a8777020c072fbcef7756360ce2a13939c3f534c06b4992a4d659318c4a7fe2c0530b52a8a6621
+  checksum: 90cf3e27d0714c1a745454a1794f491b7076434939340605b9ee8718ba2b85385b120939754e9fdbd6569811e749dee53eec319e0d600e70e0b0baffd8e3fb13
   languageName: node
   linkType: hard