blixify-ui-web 1.2.111 → 1.2.113

package/lib/components/data/driveTemplate/index.js

@@ -0,0 +1,1163 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DriveTemplate = void 0;
+var react_1 = require("@headlessui/react");
+var HeroIcons = __importStar(require("@heroicons/react/24/outline"));
+var react_2 = __importStar(require("react"));
+var uuid_1 = require("uuid");
+var button_1 = require("../../action/button");
+var iconButton_1 = require("../../action/iconButton");
+var popUp_1 = require("../../advanced/popUp");
+var emptyState_1 = require("../../display/emptyState");
+var filePreview_1 = require("../../display/filePreview");
+var loading_1 = require("../../display/loading");
+var modal_1 = require("../../display/modal");
+var newList_1 = require("../../display/newList");
+var textInput_1 = require("../../input/textInput");
+var uploadInput_1 = require("../../input/uploadInput");
+var blobModule_1 = require("../blobModule");
+var readQuery_1 = require("../readQuery");
+var utils_1 = require("../utils");
+var writeQuery_1 = require("../writeQuery");
+var driveUtils_1 = require("./driveUtils");
+__exportStar(require("./driveUtils"), exports);
+var LAYOUT_STORAGE_PREFIX = "blixify-drive-layout-";
+var SEARCH_DEBOUNCE_MS = 400;
+// INFO: the same cap the path walk uses — a deeper chain is treated as a loop
+var MAX_DELETE_DEPTH = 64;
+/**
+ * A Google Drive-style folder browser over a collection whose rows are files
+ * and folders.
+ *
+ * INFO: a standalone template rather than a DataTemplate view — a drive has one
+ * fixed data structure, and sitting beside a table view let users add blank
+ * records or edit the columns the drive depends on.
+ */
+var DriveTemplate = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var _h = (0, react_2.useState)(""), innerFolderId = _h[0], setInnerFolderId = _h[1];
+    var _j = (0, react_2.useState)([]), rows = _j[0], setRows = _j[1];
+    var _k = (0, react_2.useState)(true), loading = _k[0], setLoading = _k[1];
+    var _l = (0, react_2.useState)(new Map()), folders = _l[0], setFolders = _l[1];
+    var _m = (0, react_2.useState)(""), searchText = _m[0], setSearchText = _m[1];
+    var _o = (0, react_2.useState)(""), searchQuery = _o[0], setSearchQuery = _o[1];
+    var _p = (0, react_2.useState)(function () {
+        try {
+            var stored = window.localStorage.getItem(LAYOUT_STORAGE_PREFIX + props.collectionId);
+            if (stored === "grid" || stored === "list")
+                return stored;
+        }
+        catch (err) { }
+        // INFO: a phone has no room for tiles and a menu per tile
+        return typeof window !== "undefined" && window.innerWidth < 640
+            ? "list"
+            : "grid";
+    }), layout = _p[0], setLayout = _p[1];
+    var _q = (0, react_2.useState)(false), newFolderOpen = _q[0], setNewFolderOpen = _q[1];
+    var _r = (0, react_2.useState)(""), folderName = _r[0], setFolderName = _r[1];
+    var _s = (0, react_2.useState)(null), renameRow = _s[0], setRenameRow = _s[1];
+    var _t = (0, react_2.useState)(""), renameValue = _t[0], setRenameValue = _t[1];
+    var _u = (0, react_2.useState)(null), moveRow = _u[0], setMoveRow = _u[1];
+    var _v = (0, react_2.useState)(null), deleteRow = _v[0], setDeleteRow = _v[1];
+    var _w = (0, react_2.useState)(null), deleteIds = _w[0], setDeleteIds = _w[1];
+    var _x = (0, react_2.useState)(null), previewRow = _x[0], setPreviewRow = _x[1];
+    var _y = (0, react_2.useState)(false), uploadOpen = _y[0], setUploadOpen = _y[1];
+    var _z = (0, react_2.useState)({
+        data: [],
+        upload: [],
+        remove: [],
+    }), uploadFiles = _z[0], setUploadFiles = _z[1];
+    var _0 = (0, react_2.useState)({}), uploadStatus = _0[0], setUploadStatus = _0[1];
+    var _1 = (0, react_2.useState)(false), working = _1[0], setWorking = _1[1];
+    var _2 = (0, react_2.useState)(false), dragging = _2[0], setDragging = _2[1];
+    var _3 = (0, react_2.useState)(""), modalError = _3[0], setModalError = _3[1];
+    // INFO: dragenter and dragleave fire for every child the pointer crosses, so a
+    // plain boolean flickers off over each tile; a depth count only reaches zero
+    // when the drag has really left the drive
+    var dragDepthRef = (0, react_2.useRef)(0);
+    // INFO: a slow folder answering after a faster one must not overwrite it
+    var fetchSeqRef = (0, react_2.useRef)(0);
+    var folderSeqRef = (0, react_2.useRef)(0);
+    // INFO: a folder's contents are counted before its delete is confirmed. A
+    // count that finishes after the dialog closed or moved to another item must
+    // not attach its ids to that item's Delete button
+    var deleteSeqRef = (0, react_2.useRef)(0);
+    // INFO: what the drive is showing right now. A refresh that fires after a
+    // long upload reads this rather than the folder open when the upload began,
+    // or it would load the old folder under the new folder's path
+    var viewRef = (0, react_2.useRef)({
+        folderId: "",
+        searchQuery: "",
+        additionalQuery: [],
+    });
+    var devSettings = props.devSettings;
+    var serverId = (0, utils_1.parseServerId)(devSettings.server);
+    var folderId = (_a = props.folderId) !== null && _a !== void 0 ? _a : innerFolderId;
+    var additionalQuery = (_b = props.additionalQuery) !== null && _b !== void 0 ? _b : [];
+    var additionalQueryKey = JSON.stringify(additionalQuery);
+    var searching = !!searchQuery;
+    var dark = !!props.darkMode;
+    // INFO: one set of surface and text classes so every tile, menu and message
+    // follows darkMode, not only the header
+    var textStrong = dark ? "text-white" : "text-gray-900";
+    var textBody = dark ? "text-gray-300" : "text-gray-700";
+    var surface = dark
+        ? "border-white/10 bg-white/5 hover:bg-white/10"
+        : "border-gray-200 bg-white hover:bg-gray-50";
+    var canCreate = !!((_c = props.permissions) === null || _c === void 0 ? void 0 : _c.create);
+    var canUpdate = !!((_d = props.permissions) === null || _d === void 0 ? void 0 : _d.update);
+    var canDelete = !!((_e = props.permissions) === null || _e === void 0 ? void 0 : _e.delete);
+    var uploadEndpoint = devSettings.uploadEndpoint || "/api/asset";
+    var readQuery = (0, react_2.useMemo)(function () {
+        return new readQuery_1.ReadQuery({
+            dbModule: props.lib.axios,
+            dbType: devSettings.server,
+            dbCollection: props.collectionId,
+            dbEndpoint: devSettings.dbEndpoint,
+            dbAPIToken: devSettings.dbAPIToken,
+            dbUserToken: devSettings.dbUserToken,
+        });
+    }, [
+        props.lib.axios,
+        props.collectionId,
+        devSettings.server,
+        devSettings.dbEndpoint,
+        devSettings.dbAPIToken,
+        devSettings.dbUserToken,
+    ]);
+    var writeQuery = (0, react_2.useMemo)(function () {
+        return new writeQuery_1.WriteQuery({
+            dbModule: props.lib.axios,
+            dbType: devSettings.server,
+            dbCollection: props.collectionId,
+            dbEndpoint: devSettings.dbEndpoint,
+            dbAPIToken: devSettings.dbAPIToken,
+            dbUserToken: devSettings.dbUserToken,
+        });
+    }, [
+        props.lib.axios,
+        props.collectionId,
+        devSettings.server,
+        devSettings.dbEndpoint,
+        devSettings.dbAPIToken,
+        devSettings.dbUserToken,
+    ]);
+    var sortedRows = (0, driveUtils_1.handleSortDriveRows)(rows);
+    var path = (0, driveUtils_1.handleBuildFolderPath)(folders, folderId);
+    viewRef.current = { folderId: folderId, searchQuery: searchQuery, additionalQuery: additionalQuery };
+    (0, react_2.useEffect)(function () {
+        var timer = setTimeout(function () { return setSearchQuery(searchText.trim()); }, SEARCH_DEBOUNCE_MS);
+        return function () { return clearTimeout(timer); };
+    }, [searchText]);
+    (0, react_2.useEffect)(function () {
+        handleFetchRows();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.collectionId, folderId, searchQuery, additionalQueryKey]);
+    (0, react_2.useEffect)(function () {
+        handleLoadFolders();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.collectionId, additionalQueryKey]);
+    /**
+     * INFO: the whole folder in one unpaged read — folders sort first on the
+     * client, which only holds if nothing is left on a later page. A search
+     * reads across the whole drive instead of the open folder.
+     */
+    var handleFetchRows = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var seq, view, res, err_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    seq = ++fetchSeqRef.current;
+                    view = viewRef.current;
+                    setLoading(true);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, readQuery.call({
+                            type: "list",
+                            query: __spreadArray(__spreadArray([], view.additionalQuery, true), [
+                                view.searchQuery
+                                    ? (0, driveUtils_1.handleBuildDriveSearchQuery)(view.searchQuery)
+                                    : (0, driveUtils_1.handleBuildDriveFolderQuery)(view.folderId),
+                            ], false),
+                            stopLimit: true,
+                        })];
+                case 2:
+                    res = _b.sent();
+                    if (seq !== fetchSeqRef.current)
+                        return [2 /*return*/];
+                    setRows((_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : []);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _b.sent();
+                    if (seq !== fetchSeqRef.current)
+                        return [2 /*return*/];
+                    setRows([]);
+                    return [3 /*break*/, 4];
+                case 4:
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleLoadFolders = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var seq, res, err_2;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    seq = ++folderSeqRef.current;
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, readQuery.call({
+                            type: "list",
+                            query: __spreadArray(__spreadArray([], viewRef.current.additionalQuery, true), [
+                                { type: "=", queryId: driveUtils_1.DRIVE_COLUMNS.kind, value: driveUtils_1.DRIVE_FOLDER },
+                            ], false),
+                            stopLimit: true,
+                        })];
+                case 2:
+                    res = _b.sent();
+                    if (seq !== folderSeqRef.current)
+                        return [2 /*return*/];
+                    setFolders((0, driveUtils_1.handleMapDriveFolders)((_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : []));
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_2 = _b.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleChangeFolder = function (nextFolderId) {
+        if (props.onChangeFolder)
+            props.onChangeFolder(nextFolderId);
+        else
+            setInnerFolderId(nextFolderId);
+    };
+    var handleChangeLayout = function (next) {
+        setLayout(next);
+        try {
+            window.localStorage.setItem(LAYOUT_STORAGE_PREFIX + props.collectionId, next);
+        }
+        catch (err) { }
+    };
+    var handleAfterWrite = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, Promise.all([handleFetchRows(), handleLoadFolders()])];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleBuildPrefill = function () {
+        var _a;
+        var prefill = {};
+        ((_a = props.createPrefill) !== null && _a !== void 0 ? _a : []).forEach(function (eachPrefill) {
+            prefill[eachPrefill.key] = eachPrefill.value;
+        });
+        return prefill;
+    };
+    var handleResolveFile = function (row) {
+        var _a;
+        var value = row === null || row === void 0 ? void 0 : row[driveUtils_1.DRIVE_COLUMNS.file];
+        var entry = Array.isArray(value) ? value[0] : value;
+        if (!(entry === null || entry === void 0 ? void 0 : entry.token) || !(entry === null || entry === void 0 ? void 0 : entry.fileName))
+            return null;
+        return {
+            fileName: (0, blobModule_1.renderImageUrlFromPath)(devSettings.imageEndpoint, props.collectionId, (0, driveUtils_1.handleGetRowId)(row), entry.fileName, entry.token, devSettings.bucketName),
+            label: String((_a = row === null || row === void 0 ? void 0 : row[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _a !== void 0 ? _a : "") || undefined,
+            token: entry.token,
+            mimeType: (row === null || row === void 0 ? void 0 : row[driveUtils_1.DRIVE_COLUMNS.mimeType]) ||
+                entry.mimeType ||
+                (0, filePreview_1.handleGuessMimeType)(entry.fileName),
+        };
+    };
+    var handleOpenRow = function (row) {
+        if ((0, driveUtils_1.handleIsDriveFolder)(row)) {
+            // INFO: a search reads the whole drive, so opening a folder from its
+            // results has to end the search or the folder shows the results again
+            setSearchText("");
+            setSearchQuery("");
+            handleChangeFolder((0, driveUtils_1.handleGetRowId)(row));
+        }
+        else
+            setPreviewRow(row);
+    };
+    var handleCloseModals = function () {
+        deleteSeqRef.current += 1;
+        setNewFolderOpen(false);
+        setFolderName("");
+        setRenameRow(null);
+        setRenameValue("");
+        setMoveRow(null);
+        setDeleteRow(null);
+        setDeleteIds(null);
+        setModalError("");
+    };
+    var handleCreateFolder = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var name, err_3;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    // INFO: Enter and a phone's Done still submit while the button is disabled
+                    if (working)
+                        return [2 /*return*/];
+                    name = folderName.trim();
+                    if (!name)
+                        return [2 /*return*/, setModalError("Name the folder.")];
+                    if ((0, driveUtils_1.handleIsDuplicateFolderName)(folders, folderId, name))
+                        return [2 /*return*/, setModalError("A folder named \"".concat(name, "\" is already here."))];
+                    setWorking(true);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, writeQuery.call("create", {
+                            data: __assign(__assign({}, handleBuildPrefill()), (_a = {}, _a[serverId] = (0, uuid_1.v4)(), _a[driveUtils_1.DRIVE_COLUMNS.name] = name, _a[driveUtils_1.DRIVE_COLUMNS.kind] = driveUtils_1.DRIVE_FOLDER, _a[driveUtils_1.DRIVE_COLUMNS.parentId] = folderId, _a)),
+                        })];
+                case 2:
+                    _b.sent();
+                    handleCloseModals();
+                    return [4 /*yield*/, handleAfterWrite()];
+                case 3:
+                    _b.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_3 = _b.sent();
+                    setModalError("The folder could not be created.");
+                    return [3 /*break*/, 5];
+                case 5:
+                    setWorking(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleOpenRename = function (row) {
+        var _a;
+        setRenameRow(row);
+        setRenameValue(String((_a = row === null || row === void 0 ? void 0 : row[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _a !== void 0 ? _a : ""));
+        setModalError("");
+    };
+    var handleRename = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var name, rowId, err_4;
+        var _a;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (working)
+                        return [2 /*return*/];
+                    name = renameValue.trim();
+                    if (!name)
+                        return [2 /*return*/, setModalError("A name is required.")];
+                    rowId = (0, driveUtils_1.handleGetRowId)(renameRow);
+                    if ((0, driveUtils_1.handleIsDriveFolder)(renameRow) &&
+                        (0, driveUtils_1.handleIsDuplicateFolderName)(folders, String((_b = renameRow === null || renameRow === void 0 ? void 0 : renameRow[driveUtils_1.DRIVE_COLUMNS.parentId]) !== null && _b !== void 0 ? _b : ""), name, rowId))
+                        return [2 /*return*/, setModalError("A folder named \"".concat(name, "\" is already here."))];
+                    setWorking(true);
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, writeQuery.call("update", {
+                            id: rowId,
+                            data: (_a = {}, _a[driveUtils_1.DRIVE_COLUMNS.name] = name, _a),
+                        })];
+                case 2:
+                    _c.sent();
+                    handleCloseModals();
+                    return [4 /*yield*/, handleAfterWrite()];
+                case 3:
+                    _c.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_4 = _c.sent();
+                    setModalError("The name could not be saved.");
+                    return [3 /*break*/, 5];
+                case 5:
+                    setWorking(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleMove = function (targetFolderId) { return __awaiter(void 0, void 0, void 0, function () {
+        var rowId, err_5;
+        var _a;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (working)
+                        return [2 /*return*/];
+                    rowId = (0, driveUtils_1.handleGetRowId)(moveRow);
+                    if ((0, driveUtils_1.handleIsDriveFolder)(moveRow) &&
+                        (0, driveUtils_1.handleIsDuplicateFolderName)(folders, targetFolderId, String((_b = moveRow === null || moveRow === void 0 ? void 0 : moveRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _b !== void 0 ? _b : ""), rowId))
+                        return [2 /*return*/, setModalError("A folder with this name is already there.")];
+                    setWorking(true);
+                    _c.label = 1;
+                case 1:
+                    _c.trys.push([1, 4, , 5]);
+                    return [4 /*yield*/, writeQuery.call("update", {
+                            id: rowId,
+                            data: (_a = {}, _a[driveUtils_1.DRIVE_COLUMNS.parentId] = targetFolderId, _a),
+                        })];
+                case 2:
+                    _c.sent();
+                    handleCloseModals();
+                    return [4 /*yield*/, handleAfterWrite()];
+                case 3:
+                    _c.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_5 = _c.sent();
+                    setModalError("The item could not be moved.");
+                    return [3 /*break*/, 5];
+                case 5:
+                    setWorking(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * Every row below a folder, read one level at a time.
+     *
+     * INFO: only the folder's own subtree is read — by parentId, one request per
+     * level, keeping just the id and folder columns — so counting a folder costs
+     * its size, not the size of the whole drive.
+     */
+    var handleReadSubtreeIds = function (rootId, query) { return __awaiter(void 0, void 0, void 0, function () {
+        var found, seen, frontier, _loop_1, depth;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    found = [];
+                    seen = new Set([rootId]);
+                    frontier = [rootId];
+                    _loop_1 = function (depth) {
+                        var res, next;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0: return [4 /*yield*/, readQuery.call({
+                                        type: "list",
+                                        query: __spreadArray(__spreadArray([], query, true), [
+                                            { type: "in", queryId: driveUtils_1.DRIVE_COLUMNS.parentId, value: frontier },
+                                        ], false),
+                                        attributeIds: [serverId, driveUtils_1.DRIVE_COLUMNS.parentId],
+                                        stopLimit: true,
+                                    })];
+                                case 1:
+                                    res = _c.sent();
+                                    next = [];
+                                    ((_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : []).forEach(function (eachRow) {
+                                        var id = (0, driveUtils_1.handleGetRowId)(eachRow);
+                                        if (!id || seen.has(id))
+                                            return;
+                                        seen.add(id);
+                                        found.push(id);
+                                        next.push(id);
+                                    });
+                                    frontier = next;
+                                    return [2 /*return*/];
+                            }
+                        });
+                    };
+                    depth = 0;
+                    _b.label = 1;
+                case 1:
+                    if (!(frontier.length > 0 && depth < MAX_DELETE_DEPTH)) return [3 /*break*/, 4];
+                    return [5 /*yield**/, _loop_1(depth)];
+                case 2:
+                    _b.sent();
+                    _b.label = 3;
+                case 3:
+                    depth += 1;
+                    return [3 /*break*/, 1];
+                case 4: return [2 /*return*/, found];
+            }
+        });
+    }); };
+    /**
+     * INFO: a folder's contents are counted before anything is deleted, so the
+     * confirmation says what will go. A scoped member's folder can hold rows
+     * outside their slice; deleting the folder would strand those rows under a
+     * parent that no longer exists, where no view can reach them, so such a
+     * folder is refused. When the unscoped count cannot be read the delete is
+     * refused too, rather than guessed.
+     */
+    var handleOpenDelete = function (row) { return __awaiter(void 0, void 0, void 0, function () {
+        var seq, rowId, visibleIds, err_6, allIds, err_7;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    seq = ++deleteSeqRef.current;
+                    setDeleteRow(row);
+                    setModalError("");
+                    if (!(0, driveUtils_1.handleIsDriveFolder)(row)) {
+                        setDeleteIds([(0, driveUtils_1.handleGetRowId)(row)]);
+                        return [2 /*return*/];
+                    }
+                    setDeleteIds(null);
+                    rowId = (0, driveUtils_1.handleGetRowId)(row);
+                    visibleIds = [];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, handleReadSubtreeIds(rowId, additionalQuery)];
+                case 2:
+                    visibleIds = _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_6 = _a.sent();
+                    if (seq === deleteSeqRef.current)
+                        setModalError("The folder's contents could not be read.");
+                    return [2 /*return*/];
+                case 4:
+                    if (!(additionalQuery.length > 0)) return [3 /*break*/, 8];
+                    _a.label = 5;
+                case 5:
+                    _a.trys.push([5, 7, , 8]);
+                    return [4 /*yield*/, handleReadSubtreeIds(rowId, [])];
+                case 6:
+                    allIds = _a.sent();
+                    if (allIds.length > visibleIds.length) {
+                        if (seq === deleteSeqRef.current)
+                            setModalError("This folder holds items you do not have access to, so it cannot be deleted.");
+                        return [2 /*return*/];
+                    }
+                    return [3 /*break*/, 8];
+                case 7:
+                    err_7 = _a.sent();
+                    if (seq === deleteSeqRef.current)
+                        setModalError("Whether this folder holds items you cannot see could not be checked, so it cannot be deleted.");
+                    return [2 /*return*/];
+                case 8:
+                    if (seq !== deleteSeqRef.current)
+                        return [2 /*return*/];
+                    setDeleteIds(__spreadArray([rowId], visibleIds, true));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var form, err_8;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(deleteIds === null || deleteIds === void 0 ? void 0 : deleteIds.length))
+                        return [2 /*return*/];
+                    setWorking(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 5, , 6]);
+                    return [4 /*yield*/, writeQuery.call("batchDelete", { id: deleteIds })];
+                case 2:
+                    _a.sent();
+                    form = new FormData();
+                    form.append("data[assetCollectionName]", props.collectionId);
+                    form.append("data[assetParentId]", JSON.stringify(deleteIds));
+                    if (devSettings.bucketName)
+                        form.append("data[bucketName]", devSettings.bucketName);
+                    return [4 /*yield*/, props.lib
+                            .axios({
+                            data: form,
+                            method: "post",
+                            url: "".concat(uploadEndpoint, "/batchDeleteDirectory"),
+                            headers: { "Content-Type": "multipart/form-data" },
+                        })
+                            .catch(function () { })];
+                case 3:
+                    _a.sent();
+                    handleCloseModals();
+                    return [4 /*yield*/, handleAfterWrite()];
+                case 4:
+                    _a.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    err_8 = _a.sent();
+                    setModalError("The item could not be deleted.");
+                    return [3 /*break*/, 6];
+                case 6:
+                    setWorking(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleUploadToStorage = function (rowId, storedName, file) { return __awaiter(void 0, void 0, void 0, function () {
+        var dataForm, res;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    dataForm = new FormData();
+                    dataForm.append("file", file);
+                    dataForm.append("data[assetCollectionName]", props.collectionId);
+                    dataForm.append("data[assetParentId]", rowId);
+                    dataForm.append("data[assetFileName]", storedName);
+                    if (devSettings.bucketName)
+                        dataForm.append("data[bucketName]", devSettings.bucketName);
+                    return [4 /*yield*/, props.lib.axios({
+                            method: "post",
+                            url: "".concat(uploadEndpoint, "/upload"),
+                            data: dataForm,
+                            headers: { "Content-Type": "multipart/form-data" },
+                        })];
+                case 1:
+                    res = _b.sent();
+                    return [2 /*return*/, (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data];
+            }
+        });
+    }); };
+    /**
+     * INFO: one row per file, each uploaded into its own row's storage folder
+     * first — a row is only created for a file that stored, and one failure does
+     * not stop the rest.
+     */
+    var handleUploadFiles = function (queued) { return __awaiter(void 0, void 0, void 0, function () {
+        var failed, _loop_2, _i, queued_1, eachFile;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!queued.length)
+                        return [2 /*return*/];
+                    setWorking(true);
+                    setModalError("");
+                    failed = 0;
+                    _loop_2 = function (eachFile) {
+                        var file, rowId, storedName, token, err_9;
+                        var _b;
+                        return __generator(this, function (_c) {
+                            switch (_c.label) {
+                                case 0:
+                                    setUploadStatus(function (current) {
+                                        var _a;
+                                        return (__assign(__assign({}, current), (_a = {}, _a[eachFile.token] = "uploading", _a)));
+                                    });
+                                    _c.label = 1;
+                                case 1:
+                                    _c.trys.push([1, 4, , 5]);
+                                    file = eachFile.fileName;
+                                    rowId = (0, uuid_1.v4)();
+                                    storedName = "".concat((0, uuid_1.v4)(), "-").concat(file.name);
+                                    return [4 /*yield*/, handleUploadToStorage(rowId, storedName, file)];
+                                case 2:
+                                    token = _c.sent();
+                                    if (!token)
+                                        throw new Error("No token returned");
+                                    return [4 /*yield*/, writeQuery.call("create", {
+                                            data: __assign(__assign({}, handleBuildPrefill()), (_b = {}, _b[serverId] = rowId, _b[driveUtils_1.DRIVE_COLUMNS.name] = file.name, _b[driveUtils_1.DRIVE_COLUMNS.kind] = driveUtils_1.DRIVE_FILE, _b[driveUtils_1.DRIVE_COLUMNS.parentId] = folderId, _b[driveUtils_1.DRIVE_COLUMNS.file] = [{ token: token, fileName: storedName }], _b[driveUtils_1.DRIVE_COLUMNS.size] = file.size, _b[driveUtils_1.DRIVE_COLUMNS.mimeType] = file.type, _b)),
+                                        })];
+                                case 3:
+                                    _c.sent();
+                                    setUploadStatus(function (current) {
+                                        var _a;
+                                        return (__assign(__assign({}, current), (_a = {}, _a[eachFile.token] = "done", _a)));
+                                    });
+                                    return [3 /*break*/, 5];
+                                case 4:
+                                    err_9 = _c.sent();
+                                    failed += 1;
+                                    setUploadStatus(function (current) {
+                                        var _a;
+                                        return (__assign(__assign({}, current), (_a = {}, _a[eachFile.token] = "failed", _a)));
+                                    });
+                                    return [3 /*break*/, 5];
+                                case 5: return [2 /*return*/];
+                            }
+                        });
+                    };
+                    _i = 0, queued_1 = queued;
+                    _a.label = 1;
+                case 1:
+                    if (!(_i < queued_1.length)) return [3 /*break*/, 4];
+                    eachFile = queued_1[_i];
+                    return [5 /*yield**/, _loop_2(eachFile)];
+                case 2:
+                    _a.sent();
+                    _a.label = 3;
+                case 3:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 4:
+                    setWorking(false);
+                    handleFetchRows();
+                    if (failed === 0)
+                        handleCloseUpload();
+                    else
+                        setModalError("".concat(failed, " file(s) could not be uploaded."));
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleUploadAll = function () {
+        var _a;
+        return handleUploadFiles(((_a = uploadFiles.upload) !== null && _a !== void 0 ? _a : []).filter(function (eachFile) {
+            return uploadStatus[eachFile.token] !== "done" &&
+                eachFile.fileName instanceof File;
+        }));
+    };
+    /**
+     * INFO: a drop starts uploading at once — dragging files onto a folder is
+     * already the decision, so a confirm step would only be a second click. The
+     * dialog opens to show each file's progress and closes when all have stored.
+     */
+    var handleDropFiles = function (files) {
+        if (working || !files.length)
+            return;
+        var queued = files.map(function (eachFile) { return ({
+            token: (0, uuid_1.v4)(),
+            fileName: eachFile,
+        }); });
+        setUploadFiles({ data: [], upload: queued, remove: [] });
+        setUploadStatus(Object.fromEntries(queued.map(function (eachFile) { return [eachFile.token, "waiting"]; })));
+        setModalError("");
+        setUploadOpen(true);
+        handleUploadFiles(queued);
+    };
+    var handleOpenUpload = function () {
+        setUploadFiles({ data: [], upload: [], remove: [] });
+        setUploadStatus({});
+        setModalError("");
+        setUploadOpen(true);
+    };
+    var handleCloseUpload = function () {
+        setUploadOpen(false);
+        setUploadFiles({ data: [], upload: [], remove: [] });
+        setUploadStatus({});
+        setModalError("");
+    };
+    // INFO: only a drag carrying files, only for someone who may create, and not
+    // while the upload dialog is open — it has its own drop zone
+    var handleIsFileDrag = function (event) {
+        var _a, _b;
+        return canCreate &&
+            !uploadOpen &&
+            Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes("Files");
+    };
+    var handleFormatRowPath = function (row) {
+        var _a;
+        if (!searching)
+            return "";
+        var parentId = String((_a = row === null || row === void 0 ? void 0 : row[driveUtils_1.DRIVE_COLUMNS.parentId]) !== null && _a !== void 0 ? _a : "");
+        var rowPath = (0, driveUtils_1.handleFormatFolderPath)((0, driveUtils_1.handleBuildFolderPath)(folders, parentId));
+        return rowPath ? "In ".concat(rowPath) : "At the top level";
+    };
+    var renderDropOverlay = function () {
+        if (!dragging)
+            return null;
+        var target = path.length ? path[path.length - 1].name : "Drive";
+        return (react_2.default.createElement("div", { "data-testid": "drive-drop-overlay", className: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-y-2 rounded-lg border-2 border-dashed border-primary-400 bg-primary-50/90" },
+            react_2.default.createElement(HeroIcons.ArrowUpTrayIcon, { className: "h-8 w-8 text-primary-500" }),
+            react_2.default.createElement("p", { className: "text-sm font-medium text-primary-700" },
+                "Drop to upload to ",
+                target)));
+    };
+    var renderMenu = function (row) {
+        var items = __spreadArray(__spreadArray([], (canUpdate
+            ? [
+                { text: "Rename", onClick: function () { return handleOpenRename(row); } },
+                {
+                    text: "Move to…",
+                    onClick: function () {
+                        setMoveRow(row);
+                        setModalError("");
+                    },
+                },
+            ]
+            : []), true), (canDelete
+            ? [{ text: "Delete", onClick: function () { return handleOpenDelete(row); } }]
+            : []), true);
+        if (!items.length)
+            return null;
+        return (react_2.default.createElement(DriveItemMenu, { darkMode: dark, testId: "drive-menu-".concat((0, driveUtils_1.handleGetRowId)(row)), items: items }));
+    };
+    var renderIconLabel = function (label) { return (react_2.default.createElement("span", { className: "sr-only" }, label)); };
+    // INFO: the same row DataTemplate draws above a list — title on the left, a
+    // w-64 labelled search and icon actions on the right — so a drive page and a
+    // table page line up
+    var renderHeader = function () { return (react_2.default.createElement("div", { className: "flex py-2 w-full flex-row flex-wrap sm:flex-nowrap items-end justify-between sm:justify-start" },
+        (props.title || props.description) && (react_2.default.createElement("div", { className: "flex flex-col" },
+            props.title && (react_2.default.createElement("div", { className: "flex items-center gap-2" },
+                react_2.default.createElement("p", { className: "text-xl font-medium ".concat(props.darkMode ? "text-white" : "") }, props.title))),
+            props.description && (react_2.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
+        react_2.default.createElement("div", { className: "hidden sm:block grow" }),
+        react_2.default.createElement("div", { className: "ml-auto flex flex-row items-end" },
+            react_2.default.createElement("div", { className: "flex-1 sm:flex-none sm:w-64 min-w-0 mr-3" },
+                react_2.default.createElement(textInput_1.TextInput, { containerClassName: "w-full", label: "Search", placeholder: "Search", id: "drive-search", type: "text", value: searchText, onChange: function (event) { return setSearchText(event.target.value); }, darkMode: props.darkMode, showMagnifyIcon: true })),
+            react_2.default.createElement("div", { className: "flex flex-row items-end gap-x-2" },
+                react_2.default.createElement(iconButton_1.IconButton, { testId: "drive-layout", icon: layout === "grid" ? (react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement(HeroIcons.ListBulletIcon, { className: "h-7 w-7 text-primary-500" }),
+                        renderIconLabel("List view"))) : (react_2.default.createElement(react_2.default.Fragment, null,
+                        react_2.default.createElement(HeroIcons.Squares2X2Icon, { className: "h-7 w-7 text-primary-500" }),
+                        renderIconLabel("Grid view"))), bgColor: props.darkMode ? "bg-white/10" : "bg-white", onClick: function () {
+                        return handleChangeLayout(layout === "grid" ? "list" : "grid");
+                    } }),
+                canCreate && (react_2.default.createElement(react_2.default.Fragment, null,
+                    react_2.default.createElement(iconButton_1.IconButton, { testId: "drive-new-folder", icon: react_2.default.createElement(react_2.default.Fragment, null,
+                            react_2.default.createElement(HeroIcons.FolderPlusIcon, { className: "h-7 w-7 text-primary-500" }),
+                            renderIconLabel("New folder")), bgColor: props.darkMode ? "bg-white/10" : "bg-white", onClick: function () {
+                            setFolderName("");
+                            setModalError("");
+                            setNewFolderOpen(true);
+                        } }),
+                    react_2.default.createElement(iconButton_1.IconButton, { testId: "drive-upload-open", icon: react_2.default.createElement(react_2.default.Fragment, null,
+                            react_2.default.createElement(HeroIcons.ArrowUpTrayIcon, { className: "h-7 w-7 text-white" }),
+                            renderIconLabel("Upload")), background: "bg-primary-500 hover:bg-primary-600", onClick: handleOpenUpload }))))))); };
+    var renderPath = function () {
+        var currentClass = props.darkMode ? "text-white" : "text-gray-900";
+        return (react_2.default.createElement("nav", { "aria-label": "Drive path", className: "flex min-w-0 flex-row flex-wrap items-center gap-x-1 py-2 text-sm" },
+            react_2.default.createElement("button", { type: "button", className: "font-medium ".concat(folderId && !searching
+                    ? "text-primary-600 hover:underline"
+                    : currentClass), onClick: function () {
+                    setSearchText("");
+                    setSearchQuery("");
+                    handleChangeFolder("");
+                } }, "Drive"),
+            !searching &&
+                path.map(function (eachFolder, eachIndex) { return (react_2.default.createElement(react_2.default.Fragment, { key: eachFolder.id },
+                    react_2.default.createElement(HeroIcons.ChevronRightIcon, { className: "h-4 w-4 shrink-0 text-gray-400" }),
+                    react_2.default.createElement("button", { type: "button", className: "truncate font-medium ".concat(eachIndex === path.length - 1
+                            ? currentClass
+                            : "text-primary-600 hover:underline"), onClick: function () { return handleChangeFolder(eachFolder.id); } }, eachFolder.name))); }),
+            searching && (react_2.default.createElement("span", { className: "ml-2 text-gray-500" }, "\u00B7 Search results"))));
+    };
+    var renderFolderIcon = function (sizeClass) { return (react_2.default.createElement(HeroIcons.FolderIcon, { className: "".concat(sizeClass, " shrink-0 text-primary-400") })); };
+    // INFO: folders as compact rows above the file tiles, the way a file browser
+    // lays them out — a folder has no picture, so a tile-sized card for it is
+    // mostly empty space
+    var renderGrid = function () {
+        var folderRows = sortedRows.filter(function (eachRow) {
+            return (0, driveUtils_1.handleIsDriveFolder)(eachRow);
+        });
+        var fileRows = sortedRows.filter(function (eachRow) { return !(0, driveUtils_1.handleIsDriveFolder)(eachRow); });
+        return (react_2.default.createElement("div", { className: "flex flex-col gap-y-4" },
+            folderRows.length > 0 && (react_2.default.createElement("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4" }, folderRows.map(function (eachRow) {
+                var _a;
+                var rowId = (0, driveUtils_1.handleGetRowId)(eachRow);
+                return (react_2.default.createElement("div", { key: rowId, "data-testid": "drive-item-".concat(rowId), className: "flex min-w-0 flex-row items-center gap-x-2 rounded-lg border pr-1 ".concat(surface) },
+                    react_2.default.createElement("button", { type: "button", onClick: function () { return handleOpenRow(eachRow); }, className: "flex min-w-0 grow flex-col items-start py-2 pl-3 text-left" },
+                        react_2.default.createElement("span", { className: "flex w-full min-w-0 flex-row items-center gap-x-2" },
+                            renderFolderIcon("h-5 w-5"),
+                            react_2.default.createElement("span", { className: "truncate text-sm font-medium ".concat(textStrong) }, String((_a = eachRow === null || eachRow === void 0 ? void 0 : eachRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _a !== void 0 ? _a : ""))),
+                        searching && (react_2.default.createElement("span", { className: "w-full truncate pl-7 text-xs text-gray-500" }, handleFormatRowPath(eachRow)))),
+                    renderMenu(eachRow)));
+            }))),
+            fileRows.length > 0 && (react_2.default.createElement("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4" }, fileRows.map(function (eachRow) {
+                var _a;
+                var rowId = (0, driveUtils_1.handleGetRowId)(eachRow);
+                var file = handleResolveFile(eachRow);
+                var menu = renderMenu(eachRow);
+                return (react_2.default.createElement("div", { key: rowId, "data-testid": "drive-item-".concat(rowId), className: "relative min-w-0" },
+                    file ? (react_2.default.createElement(filePreview_1.FilePreview, { variant: "tile", darkMode: dark, file: file, onClick: function () { return handleOpenRow(eachRow); } })) : (react_2.default.createElement("button", { type: "button", onClick: function () { return handleOpenRow(eachRow); }, className: "flex aspect-video w-full flex-col items-center justify-center gap-y-2 rounded-lg border ".concat(surface) },
+                        react_2.default.createElement(HeroIcons.DocumentIcon, { className: "h-8 w-8 text-gray-400" }),
+                        react_2.default.createElement("span", { className: "w-full truncate px-2 text-sm ".concat(textStrong) }, String((_a = eachRow === null || eachRow === void 0 ? void 0 : eachRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _a !== void 0 ? _a : "")))),
+                    searching && (react_2.default.createElement("p", { className: "mt-1 truncate text-xs text-gray-500" }, handleFormatRowPath(eachRow))),
+                    menu && (react_2.default.createElement("div", { className: "absolute right-1 top-1 rounded-md shadow-sm ".concat(dark ? "bg-gray-900/90" : "bg-white/90") }, menu))));
+            })))));
+    };
+    var renderList = function () { return (react_2.default.createElement(newList_1.NewList, { list: sortedRows.map(function (eachRow) {
+            var _a;
+            var isFolder = (0, driveUtils_1.handleIsDriveFolder)(eachRow);
+            var description = [
+                handleFormatRowPath(eachRow),
+                isFolder ? "" : (0, driveUtils_1.handleFormatFileSize)(eachRow === null || eachRow === void 0 ? void 0 : eachRow[driveUtils_1.DRIVE_COLUMNS.size]),
+            ]
+                .filter(function (eachPart) { return !!eachPart; })
+                .join(" · ");
+            var menu = renderMenu(eachRow);
+            return __assign(__assign({ id: (0, driveUtils_1.handleGetRowId)(eachRow), title: String((_a = eachRow === null || eachRow === void 0 ? void 0 : eachRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _a !== void 0 ? _a : ""), icon: isFolder ? (renderFolderIcon("h-6 w-6")) : (react_2.default.createElement(HeroIcons.DocumentIcon, { className: "h-6 w-6 text-gray-400" })) }, (description ? { description: description } : {})), (menu ? { action: menu } : {}));
+        }), hidePagination: true, onClickItem: function (item) {
+            return handleOpenRow(sortedRows.find(function (eachRow) { return (0, driveUtils_1.handleGetRowId)(eachRow) === item.id; }));
+        }, darkMode: props.darkMode })); };
+    var renderContent = function () {
+        if (loading)
+            return (react_2.default.createElement("div", { className: "flex flex-col items-center py-10" },
+                react_2.default.createElement(loading_1.Loading, null)));
+        if (!sortedRows.length)
+            return (react_2.default.createElement(emptyState_1.EmptyState, { darkMode: dark, text: searching ? "Nothing matches the search" : "This folder is empty", icon: renderFolderIcon("h-10 w-10") }));
+        return layout === "grid" ? renderGrid() : renderList();
+    };
+    var renderNameForm = function (value, onChange, onSubmit, submitText, placeholder) { return (
+    // INFO: a form so Enter — and a phone keyboard's Done, which submits rather
+    // than sending a keydown — commits; stopPropagation keeps the submit from
+    // reaching a form this view sits inside
+    react_2.default.createElement("form", { onSubmit: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            onSubmit();
+        }, className: "flex flex-col gap-y-3" },
+        react_2.default.createElement(textInput_1.TextInput, { id: "drive-name", darkMode: dark, type: "text", label: "", placeholder: placeholder, value: value, autoFocus: true, onChange: function (event) { return onChange(event.target.value); } }),
+        modalError && react_2.default.createElement("p", { className: "text-sm text-red-600" }, modalError),
+        react_2.default.createElement("div", { className: "flex flex-row justify-end gap-x-3" },
+            react_2.default.createElement(button_1.Button, { text: "Cancel", type: "light", size: "small", onClick: handleCloseModals }),
+            react_2.default.createElement(button_1.Button, { text: working ? "Saving…" : submitText, type: "normal", size: "small", disable: working, onClick: onSubmit })))); };
+    var renderMoveContent = function () {
+        var _a;
+        if (!moveRow)
+            return null;
+        var rowId = (0, driveUtils_1.handleGetRowId)(moveRow);
+        var currentParent = String((_a = moveRow === null || moveRow === void 0 ? void 0 : moveRow[driveUtils_1.DRIVE_COLUMNS.parentId]) !== null && _a !== void 0 ? _a : "");
+        var targets = (0, driveUtils_1.handleGetMoveTargets)(folders, rowId, (0, driveUtils_1.handleIsDriveFolder)(moveRow))
+            .map(function (eachFolder) { return ({
+            folder: eachFolder,
+            label: (0, driveUtils_1.handleFormatFolderPath)((0, driveUtils_1.handleBuildFolderPath)(folders, eachFolder.id)),
+        }); })
+            .sort(function (a, b) {
+            return a.label.localeCompare(b.label, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            });
+        });
+        var options = __spreadArray([
+            { id: "", label: "Drive (top level)" }
+        ], targets.map(function (eachTarget) { return ({
+            id: eachTarget.folder.id,
+            label: eachTarget.label,
+        }); }), true).filter(function (eachOption) { return eachOption.id !== currentParent; });
+        return (react_2.default.createElement("div", { className: "flex flex-col gap-y-3" },
+            modalError && react_2.default.createElement("p", { className: "text-sm text-red-600" }, modalError),
+            react_2.default.createElement("div", { className: "max-h-80 overflow-y-auto" },
+                react_2.default.createElement(newList_1.NewList, { darkMode: dark, list: options.map(function (eachOption) { return ({
+                        id: eachOption.id || "__root__",
+                        title: eachOption.label,
+                        icon: renderFolderIcon("h-5 w-5"),
+                    }); }), hidePagination: true, onClickItem: function (item) {
+                        return !working && handleMove(item.id === "__root__" ? "" : item.id);
+                    } }))));
+    };
+    var renderDeleteContent = function () {
+        var _a, _b;
+        if (!deleteRow)
+            return null;
+        var isFolder = (0, driveUtils_1.handleIsDriveFolder)(deleteRow);
+        var name = String((_a = deleteRow === null || deleteRow === void 0 ? void 0 : deleteRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _a !== void 0 ? _a : "");
+        var inside = ((_b = deleteIds === null || deleteIds === void 0 ? void 0 : deleteIds.length) !== null && _b !== void 0 ? _b : 1) - 1;
+        return (react_2.default.createElement("div", { className: "flex flex-col gap-y-3" },
+            react_2.default.createElement("p", { className: "text-sm ".concat(textBody) }, !isFolder
+                ? "Delete \"".concat(name, "\"? This cannot be undone.")
+                : deleteIds === null
+                    ? modalError
+                        ? "\"".concat(name, "\" was not deleted.")
+                        : "Counting what is inside…"
+                    : inside > 0
+                        ? "Delete \"".concat(name, "\" and the ").concat(inside, " item(s) inside it? This cannot be undone.")
+                        : "Delete the empty folder \"".concat(name, "\"?")),
+            modalError && react_2.default.createElement("p", { className: "text-sm text-red-600" }, modalError),
+            react_2.default.createElement("div", { className: "flex flex-row justify-end gap-x-3" },
+                react_2.default.createElement(button_1.Button, { text: "Cancel", type: "light", size: "small", onClick: handleCloseModals }),
+                react_2.default.createElement(button_1.Button, { text: working ? "Deleting…" : "Delete", type: "danger", size: "small", disable: working || deleteIds === null, onClick: handleDelete }))));
+    };
+    var renderUploadContent = function () {
+        var _a;
+        var queued = (_a = uploadFiles.upload) !== null && _a !== void 0 ? _a : [];
+        return (react_2.default.createElement("div", { className: "flex flex-col gap-y-3" },
+            react_2.default.createElement(uploadInput_1.UploadInput, { darkMode: dark, lib: props.lib, id: "drive-upload", label: "", type: "multi", files: uploadFiles, disabled: working, onChange: function (_a) {
+                    var value = _a.value, action = _a.action;
+                    if (action === "upload")
+                        setUploadFiles(function (current) {
+                            var _a;
+                            return (__assign(__assign({}, current), { upload: __spreadArray(__spreadArray([], ((_a = current.upload) !== null && _a !== void 0 ? _a : []), true), value, true) }));
+                        });
+                    if (action === "remove")
+                        setUploadFiles(function (current) {
+                            var _a;
+                            return (__assign(__assign({}, current), { upload: ((_a = current.upload) !== null && _a !== void 0 ? _a : []).filter(function (eachFile) { return eachFile.token !== value.token; }) }));
+                        });
+                } }),
+            queued.length > 0 && Object.keys(uploadStatus).length > 0 && (react_2.default.createElement("ul", { className: "flex flex-col gap-y-1 text-sm" }, queued.map(function (eachFile) {
+                var _a, _b;
+                return (react_2.default.createElement("li", { key: eachFile.token, className: "flex flex-row gap-x-2" },
+                    react_2.default.createElement("span", { className: "truncate ".concat(textBody) }, (_b = (_a = eachFile.fileName) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ""),
+                    react_2.default.createElement("span", { className: "grow" }),
+                    react_2.default.createElement("span", { className: uploadStatus[eachFile.token] === "failed"
+                            ? "text-red-600"
+                            : "text-gray-500" }, uploadStatus[eachFile.token] === "done"
+                        ? "Uploaded"
+                        : uploadStatus[eachFile.token] === "uploading"
+                            ? "Uploading…"
+                            : uploadStatus[eachFile.token] === "failed"
+                                ? "Failed"
+                                : "Waiting")));
+            }))),
+            modalError && react_2.default.createElement("p", { className: "text-sm text-red-600" }, modalError),
+            react_2.default.createElement("div", { className: "flex flex-row justify-end gap-x-3" },
+                react_2.default.createElement(button_1.Button, { text: "Close", type: "light", size: "small", disable: working, onClick: handleCloseUpload }),
+                react_2.default.createElement(button_1.Button, { text: working ? "Uploading…" : "Upload ".concat(queued.length || "").trim(), type: "normal", size: "small", disable: working || queued.length === 0, onClick: handleUploadAll }))));
+    };
+    var renderPreviewContent = function () {
+        var _a, _b, _c;
+        var file = previewRow ? handleResolveFile(previewRow) : null;
+        if (!file)
+            return null;
+        var kind = (0, filePreview_1.handleResolveFileKind)(file);
+        var details = [
+            (0, driveUtils_1.handleFormatFileSize)(previewRow === null || previewRow === void 0 ? void 0 : previewRow[driveUtils_1.DRIVE_COLUMNS.size]),
+            (_a = file.mimeType) !== null && _a !== void 0 ? _a : "",
+        ]
+            .filter(function (eachPart) { return !!eachPart; })
+            .join(" · ");
+        return (react_2.default.createElement("div", { className: "flex flex-col gap-y-3" },
+            kind === "image" && (react_2.default.createElement("img", { src: file.fileName, alt: (_b = file.label) !== null && _b !== void 0 ? _b : "", className: "max-h-[70vh] w-full object-contain" })),
+            kind === "pdf" && (react_2.default.createElement("iframe", { title: (_c = file.label) !== null && _c !== void 0 ? _c : "Preview", src: file.fileName, className: "h-[70vh] w-full" })),
+            kind === "video" && (react_2.default.createElement("video", { src: file.fileName, controls: true, className: "max-h-[70vh] w-full" })),
+            kind !== "image" && kind !== "pdf" && kind !== "video" && (react_2.default.createElement("p", { className: "text-sm ".concat(textBody) }, "This file has no preview.")),
+            react_2.default.createElement("div", { className: "flex flex-row items-center justify-end gap-x-3" },
+                details && (react_2.default.createElement("p", { className: "mr-auto text-sm text-gray-500" }, details)),
+                react_2.default.createElement("a", { href: file.fileName, target: "_blank", rel: "noopener noreferrer", className: "rounded-md bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-700" }, "Download"))));
+    };
+    return (react_2.default.createElement("div", { 
+        // INFO: a minimum height so an empty or near-empty folder is still a
+        // drop target worth aiming at
+        className: "relative flex min-h-[240px] flex-col", "data-testid": "drive-view", onDragEnter: function (event) {
+            if (!handleIsFileDrag(event))
+                return;
+            event.preventDefault();
+            dragDepthRef.current += 1;
+            setDragging(true);
+        }, onDragOver: function (event) {
+            if (handleIsFileDrag(event))
+                event.preventDefault();
+        }, onDragLeave: function (event) {
+            if (!handleIsFileDrag(event))
+                return;
+            dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+            if (dragDepthRef.current === 0)
+                setDragging(false);
+        }, onDrop: function (event) {
+            var _a, _b;
+            dragDepthRef.current = 0;
+            setDragging(false);
+            if (!handleIsFileDrag(event) || !((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length))
+                return;
+            event.preventDefault();
+            handleDropFiles(Array.from(event.dataTransfer.files));
+        } },
+        renderHeader(),
+        renderPath(),
+        react_2.default.createElement("div", { className: "mt-2" }, renderContent()),
+        renderDropOverlay(),
+        react_2.default.createElement(modal_1.Modal, { darkMode: dark, open: newFolderOpen, title: "New folder", onClose: handleCloseModals, renderContent: function () {
+                return renderNameForm(folderName, setFolderName, handleCreateFolder, "Create", "Folder name");
+            } }),
+        react_2.default.createElement(modal_1.Modal, { darkMode: dark, open: !!renameRow, title: "Rename", onClose: handleCloseModals, renderContent: function () {
+                return renderNameForm(renameValue, setRenameValue, handleRename, "Save", "Name");
+            } }),
+        react_2.default.createElement(modal_1.Modal, { darkMode: dark, open: !!moveRow, title: "Move \"".concat(String((_f = moveRow === null || moveRow === void 0 ? void 0 : moveRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _f !== void 0 ? _f : ""), "\" to"), onClose: handleCloseModals, renderContent: renderMoveContent }),
+        react_2.default.createElement(modal_1.Modal, { darkMode: dark, open: !!deleteRow, title: "Delete", onClose: handleCloseModals, renderContent: renderDeleteContent }),
+        react_2.default.createElement(modal_1.Modal, { darkMode: dark, open: uploadOpen, title: "Upload files", maxWidth: "2xl", 
+            // INFO: no closing mid-upload — the rows still being written belong to
+            // the folder the upload started in
+            onClose: working ? undefined : handleCloseUpload, renderContent: renderUploadContent }),
+        react_2.default.createElement(modal_1.Modal, { darkMode: dark, open: !!previewRow, title: String((_g = previewRow === null || previewRow === void 0 ? void 0 : previewRow[driveUtils_1.DRIVE_COLUMNS.name]) !== null && _g !== void 0 ? _g : ""), maxWidth: "4xl", onClose: function () { return setPreviewRow(null); }, renderContent: renderPreviewContent })));
+};
+exports.DriveTemplate = DriveTemplate;
+/**
+ * The per-item action menu.
+ *
+ * INFO: portalled — the list layout sits in NewList's rounded card, which clips
+ * overflow, so an in-place panel was cut off at the row's edge. Button's own
+ * popUpMenuItems has no portal and a full-size trigger, hence a small one here.
+ */
+var DriveItemMenu = function (props) {
+    var popUpRef = (0, react_2.useRef)(null);
+    return (react_2.default.createElement("div", { "data-testid": props.testId, onClick: function (event) { return event.stopPropagation(); } },
+        react_2.default.createElement(popUp_1.PopUp, { ref: popUpRef, portal: true, anchor: "right", direction: "bottom", lib: { Transition: react_1.Transition }, ctaComp: react_2.default.createElement("button", { type: "button", "aria-label": "Actions", className: "rounded-md p-1.5 ".concat(props.darkMode
+                    ? "text-gray-300 hover:bg-white/10 hover:text-white"
+                    : "text-gray-500 hover:bg-gray-100 hover:text-gray-700") },
+                react_2.default.createElement(HeroIcons.EllipsisVerticalIcon, { className: "h-4 w-4" })), renderComp: react_2.default.createElement("div", { className: "flex min-w-[140px] flex-col divide-y overflow-hidden rounded-md shadow-md ".concat(props.darkMode ? "divide-white/10 bg-gray-900" : "bg-white") }, props.items.map(function (eachItem) { return (react_2.default.createElement("button", { key: eachItem.text, type: "button", className: "px-4 py-2 text-left text-sm ".concat(props.darkMode ? "hover:bg-white/10" : "hover:bg-gray-100", " ").concat(eachItem.text === "Delete"
+                    ? "text-red-600"
+                    : props.darkMode
+                        ? "text-white"
+                        : "text-gray-900"), onClick: function () {
+                    var _a;
+                    (_a = popUpRef.current) === null || _a === void 0 ? void 0 : _a.handleOnClose();
+                    eachItem.onClick();
+                } }, eachItem.text)); })) })));
+};
+//# sourceMappingURL=index.js.map