@concord-consortium/cloud-file-manager 2.1.0-pre.9 → 2.2.0

package/dist/cjs/views/file-dialog-tab-view.js

@@ -1,238 +1,121 @@
 "use strict";
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
-/*
- * decaffeinate suggestions:
- * DS101: Remove unnecessary use of Array.from
- * DS102: Remove unnecessary code created because of implicit returns
- * DS205: Consider reworking code to avoid use of IIFEs
- * DS207: Consider shorter variations of null checks
- * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
- */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const jquery_1 = __importDefault(require("jquery"));
 const lodash_1 = __importDefault(require("lodash"));
-const create_react_class_1 = __importDefault(require("create-react-class"));
-const react_dom_factories_1 = __importDefault(require("react-dom-factories"));
-const create_react_factory_1 = require("../create-react-factory");
 const provider_interface_1 = require("../providers/provider-interface");
 const translate_1 = __importDefault(require("../utils/translate"));
-const { div, i, input, button } = react_dom_factories_1.default;
-const italic = i;
-const FileListFile = (0, create_react_factory_1.createReactClassFactory)({
-    displayName: 'FileListFile',
-    componentDidMount() {
-        return this.lastClick = 0;
-    },
-    fileSelected(e) {
+const FileListFile = ({ metadata, selected, isSubFolder, fileSelected, fileConfirmed }) => {
+    const lastClickRef = (0, react_1.useRef)(0);
+    const isSelectable = metadata.type !== provider_interface_1.CloudMetadata.Label;
+    const handleFileSelected = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        const now = (new Date()).getTime();
-        this.props.fileSelected(this.props.metadata);
-        if ((now - this.lastClick) <= 250) {
-            this.props.fileConfirmed();
+        const now = new Date().getTime();
+        fileSelected(metadata);
+        if (now - lastClickRef.current <= 250) {
+            fileConfirmed();
         }
-        return this.lastClick = now;
-    },
-    render() {
-        const selectableClass = this.props.metadata.type !== provider_interface_1.CloudMetadata.Label ? 'selectable' : '';
-        const selectedClass = this.props.selected ? 'selected' : '';
-        const subFolderClass = this.props.isSubFolder ? 'subfolder' : '';
-        return (div({ className: `${selectableClass} ${selectedClass} ${subFolderClass}`,
-            title: this.props.metadata.description || undefined,
-            onClick: this.props.metadata.type !== provider_interface_1.CloudMetadata.Label ? this.fileSelected : undefined }, (italic({ className: (() => {
-                if (this.props.metadata.type === provider_interface_1.CloudMetadata.Folder) {
-                    return 'icon-inspectorArrow-collapse';
-                }
-                else if (this.props.metadata.type === provider_interface_1.CloudMetadata.File) {
-                    return 'icon-noteTool';
-                }
-            })() })), this.props.metadata.name));
-    }
-});
-const FileList = (0, create_react_factory_1.createReactClassFactory)({
-    displayName: 'FileList',
-    getInitialState() {
-        return { loading: true };
-    },
-    componentDidMount() {
-        this._isMounted = true;
-        return this.load(this.props.folder);
-    },
-    UNSAFE_componentWillReceiveProps(nextProps) {
-        if (nextProps.folder !== this.props.folder) {
-            return this.load(nextProps.folder);
-        }
-    },
-    componentWillUnmount() {
-        return this._isMounted = false;
-    },
-    load(folder) {
-        this.setState({ loading: true });
-        return this.props.provider.list(folder, (err, list) => {
-            // asynchronous callback may be called after dialog has been dismissed
-            if (this._isMounted) {
-                this.setState({ loading: false });
-            }
-            if (err) {
-                return this.props.client.alert(err);
+        lastClickRef.current = now;
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            fileSelected(metadata);
+            if (metadata.type === provider_interface_1.CloudMetadata.File) {
+                fileConfirmed();
             }
-            return this.props.listLoaded(list);
-        }, this.props.listOptions);
-    },
-    parentSelected(e) {
-        var _a;
-        return this.props.fileSelected((_a = this.props.folder) === null || _a === void 0 ? void 0 : _a.parent);
-    },
-    fileSelected(metadata) {
-        if (!this.state.loading) {
-            this.props.fileSelected(metadata);
         }
-    },
-    fileConfirmed() {
-        if (!this.state.loading) {
-            this.props.fileConfirmed();
+        else if (e.key === ' ') {
+            e.preventDefault();
+            fileSelected(metadata);
         }
-    },
-    render() {
-        const list = [];
-        const isSubFolder = (this.props.folder != null);
-        if (!this.state.loading) {
-            if (isSubFolder) {
-                list.push((div({ key: 'parent', className: 'selectable', onClick: this.parentSelected }, (italic({ className: 'icon-paletteArrow-collapse' })), this.props.folder.name)));
-            }
-            for (let i = 0; i < this.props.list.length; i++) {
-                const metadata = this.props.list[i];
-                list.push((FileListFile({ key: i, metadata, selected: this.props.selectedFile === metadata, fileSelected: this.fileSelected, fileConfirmed: this.fileConfirmed, isSubFolder })));
-            }
-        }
-        return (div({ className: 'filelist' }, this.state.loading
-            ? div({ key: 'loading' }, (0, translate_1.default)("~FILE_DIALOG.LOADING"))
-            : (this.props.overrideMessage || list)));
-    }
-});
-const FileDialogTab = (0, create_react_class_1.default)({
-    displayName: 'FileDialogTab',
-    getInitialState() {
-        var _a, _b, _c;
-        this._isMounted = true;
-        const initialState = this.getStateForFolder((_a = this.props.client.state.metadata) === null || _a === void 0 ? void 0 : _a.parent, true) || null;
-        initialState.filename = ((_b = initialState.metadata) === null || _b === void 0 ? void 0 : _b.name) || '';
-        // on saves default the search to the filename - on saves the search is the final filename
-        if (!this.isOpen()) {
-            initialState.search = initialState.filename || (0, translate_1.default)("~MENUBAR.UNTITLED_DOCUMENT");
-            // add the file extension on export
-            if (this.isExport() && ((_c = this.props.dialog.data) === null || _c === void 0 ? void 0 : _c.extension)) {
-                initialState.search = provider_interface_1.CloudMetadata.newExtension(initialState.search, this.props.dialog.data.extension);
+    };
+    const getIconClass = () => {
+        if (metadata.type === provider_interface_1.CloudMetadata.Folder)
+            return 'icon-inspectorArrow-collapse';
+        if (metadata.type === provider_interface_1.CloudMetadata.File)
+            return 'icon-noteTool';
+        return '';
+    };
+    const selectableClass = isSelectable ? 'selectable' : '';
+    const selectedClass = selected ? 'selected' : '';
+    const subFolderClass = isSubFolder ? 'subfolder' : '';
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `${selectableClass} ${selectedClass} ${subFolderClass}`, title: metadata.description || undefined, role: isSelectable ? 'option' : undefined, "aria-selected": isSelectable ? selected : undefined, tabIndex: isSelectable ? 0 : undefined, onClick: isSelectable ? handleFileSelected : undefined, onKeyDown: isSelectable ? handleKeyDown : undefined, children: [(0, jsx_runtime_1.jsx)("i", { className: getIconClass() }), metadata.name] }));
+};
+const FileList = ({ provider, folder, selectedFile, list, listLoaded, fileSelected, fileConfirmed, client, overrideMessage, listOptions }) => {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const isMountedRef = (0, react_1.useRef)(true);
+    const prevFolderRef = (0, react_1.useRef)(folder);
+    const load = (targetFolder) => {
+        setLoading(true);
+        provider.list(targetFolder, (err, loadedList) => {
+            // asynchronous callback may be called after dialog has been dismissed
+            if (isMountedRef.current) {
+                setLoading(false);
             }
-        }
-        // NP 2020-04-23 Copied from authorize-mixin.js
-        this._isAuthorized = false;
-        initialState.authorized = false;
-        return initialState;
-    },
-    // The constraints here are somewhat subtle. We want to try to
-    // determine whether the user is authorized before the first render,
-    // because authorization status can affect rendering. Thus, we want
-    // to perform the check in componentWillMount(). Some providers
-    // can/will respond immediately, either because they don't require
-    // authorization or because they are already authorized. Unfortunately,
-    // setState() can't be called in componentWillMount(), so if we get
-    // an immediate response, we need to store it in an instance variable.
-    // Then in componentDidMount(), we can propagate the instance variable
-    // to the state via a call to setState(). Some providers will need to
-    // make an asynchronous call to determine authorization status. This
-    // call may complete before or after the first render, i.e. before or
-    // after the componentDidMount() method. Once the component is mounted,
-    // the call to setState() is required to set the state and trigger a
-    // re-render. In the end we need to maintain both the instance variable
-    // and the state to track the authorization status, render the appropriate
-    // authorization status, and re-render when authorization status changes.
-    UNSAFE_componentWillMount() {
-        var _a, _b;
-        const setAuthorization = (authorized) => {
-            // always set the instance variable
-            this._isAuthorized = authorized;
-            // set the state if we can
-            if (this._isMounted) {
-                return this.setState({ authorized });
+            if (err) {
+                client.alert(err);
+                return;
             }
+            listLoaded(loadedList ?? []);
+        }, listOptions);
+    };
+    (0, react_1.useEffect)(() => {
+        isMountedRef.current = true;
+        load(folder);
+        return () => {
+            isMountedRef.current = false;
         };
-        // listen for logouts (Google Drive provider)
-        (_b = (_a = this.props.provider).onAuthorizationChange) === null || _b === void 0 ? void 0 : _b.call(_a, (authorized) => {
-            // reset rendering when de-authorized
-            if (this._isAuthorized && !authorized) {
-                this.setState(this.getInitialState());
-            }
-            setAuthorization(authorized);
-        });
-        // Check for authorization before the first render. Providers that
-        // don't require authorization or are already authorized will respond
-        // immediately, but since the component isn't mounted yet we can't
-        // call setState, so we set an instance variable and update state
-        // in componentDidMount(). Providers that require asynchronous checks
-        // for authorization may return before or after the first render, so
-        // code should be prepared for either eventuality.
-        return this.props.provider.authorized(setAuthorization);
-    },
-    // NP 2020-04-23  Copied from authorize-mixin.js
-    componentDidMount() {
-        this._isMounted = true;
-        // synchronize state if necessary
-        if (this.state.authorized !== this._isAuthorized) {
-            return this.setState({ authorized: this._isAuthorized });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(() => {
+        if (folder !== prevFolderRef.current) {
+            load(folder);
+            prevFolderRef.current = folder;
         }
-    },
-    // NP 2020-04-23  Copied from authorize-mixin.js
-    componentWillUnmount() {
-        var _a, _b;
-        (_b = (_a = this.props.provider).onAuthorizationChange) === null || _b === void 0 ? void 0 : _b.call(_a, null);
-        return this._isMounted = false;
-    },
-    // NP 2020-04-23 Copied from authorize-mixin.js
-    render() {
-        if (!this.props.provider.isAuthorizationRequired() || this.props.provider.authorized()) {
-            // the google drive provider renders its own dialog tab views that need to load after authorization
-            if (this.props.provider.renderFileDialogTabView) {
-                return this.props.provider.renderFileDialogTabView({ ...this.props, onConfirm: this.confirmed, onCancel: this.cancel });
-            }
-            return this.renderWhenAuthorized();
+    }, [folder]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleParentSelected = () => {
+        fileSelected(folder?.parent ?? null);
+    };
+    const handleFileSelected = (metadata) => {
+        if (!loading) {
+            fileSelected(metadata);
         }
-        else {
-            return this.props.provider.renderAuthorizationDialog();
+    };
+    const handleFileConfirmed = () => {
+        if (!loading) {
+            fileConfirmed();
         }
-    },
-    isOpen() {
-        return this.props.dialog.action === 'openFile';
-    },
-    isExport() {
-        return this.props.dialog.action === 'saveSecondaryFileAs';
-    },
-    searchChanged(e) {
-        const search = e.target.value;
-        return this.setState({
-            search,
-            filename: '',
-            metadata: null
-        });
-    },
-    listLoaded(list) {
-        // asynchronous callback may be called after dialog has been dismissed
-        if (this._isMounted) {
-            return this.setState({ list });
+    };
+    const isSubFolder = folder != null;
+    let listContent = [];
+    if (!loading) {
+        if (isSubFolder && folder) {
+            listContent.push((0, jsx_runtime_1.jsxs)("div", { className: "selectable", role: "option", "aria-selected": false, tabIndex: 0, onClick: handleParentSelected, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleParentSelected();
+                    }
+                }, children: [(0, jsx_runtime_1.jsx)("i", { className: "icon-paletteArrow-collapse" }), folder.name] }, "parent"));
         }
-    },
-    getSaveMetadata() {
-        // The save metadata for a file that may have been opened from another
-        // provider must be cloned, but without cloning the provider field.
-        // Furthermore, if the provider has changed, the provider and providerData
-        // fields should be cleared.
-        const saveMetadata = this.props.client.state.metadata ? lodash_1.default.clone(this.props.client.state.metadata) : null;
+        const fileItems = list.map((metadata, i) => ((0, jsx_runtime_1.jsx)(FileListFile, { metadata: metadata, selected: selectedFile === metadata, fileSelected: handleFileSelected, fileConfirmed: handleFileConfirmed, isSubFolder: isSubFolder }, i)));
+        listContent = listContent.concat(fileItems);
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "filelist", role: "listbox", "aria-label": (0, translate_1.default)("~FILE_DIALOG.FILENAME"), children: loading ? ((0, jsx_runtime_1.jsx)("div", { children: (0, translate_1.default)("~FILE_DIALOG.LOADING") }, "loading")) : (overrideMessage || listContent) }));
+};
+const FileDialogTab = ({ dialog, close, client, provider }) => {
+    const isMountedRef = (0, react_1.useRef)(true);
+    const isAuthorizedRef = (0, react_1.useRef)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const isOpen = () => dialog.action === 'openFile';
+    const isExport = () => dialog.action === 'saveSecondaryFileAs';
+    const getSaveMetadata = () => {
+        const saveMetadata = client.state.metadata ? lodash_1.default.clone(client.state.metadata) : null;
         if (saveMetadata) {
-            if (this.props.provider === saveMetadata.provider) {
+            if (provider === saveMetadata.provider) {
                 saveMetadata.providerData = lodash_1.default.cloneDeep(saveMetadata.providerData);
             }
             else {
@@ -242,17 +125,54 @@ const FileDialogTab = (0, create_react_class_1.default)({
             }
         }
         return saveMetadata;
-    },
-    getStateForFolder(folder, initialFolder) {
-        var _a;
-        const metadata = this.isOpen() ? ((_a = this.state) === null || _a === void 0 ? void 0 : _a.metadata) || null : this.getSaveMetadata();
-        if (initialFolder) {
-            folder = null;
+    };
+    const getInitialState = () => {
+        const metadata = isOpen() ? null : getSaveMetadata();
+        const filename = metadata?.name || '';
+        let search = '';
+        if (!isOpen()) {
+            search = filename || (0, translate_1.default)("~MENUBAR.UNTITLED_DOCUMENT");
+            if (isExport() && dialog.data?.extension) {
+                search = provider_interface_1.CloudMetadata.newExtension(search, dialog.data.extension);
+            }
         }
-        else {
-            if (metadata != null) {
-                metadata.parent = folder;
+        return {
+            folder: null, // Start with null folder for initial load
+            metadata,
+            filename,
+            list: [],
+            search,
+            authorized: false
+        };
+    };
+    const [state, setState] = (0, react_1.useState)(getInitialState);
+    (0, react_1.useEffect)(() => {
+        isMountedRef.current = true;
+        const setAuthorization = (authorized) => {
+            isAuthorizedRef.current = authorized;
+            if (isMountedRef.current) {
+                setState(prev => ({ ...prev, authorized }));
             }
+        };
+        // listen for logouts (Google Drive provider)
+        // Note: onAuthorizationChange is only available on some providers
+        const providerAny = provider;
+        providerAny.onAuthorizationChange?.((authorized) => {
+            if (isAuthorizedRef.current && !authorized) {
+                setState(getInitialState());
+            }
+            setAuthorization(authorized);
+        });
+        provider.authorized(setAuthorization);
+        return () => {
+            providerAny.onAuthorizationChange?.(null);
+            isMountedRef.current = false;
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    const getStateForFolder = (folder) => {
+        const metadata = isOpen() ? state.metadata : getSaveMetadata();
+        if (metadata != null) {
+            metadata.parent = folder ?? undefined;
         }
         const newState = {
             folder,
@@ -260,146 +180,166 @@ const FileDialogTab = (0, create_react_class_1.default)({
             filename: "",
             list: []
         };
-        if (this.isOpen()) {
+        if (isOpen()) {
             newState.search = "";
         }
         return newState;
-    },
-    fileSelected(metadata) {
-        if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) === provider_interface_1.CloudMetadata.Folder) {
-            return this.setState(this.getStateForFolder(metadata));
+    };
+    const searchChanged = (e) => {
+        const search = e.target.value;
+        setState(prev => ({
+            ...prev,
+            search,
+            filename: '',
+            metadata: null
+        }));
+    };
+    const listLoaded = (list) => {
+        if (isMountedRef.current) {
+            setState(prev => ({ ...prev, list }));
+        }
+    };
+    const fileSelected = (metadata) => {
+        if (metadata?.type === provider_interface_1.CloudMetadata.Folder) {
+            setState(prev => ({ ...prev, ...getStateForFolder(metadata) }));
         }
-        else if ((metadata === null || metadata === void 0 ? void 0 : metadata.type) === provider_interface_1.CloudMetadata.File) {
+        else if (metadata?.type === provider_interface_1.CloudMetadata.File) {
             const newState = { filename: metadata.name, metadata };
-            if (!this.isOpen()) {
-                newState.search = newState.filename;
+            if (!isOpen()) {
+                newState.search = metadata.name;
             }
-            return this.setState(newState);
+            setState(prev => ({ ...prev, ...newState }));
         }
         else {
-            return this.setState(this.getStateForFolder(null));
+            setState(prev => ({ ...prev, ...getStateForFolder(null) }));
         }
-    },
-    confirmed(_metadata) {
-        const metadata = _metadata;
+    };
+    const confirmed = (metadata) => {
         // ensure the metadata provider is the currently-showing tab
-        if (metadata.provider !== this.props.provider) {
-            metadata.provider = this.props.provider;
-            // if switching provider, then clear providerData
+        if (metadata.provider !== provider) {
+            metadata.provider = provider;
             metadata.providerData = {};
         }
-        if (typeof this.props.dialog.callback === 'function') {
-            this.props.dialog.callback(metadata);
+        dialog.callback?.(metadata);
+        setState(prev => ({ ...prev, metadata }));
+        close();
+    };
+    const findMetadata = (filename, list, extension) => {
+        const checkExtension = extension !== undefined;
+        const filenameWithExtension = checkExtension && provider_interface_1.CloudMetadata.newExtension(filename, extension);
+        for (const metadata of list) {
+            const found = checkExtension
+                ? metadata.filename === filenameWithExtension
+                : metadata.name === filename;
+            if (found) {
+                return metadata;
+            }
         }
-        this.setState({ metadata: metadata });
-        return this.props.close();
-    },
-    confirm() {
-        var _a;
-        const filename = jquery_1.default.trim(this.finalConfirmedFilename());
-        const existingMetadata = this.findMetadata(filename, this.state.list, (_a = this.props.dialog.data) === null || _a === void 0 ? void 0 : _a.extension);
-        const metadata = this.state.metadata || existingMetadata;
+        return null;
+    };
+    const finalConfirmedFilename = () => {
+        return isOpen() ? state.filename : (state.filename || state.search || "");
+    };
+    const confirmDisabled = () => {
+        return provider.fileDialogDisabled(state.folder) || (finalConfirmedFilename().length === 0) || (isOpen() && !state.metadata);
+    };
+    const confirm = () => {
+        const filename = jquery_1.default.trim(finalConfirmedFilename());
+        const existingMetadata = findMetadata(filename, state.list, dialog.data?.extension);
+        let metadata = state.metadata || existingMetadata;
         // a bit of a hack - on export clear the provider data if there is no matching file found so we don't
         // accidentally override the original saved file
-        if (this.isExport() && metadata && !existingMetadata) {
+        if (isExport() && metadata && !existingMetadata) {
             metadata.providerData = {};
         }
         if (metadata) {
-            if (this.isOpen()) {
-                return this.confirmed(metadata);
+            if (isOpen()) {
+                confirmed(metadata);
             }
             else if (existingMetadata) {
-                return this.props.client.confirm(`Are you sure you want to overwrite ${existingMetadata.name}?`, () => this.confirmed(existingMetadata));
+                client.confirm((0, translate_1.default)("~FILE_DIALOG.OVERWRITE_CONFIRM", { filename: existingMetadata.name }), () => confirmed(existingMetadata));
             }
             else {
-                return this.confirmed(metadata);
+                confirmed(metadata);
             }
         }
-        else if (this.isOpen()) {
-            return this.props.client.alert(`${filename} not found`);
+        else if (isOpen()) {
+            client.alert((0, translate_1.default)("~FILE_DIALOG.FILE_NOT_FOUND", { filename }));
         }
         else {
-            return this.confirmed(new provider_interface_1.CloudMetadata({
+            confirmed(new provider_interface_1.CloudMetadata({
                 name: filename,
                 type: provider_interface_1.CloudMetadata.File,
-                parent: this.state.folder || null,
-                provider: this.props.provider
+                parent: state.folder ?? undefined,
+                provider
             }));
         }
-    },
-    remove() {
-        if (this.state.metadata && (this.state.metadata.type !== provider_interface_1.CloudMetadata.Folder)) {
-            return this.props.client.confirm((0, translate_1.default)("~FILE_DIALOG.REMOVE_CONFIRM", { filename: this.state.metadata.name }), () => {
-                return this.props.provider.remove(this.state.metadata, (err) => {
+    };
+    const remove = () => {
+        if (state.metadata && state.metadata.type !== provider_interface_1.CloudMetadata.Folder) {
+            const filename = state.metadata.name ?? '';
+            client.confirm((0, translate_1.default)("~FILE_DIALOG.REMOVE_CONFIRM", { filename }), () => {
+                provider.remove(state.metadata, (err) => {
                     if (!err) {
-                        this.props.client.alert((0, translate_1.default)("~FILE_DIALOG.REMOVED_MESSAGE", { filename: this.state.metadata.name }), (0, translate_1.default)("~FILE_DIALOG.REMOVED_TITLE"));
-                        const list = this.state.list.slice(0);
-                        const index = list.indexOf(this.state.metadata);
+                        client.alert((0, translate_1.default)("~FILE_DIALOG.REMOVED_MESSAGE", { filename }), (0, translate_1.default)("~FILE_DIALOG.REMOVED_TITLE"));
+                        const list = state.list.slice(0);
+                        const index = list.indexOf(state.metadata);
                         list.splice(index, 1);
-                        return this.setState({
+                        setState(prev => ({
+                            ...prev,
                             list,
                             metadata: null,
                             filename: '',
                             search: ''
-                        });
+                        }));
                     }
                 });
             });
         }
-    },
-    cancel() {
-        return this.props.close();
-    },
-    findMetadata(filename, list, extension) {
-        const checkExtension = extension !== undefined;
-        const filenameWithExtension = checkExtension && provider_interface_1.CloudMetadata.newExtension(filename, extension);
-        for (let metadata of Array.from(list)) {
-            const found = checkExtension
-                ? metadata.filename === filenameWithExtension
-                : metadata.name === filename;
-            if (found) {
-                return metadata;
-            }
-        }
-        return null;
-    },
-    watchForEnter(e) {
-        if ((e.keyCode === 13) && !this.confirmDisabled()) {
-            return this.confirm();
+    };
+    const cancel = () => {
+        close();
+    };
+    const watchForEnter = (e) => {
+        if (e.key === 'Enter' && !confirmDisabled()) {
+            confirm();
         }
-    },
-    finalConfirmedFilename() {
-        // use filename for open and filename or search for saves
-        return this.isOpen() ? this.state.filename : (this.state.filename || this.state.search || "");
-    },
-    confirmDisabled() {
-        return this.props.provider.fileDialogDisabled(this.state.folder) || (this.finalConfirmedFilename().length === 0) || (this.isOpen() && !this.state.metadata);
-    },
-    clearListFilter() {
-        var _a;
-        this.setState({ search: "" });
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
-    },
-    renderWhenAuthorized() {
-        var _a;
-        const confirmDisabled = this.confirmDisabled();
-        const removeDisabled = (this.state.metadata === null) || (this.state.metadata.type === provider_interface_1.CloudMetadata.Folder);
-        const isOpen = this.isOpen();
-        const search = this.state.search || "";
+    };
+    const clearListFilter = () => {
+        setState(prev => ({ ...prev, search: "" }));
+        inputRef.current?.focus();
+    };
+    const renderWhenAuthorized = () => {
+        const disabled = confirmDisabled();
+        const removeDisabled = state.metadata === null || state.metadata.type === provider_interface_1.CloudMetadata.Folder;
+        const isOpenAction = isOpen();
+        const search = state.search || "";
         const lowerSearch = search.toLowerCase();
-        const filtering = isOpen && search.length > 0;
+        const filtering = isOpenAction && search.length > 0;
         const list = filtering
-            ? this.state.list.filter((item) => item.name.toLowerCase().indexOf(lowerSearch) !== -1)
-            : this.state.list;
-        const listFiltered = list.length !== this.state.list.length;
+            ? state.list.filter((item) => item.name?.toLowerCase().indexOf(lowerSearch) !== -1)
+            : state.list;
+        const listFiltered = list.length !== state.list.length;
         const overrideMessage = filtering && listFiltered && list.length === 0
-            ? div({}, `No files found matching "${search}"`)
+            ? (0, jsx_runtime_1.jsxs)("div", { children: ["No files found matching \u201C", search, "\u201D"] })
             : null;
         // when exporting only show folders as we can't filter based on mimetypes like text/csv or image/png to show only those files
-        const listOptions = this.isExport() && ((_a = this.props.dialog.data) === null || _a === void 0 ? void 0 : _a.extension) ? { extension: this.props.dialog.data.extension } : undefined;
-        return (div({ className: 'dialogTab' }, (input({ type: 'text', value: search, placeholder: ((0, translate_1.default)(isOpen ? "~FILE_DIALOG.FILTER" : "~FILE_DIALOG.FILENAME")), autoFocus: true, onChange: this.searchChanged, onKeyDown: this.watchForEnter, ref: (elt) => { return this.inputRef = elt; } })), (listFiltered && div({ className: 'dialogClearFilter', onClick: this.clearListFilter }, "X")), (FileList({ provider: this.props.provider, folder: this.state.folder, selectedFile: this.state.metadata, fileSelected: this.fileSelected, fileConfirmed: this.confirm, list, listLoaded: this.listLoaded, client: this.props.client, overrideMessage, listOptions })), (div({ className: 'buttons' }, (button({ onClick: this.confirm, disabled: confirmDisabled, className: confirmDisabled ? 'disabled' : '' }, this.isOpen() ? ((0, translate_1.default)("~FILE_DIALOG.OPEN")) : ((0, translate_1.default)("~FILE_DIALOG.SAVE")))), this.props.provider.can('remove') ?
-            (button({ onClick: this.remove, disabled: removeDisabled, className: removeDisabled ? 'disabled' : '' }, ((0, translate_1.default)("~FILE_DIALOG.REMOVE")))) : undefined, (button({ onClick: this.cancel }, ((0, translate_1.default)("~FILE_DIALOG.CANCEL"))))))));
+        const listOptions = isExport() && dialog.data?.extension ? { extension: dialog.data.extension } : undefined;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "dialogTab", children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: search, "aria-label": (0, translate_1.default)(isOpenAction ? "~FILE_DIALOG.FILTER" : "~FILE_DIALOG.FILENAME"), placeholder: (0, translate_1.default)(isOpenAction ? "~FILE_DIALOG.FILTER" : "~FILE_DIALOG.FILENAME"), autoFocus: true, onChange: searchChanged, onKeyDown: watchForEnter, ref: inputRef }), listFiltered && ((0, jsx_runtime_1.jsx)("button", { className: "dialogClearFilter", title: (0, translate_1.default)("~FILE_DIALOG.CLEAR_FILTER"), "aria-label": (0, translate_1.default)("~FILE_DIALOG.CLEAR_FILTER"), onClick: clearListFilter, children: "\u00D7" })), (0, jsx_runtime_1.jsx)(FileList, { provider: provider, folder: state.folder, selectedFile: state.metadata, fileSelected: fileSelected, fileConfirmed: confirm, list: list, listLoaded: listLoaded, client: client, overrideMessage: overrideMessage, listOptions: listOptions }), (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [(0, jsx_runtime_1.jsx)("button", { onClick: confirm, disabled: disabled, className: disabled ? 'disabled' : 'default', children: isOpenAction ? (0, translate_1.default)("~FILE_DIALOG.OPEN") : (0, translate_1.default)("~FILE_DIALOG.SAVE") }), provider.can(provider_interface_1.ECapabilities.remove) && ((0, jsx_runtime_1.jsx)("button", { onClick: remove, disabled: removeDisabled, className: removeDisabled ? 'disabled' : '', children: (0, translate_1.default)("~FILE_DIALOG.REMOVE") })), (0, jsx_runtime_1.jsx)("button", { onClick: cancel, children: (0, translate_1.default)("~FILE_DIALOG.CANCEL") })] })] }));
+    };
+    // Main render
+    // Note: authorized() is typed as void but actually returns a boolean when called without a callback
+    const providerAny = provider;
+    if (!provider.isAuthorizationRequired() || providerAny.authorized()) {
+        // the google drive provider renders its own dialog tab views that need to load after authorization
+        if (providerAny.renderFileDialogTabView) {
+            return providerAny.renderFileDialogTabView({ ...{ dialog, close, client, provider }, onConfirm: confirmed, onCancel: cancel });
+        }
+        return renderWhenAuthorized();
     }
-});
+    else {
+        return provider.renderAuthorizationDialog();
+    }
+};
 exports.default = FileDialogTab;
 //# sourceMappingURL=file-dialog-tab-view.js.map