Upgrade 'react-dropzone' to latest version

Author: jonkoops

packages/react-code-editor/package.json

@@ -33,7 +33,7 @@
     "@patternfly/react-core": "^4.250.1",
     "@patternfly/react-icons": "^4.92.6",
     "@patternfly/react-styles": "^4.91.6",
-    "react-dropzone": "9.0.0",
+    "react-dropzone": "^14.2.3",
     "tslib": "^2.0.0"
   },
   "peerDependencies": {

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -23,7 +23,7 @@ import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import Dropzone from 'react-dropzone';
+import Dropzone, { FileRejection } from 'react-dropzone';
 import { CodeEditorContext } from './CodeEditorUtils';
 
 export interface Shortcut {
@@ -432,7 +432,7 @@ export class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState
     }
   };
 
-  onDropRejected = (rejectedFiles: File[]) => {
+  onDropRejected = (rejectedFiles: FileRejection[]) => {
     if (rejectedFiles.length > 0) {
       // eslint-disable-next-line no-console
       console.error('There was an error accepting that dropped file'); // TODO

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -6,7 +6,8 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
     class="pf-c-code-editor pf-m-read-only"
   >
     <div
-      class="pf-c-file-upload undefined false"
+      class="pf-c-file-upload false false"
+      role="presentation"
       tabindex="0"
     >
       <div
@@ -119,7 +120,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
         class="pf-c-code-editor__main"
       >
         <input
-          autocomplete="off"
           style="display: none;"
           tabindex="-1"
           type="file"

packages/react-core/package.json

@@ -48,7 +48,7 @@
     "@patternfly/react-styles": "^4.91.6",
     "@patternfly/react-tokens": "^4.93.6",
     "focus-trap": "6.9.2",
-    "react-dropzone": "9.0.0",
+    "react-dropzone": "^14.2.3",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
-import Dropzone, { DropzoneProps, DropzoneInputProps, DropFileEventHandler } from 'react-dropzone';
+import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } 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.
-}
-
-/** The main file upload component with drag and drop functionality built in by default. */
-
 export interface FileUploadProps
   extends Omit<
     FileUploadFieldProps,
@@ -52,7 +46,7 @@ export interface FileUploadProps
    */
   onClick?: (event: React.MouseEvent) => void;
   /** Change event emitted from the hidden \<input type="file" \> field associated with the component  */
-  onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>, file: File) => void;
+  onFileInputChange?: (event: DropEvent, file: File) => void;
   /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
   /** What type of file. Determines whether 'onDataChange` is called and what is
@@ -70,7 +64,7 @@ export interface FileUploadProps
   // Props available in FileUpload but not FileUploadField:
 
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: DropzoneProps;
+  dropzoneProps?: DropzoneOptions;
   /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */
@@ -102,7 +96,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   dropzoneProps = {},
   ...props
 }: FileUploadProps) => {
-  const onDropAccepted: DropFileEventHandler = (acceptedFiles, event) => {
+  const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
     if (acceptedFiles.length > 0) {
       const fileHandle = acceptedFiles[0];
       if (event.type === 'drop') {
@@ -125,66 +119,62 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
 
-  const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
+  const onDropRejected = (rejectedFiles: FileRejection[], event: DropEvent) => {
     dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event);
   };
 
-  const fileInputRef = React.useRef<HTMLInputElement>();
-  const setFileValue = (filename: string) => {
-    fileInputRef.current.value = filename;
-  };
-
   const onClearButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     onClearClick?.(event);
     setFileValue(null);
   };
 
-  return (
-    <Dropzone multiple={false} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
-      {({ getRootProps, getInputProps, isDragActive, open }) => {
-        const oldInputProps = getInputProps();
-        const inputProps: DropzoneInputProps = {
-          ...oldInputProps,
-          onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-            oldInputProps.onChange?.(e);
-            const files = await fromEvent(e.nativeEvent);
-            if (files.length === 1) {
-              onFileInputChange?.(e, files[0] as File);
-            }
-          }
-        };
+  const { getRootProps, getInputProps, isDragActive, open, inputRef } = useDropzone({
+    multiple: false,
+    ...dropzoneProps,
+    onDropAccepted,
+    onDropRejected
+  });
+
+  const setFileValue = (filename: string) => {
+    inputRef.current.value = filename;
+  };
+
+  const oldInputProps = getInputProps();
+  const inputProps: DropzoneInputProps = {
+    ...oldInputProps,
+    onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
+      oldInputProps.onChange?.(e);
+      const files = await fromEvent(e.nativeEvent);
+      if (files.length === 1) {
+        onFileInputChange?.(e, files[0] as File);
+      }
+    }
+  };
 
-        return (
-          <FileUploadField
-            {...getRootProps({
-              ...props,
-              refKey: 'containerRef',
-              onClick: event => event.preventDefault()
-            })}
-            tabIndex={null} // Omit the unwanted tabIndex from react-dropzone's getRootProps
-            id={id}
-            type={type}
-            filename={filename}
-            value={value}
-            isDragActive={isDragActive}
-            onBrowseButtonClick={open}
-            onClearButtonClick={onClearButtonClick}
-            onTextAreaClick={onClick}
-            onTextChange={onTextChange}
-          >
-            <input
-              /* hidden, necessary for react-dropzone */
-              {...inputProps}
-              ref={input => {
-                fileInputRef.current = input;
-                (inputProps as DropzoneInputPropsWithRef).ref(input);
-              }}
-            />
-            {children}
-          </FileUploadField>
-        );
-      }}
-    </Dropzone>
+  const rootProps = getRootProps({
+    ...props,
+    tabIndex: null, // Omit the unwanted tabIndex from react-dropzone's getRootProps
+    id,
+    type,
+    filename,
+    value,
+    isDragActive,
+    onBrowseButtonClick: open,
+    onClearButtonClick,
+    onTextAreaClick: onClick,
+    onTextChange,
+    onClick,
+    refKey: 'containerRef'
+  });
+
+  return (
+    <FileUploadField {...rootProps}>
+      <input
+        /* hidden, necessary for react-dropzone */
+        {...inputProps}
+      />
+      {children}
+    </FileUploadField>
   );
 };
 FileUpload.displayName = 'FileUpload';

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

@@ -4,6 +4,7 @@ exports[`simple fileupload 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-file-upload"
+    role="presentation"
   >
     <div
       class="pf-c-file-upload__file-select"
@@ -63,7 +64,6 @@ exports[`simple fileupload 1`] = `
       />
     </div>
     <input
-      autocomplete="off"
       style="display: none;"
       tabindex="-1"
       type="file"

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

@@ -3,20 +3,17 @@ import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState<File>();
   const [filename, setFilename] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setValue(file);
     setFilename(file.name);
   };
 
   const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     setFilename('');
-    setValue('');
+    setValue(undefined);
   };
 
   return (

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

@@ -2,13 +2,10 @@ import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 
 export const SimpleFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 

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

@@ -6,10 +6,7 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 

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

@@ -6,10 +6,7 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };