build(deps): bump react-dropzone from 12.0.4 to 14.2.1 (#843)

* build(deps): bump react-dropzone from 12.0.4 to 14.2.1

Bumps [react-dropzone](https://github.com/react-dropzone/react-dropzone) from 12.0.4 to 14.2.1.
- [Release notes](https://github.com/react-dropzone/react-dropzone/releases)
- [Commits](https://github.com/react-dropzone/react-dropzone/compare/v12.0.4...v14.2.1)

---
updated-dependencies:
- dependency-name: react-dropzone
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* toolbar: update for breaking changes in ReactDropZone

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Lechner <david@pybricks.com>

package.json

@@ -83,7 +83,7 @@
         "react-complex-tree": "^1.1.5",
         "react-dev-utils": "^12.0.1",
         "react-dom": "^16.13.1",
-        "react-dropzone": "^12.0.4",
+        "react-dropzone": "^14.2.1",
         "react-monaco-editor": "^0.48.0",
         "react-popper": "^2.3.0",
         "react-redux": "^8.0.2",

src/toolbar/OpenFileButton.tsx

@@ -14,6 +14,8 @@ export interface OpenFileButtonProps {
     readonly id: string;
     /** A unique label for each instance. */
     readonly label: string;
+    /** The accepted file MIME type. */
+    readonly mimeType: string;
     /** The accepted file extension */
     readonly fileExtension: string;
     /** Tooltip text that appears when hovering over the button. */
@@ -40,6 +42,7 @@ export interface OpenFileButtonProps {
 const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
     id,
     label,
+    mimeType,
     fileExtension,
     tooltip,
     icon,
@@ -65,9 +68,7 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
     const buttonSize = isSmallScreen ? SpinnerSize.SMALL : SpinnerSize.STANDARD;
 
     const { getRootProps, getInputProps } = useDropzone({
-        accept: fileExtension,
-        // using File System Access API is blocked by https://github.com/react-dropzone/react-dropzone/issues/1141
-        useFsAccessApi: false,
+        accept: { [mimeType]: [fileExtension] },
         multiple: false,
         noClick: onClick !== undefined,
         onDropAccepted: (acceptedFiles) => {
@@ -124,6 +125,9 @@ const OpenFileButton: React.VoidFunctionComponent<OpenFileButtonProps> = ({
                         onClick,
                         ...toolbarItemFocusProps,
                         tabIndex: excludeFromTabOrder ? -1 : 0,
+                        // HACK: work around useDropZone "feature" even though
+                        // this role is already implicit on buttons
+                        role: 'button',
                     })}
                 >
                     <input {...getInputProps()} />

src/toolbar/buttons/flash/FlashButton.tsx

@@ -33,6 +33,7 @@ const FlashButton: React.VoidFunctionComponent<FlashButtonProps> = ({ id }) => {
         <OpenFileButton
             id={id}
             label={i18n.translate(I18nId.Label)}
+            mimeType="application/zip"
             fileExtension=".zip"
             icon={icon}
             tooltip={

yarn.lock

@@ -2410,7 +2410,7 @@ __metadata:
     react-complex-tree: ^1.1.5
     react-dev-utils: ^12.0.1
     react-dom: ^16.13.1
-    react-dropzone: ^12.0.4
+    react-dropzone: ^14.2.1
     react-monaco-editor: ^0.48.0
     react-popper: ^2.3.0
     react-redux: ^8.0.2
@@ -8028,12 +8028,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-selector@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "file-selector@npm:0.4.0"
+"file-selector@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "file-selector@npm:0.6.0"
   dependencies:
-    tslib: ^2.0.3
-  checksum: 1c9986e94bd033442cb4299d10d73d98fbc0b5f1af5b47d7a27b39f1e6bbd8d677f66c2628167da387166c652ad3c2429875042b453ba62f14945d903adf88d5
+    tslib: ^2.4.0
+  checksum: 7d051b6e5d793f3c6e2ab287ba5e7c2c6a0971bccc9d56e044c8047ba483e18f60fc0b5771c951dc707c0d15f4f36ccb4f1f1aaf385d21ec8f7700dadf8325ba
   languageName: node
   linkType: hard
 
@@ -12609,16 +12609,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dropzone@npm:^12.0.4":
-  version: 12.0.4
-  resolution: "react-dropzone@npm:12.0.4"
+"react-dropzone@npm:^14.2.1":
+  version: 14.2.1
+  resolution: "react-dropzone@npm:14.2.1"
   dependencies:
     attr-accept: ^2.2.2
-    file-selector: ^0.4.0
+    file-selector: ^0.6.0
     prop-types: ^15.8.1
   peerDependencies:
-    react: ">= 16.8"
-  checksum: cc8c2036c72cbe02ddea1e141de45aeee7b399321b5791174d04fb8c1f52eb2ee3ae2d3fb1240fc23008a435c4ceb437e85831f0388a6b34be2bc39417701096
+    react: ">= 16.8 || 18.0.0"
+  checksum: 8556d997d66bad79fe165a30d6dc8f917c67d8c7d23069c417eb2a0da6df824ba71b84b532707711e184da105122f6a6e81104341dc5b8c0f96e318267fdda91
   languageName: node
   linkType: hard
 
@@ -14386,7 +14386,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3, tslib@npm:^2.1.0":
+"tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.4.0
   resolution: "tslib@npm:2.4.0"
   checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113