diff --git a/package.json b/package.json index af1ba43d..f89bad63 100644 --- a/package.json +++ b/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", diff --git a/src/toolbar/OpenFileButton.tsx b/src/toolbar/OpenFileButton.tsx index cafb7277..21857c84 100644 --- a/src/toolbar/OpenFileButton.tsx +++ b/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 = ({ id, label, + mimeType, fileExtension, tooltip, icon, @@ -65,9 +68,7 @@ const OpenFileButton: React.VoidFunctionComponent = ({ 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 = ({ onClick, ...toolbarItemFocusProps, tabIndex: excludeFromTabOrder ? -1 : 0, + // HACK: work around useDropZone "feature" even though + // this role is already implicit on buttons + role: 'button', })} > diff --git a/src/toolbar/buttons/flash/FlashButton.tsx b/src/toolbar/buttons/flash/FlashButton.tsx index 29966d1c..302482f8 100644 --- a/src/toolbar/buttons/flash/FlashButton.tsx +++ b/src/toolbar/buttons/flash/FlashButton.tsx @@ -33,6 +33,7 @@ const FlashButton: React.VoidFunctionComponent = ({ id }) => { = 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