React-filepond: Add FilePondBaseProps.files and export FilePondProps subinterfaces (#38090)

* Add FilePondBaseProps.files and export FilePondProps subinterfaces

The `files` property was missing from `FilePondProps`.

Also export all interfaces which `FilePondProps` is extended from so consumers can partially construct them as needed.

* Add tests for react-filepond updates

* Fix react-filepond test

* React-filepond tests: use files from state

types/react-filepond/index.d.ts

@@ -193,7 +193,7 @@ type FetchServerConfigFunction = (
     headers: (headersString: string) => void,
 ) => void;
 
-interface FilePondServerConfigProps {
+export interface FilePondServerConfigProps {
     instantUpload?: boolean;
     server?: string | {
         process?: string | ServerUrl | ProcessServerConfigFunction;
@@ -204,7 +204,7 @@ interface FilePondServerConfigProps {
     };
 }
 
-interface FilePondDragDropProps {
+export interface FilePondDragDropProps {
     /** FilePond will catch all files dropped on the webpage */
     dropOnPage?: boolean;
     /** Require drop on the FilePond element itself to catch the file. */
@@ -221,7 +221,7 @@ interface FilePondDragDropProps {
     ignoredFiles?: string[];
 }
 
-interface FilePondLabelProps {
+export interface FilePondLabelProps {
     /**
      * The decimal separator used to render numbers.
      * By default this is determined automatically.
@@ -276,7 +276,7 @@ interface FilePondLabelProps {
     labelButtonProcessItem?: string;
 }
 
-interface FilePondSvgIconProps {
+export interface FilePondSvgIconProps {
     iconRemove?: string;
     iconProcess?: string;
     iconRetry?: string;
@@ -293,7 +293,7 @@ interface FilePondErrorDescription {
  * always give the error as the second prop, with the file as
  * the first prop.    This is contradictory to the current docs.
  */
-interface FilePondCallbackProps {
+export interface FilePondCallbackProps {
     /** FilePond instance has been created and is ready. */
     oninit?: () => void;
     /**
@@ -336,11 +336,11 @@ interface FilePondCallbackProps {
     onupdatefiles?: (fileItems: File[]) => void;
 }
 
-interface FilePondHookProps {
+export interface FilePondHookProps {
     beforeRemoveFile?: (file: File) => boolean;
 }
 
-interface FilePondBaseProps {
+export interface FilePondBaseProps {
     children?: React.ReactElement<File> | Array<React.ReactElement<File>>;
     id?: string;
     name?: string;
@@ -368,6 +368,8 @@ interface FilePondBaseProps {
     maxFiles?: number;
     /** The maximum number of files that can be uploaded in parallel */
     maxParallelUploads?: number;
+    /** List of files for controlled usage */
+    files?: File[];
     acceptedFileTypes?: string[];
     metadata?: {[key: string]: any};
 }

types/react-filepond/react-filepond-tests.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as filepond from 'react-filepond';
 
 interface AppState {
+    files: filepond.File[];
     filenames: string[];
 }
 
@@ -15,7 +16,8 @@ class App extends React.Component<{}, AppState> {
 
         this.state = {
             // Set initial files
-            filenames: ['index.html']
+            filenames: ['index.html'],
+            files: [],
         };
     }
 
@@ -39,10 +41,12 @@ class App extends React.Component<{}, AppState> {
                         fetch: (url, load, error, progress, abort, headers) => {},
                     }}
                     oninit={() => this.handleInit() }
+                    files={this.state.files}
                     onupdatefiles={(fileItems) => {
                         // Set current file objects to this.state
                         this.setState({
-                            filenames: fileItems.map(fileItem => fileItem.file.name)
+                            files: fileItems,
+                            filenames: fileItems.map(fileItem => fileItem.file.name),
                         });
                     }}
                 >