fix: Update browser-fs-access to use new supported export (#3303)

* Use new exported supported

* Bump to v0.15.3

package.json

@@ -27,7 +27,7 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.14.2",
+    "browser-fs-access": "0.15.3",
     "clsx": "1.1.1",
     "firebase": "8.2.10",
     "i18next-browser-languagedetector": "6.0.1",

src/actions/actionExport.tsx

@@ -11,6 +11,7 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { KEYS } from "../keys";
 import { register } from "./register";
+import { supported } from "browser-fs-access";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -164,9 +165,7 @@ export const actionSaveAsScene = register({
       title={t("buttons.saveAs")}
       aria-label={t("buttons.saveAs")}
       showAriaLabel={useIsMobile()}
-      hidden={
+      hidden={!supported}
-        !("chooseFileSystemEntries" in window || "showOpenFilePicker" in window)
-      }
       onClick={() => updateData(null)}
     />
   ),

src/components/App.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import clsx from "clsx";
+import { supported } from "browser-fs-access";
 
 import {
   actionAddToLibrary,
@@ -3609,10 +3610,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       file?.name.endsWith(".excalidraw")
     ) {
       this.setState({ isLoading: true });
-      if (
+      if (supported) {
-        "chooseFileSystemEntries" in window ||
-        "showOpenFilePicker" in window
-      ) {
         try {
           // This will only work as of Chrome 86,
           // but can be safely ignored on older releases.