fix(FileUpload): Downgrade react-dropzone back to 9.0.0 to avoid a breaking type change, fix behavior regressions

packages/react-core/package.json

@@ -38,7 +38,7 @@
     "@patternfly/react-styles": "^4.25.2",
     "@patternfly/react-tokens": "^4.27.2",
     "focus-trap": "6.2.2",
-    "react-dropzone": "10.2.2",
+    "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },

packages/react-core/src/components/FileUpload/FileUpload.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
-import Dropzone, { DropzoneProps, DropEvent, DropzoneInputProps } from 'react-dropzone';
+import Dropzone, { DropzoneProps, DropzoneInputProps, DropFileEventHandler } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { fromEvent } from 'file-selector';
+
+interface DropzoneInputPropsWithRef extends DropzoneInputProps {
+  ref: React.RefCallback<HTMLInputElement>; // Working around an issue in react-dropzone 9.0.0's types. Should not be necessary in later versions.
+}
+
 export interface FileUploadProps
   extends Omit<
     FileUploadFieldProps,
@@ -26,11 +31,9 @@ export interface FileUploadProps
       | React.MouseEvent<HTMLButtonElement, MouseEvent> // Clear button was clicked
       | React.DragEvent<HTMLElement> // User dragged/dropped a file
       | React.ChangeEvent<HTMLElement> // User typed in the TextArea
-      | DragEvent
-      | Event
   ) => void;
   /** Change event emitted from the hidden \<input type="file" \> field associated with the component  */
-  onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | DropEvent, file: File) => void;
+  onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>, file: File) => void;
   /** Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog. */
   onClick?: (event: React.MouseEvent) => void;
   /** Additional classes added to the FileUpload container element. */
@@ -104,7 +107,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   dropzoneProps = {},
   ...props
 }: FileUploadProps) => {
-  const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
+  const onDropAccepted: DropFileEventHandler = (acceptedFiles, event) => {
     if (acceptedFiles.length > 0) {
       const fileHandle = acceptedFiles[0];
       if (event.type === 'drop') {
@@ -132,7 +135,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
 
-  const onDropRejected = (rejectedFiles: File[], event: DropEvent) => {
+  const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
     if (rejectedFiles.length > 0) {
       onChange('', rejectedFiles[0].name, event);
     }
@@ -151,13 +154,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   };
 
   return (
-    <Dropzone
-      multiple={false}
-      {...dropzoneProps}
-      onDropAccepted={onDropAccepted}
-      onDropRejected={onDropRejected}
-      noClick={true}
-    >
+    <Dropzone multiple={false} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
       {({ getRootProps, getInputProps, isDragActive, open }) => {
         const oldInputProps = getInputProps();
         const inputProps: DropzoneInputProps = {
@@ -190,7 +187,14 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
             onTextAreaClick={onClick}
             onTextChange={onTextChange}
           >
-            <input {...inputProps} ref={fileInputRef} /* hidden, necessary for react-dropzone */ />
+            <input
+              /* hidden, necessary for react-dropzone */
+              {...inputProps}
+              ref={input => {
+                fileInputRef.current = input;
+                (inputProps as DropzoneInputPropsWithRef).ref(input);
+              }}
+            />
             {children}
           </FileUploadField>
         );

packages/react-core/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -1,12 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`simple fileupload 1`] = `
-<Dropzone
+<t
+  disabled={false}
+  getDataTransferItems={[Function]}
+  maxSize={Infinity}
+  minSize={0}
   multiple={false}
-  noClick={true}
   onDropAccepted={[Function]}
   onDropRejected={[Function]}
+  preventDropOnDocument={true}
 >
   <Component />
-</Dropzone>
+</t>
 `;

packages/react-core/src/components/FileUpload/examples/FileUpload.md

@@ -27,7 +27,7 @@ class SimpleTextFileUpload extends React.Component {
     super(props);
     this.state = { value: '', filename: '', isLoading: false };
     this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleDataChange = value => this.setState({ value });
+    this.handleTextOrDataChange = value => this.setState({ value });
     this.handleClear = event => this.setState({ filename: '', value: '' });
     this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
     this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
@@ -43,7 +43,8 @@ class SimpleTextFileUpload extends React.Component {
         filename={filename}
         filenamePlaceholder="Drag and drop a file or upload one"
         onFileInputChange={this.handleFileInputChange}
-        onDataChange={this.handleDataChange}
+        onDataChange={this.handleTextOrDataChange}
+        onTextChange={this.handleTextOrDataChange}
         onReadStarted={this.handleFileReadStarted}
         onReadFinished={this.handleFileReadFinished}
         onClearClick={this.handleClear}

yarn.lock

@@ -4585,11 +4585,6 @@ attr-accept@^1.1.3:
   dependencies:
     core-js "^2.5.0"
 
-attr-accept@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
-  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
-
 autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -8152,13 +8147,6 @@ file-saver@^1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
 
-file-selector@^0.1.12:
-  version "0.1.19"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.19.tgz#8ecc9d069a6f544f2e4a096b64a8052e70ec8abf"
-  integrity sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==
-  dependencies:
-    tslib "^2.0.1"
-
 file-selector@^0.1.8:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.1.12.tgz#fe726547be219a787a9dcc640575a04a032b1fd0"
@@ -13653,15 +13641,6 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
-react-dropzone@10.2.2:
-  version "10.2.2"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-10.2.2.tgz#67b4db7459589a42c3b891a82eaf9ade7650b815"
-  integrity sha512-U5EKckXVt6IrEyhMMsgmHQiWTGLudhajPPG77KFSvgsMqNEHSyGpqWvOMc5+DhEah/vH4E1n+J5weBNLd5VtyA==
-  dependencies:
-    attr-accept "^2.0.0"
-    file-selector "^0.1.12"
-    prop-types "^15.7.2"
-
 react-dropzone@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-9.0.0.tgz#4f5223cdcb4d3bd8a66e3298c4041eb0c75c4634"