blixify-ui-web 1.2.112 → 1.2.113

package/lib/components/data/{dataTemplate/driveView.js → driveTemplate/index.js}

@@ -33,6 +33,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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) {
@@ -79,13 +82,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DriveView = void 0;
+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 popUp_1 = require("../../advanced/popUp");
 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");
@@ -94,20 +98,32 @@ 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");
-var LAYOUT_STORAGE_PREFIX = "blixify-dtw-drive-layout-";
+__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 folder browser over a collection whose rows are files and folders.
+ * A Google Drive-style folder browser over a collection whose rows are files
+ * and folders.
  *
- * INFO: the rows of the open folder arrive from DataTemplate's own list query,
- * so pagination, tab filters and permission filters behave as on any other
- * view. This component adds the folder tree it needs for the breadcrumb, the
- * move picker and search paths, and performs the drive's own writes.
+ * 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 DriveView = function (props) {
-    var _a, _b, _c;
-    var _d = (0, react_2.useState)(new Map()), folders = _d[0], setFolders = _d[1];
-    var _e = (0, react_2.useState)(function () {
+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")
@@ -118,65 +134,191 @@ var DriveView = function (props) {
         return typeof window !== "undefined" && window.innerWidth < 640
             ? "list"
             : "grid";
-    }), layout = _e[0], setLayout = _e[1];
-    var _f = (0, react_2.useState)(false), newFolderOpen = _f[0], setNewFolderOpen = _f[1];
-    var _g = (0, react_2.useState)(""), folderName = _g[0], setFolderName = _g[1];
-    var _h = (0, react_2.useState)(null), renameRow = _h[0], setRenameRow = _h[1];
-    var _j = (0, react_2.useState)(""), renameValue = _j[0], setRenameValue = _j[1];
-    var _k = (0, react_2.useState)(null), moveRow = _k[0], setMoveRow = _k[1];
-    var _l = (0, react_2.useState)(null), deleteRow = _l[0], setDeleteRow = _l[1];
-    var _m = (0, react_2.useState)(null), deleteIds = _m[0], setDeleteIds = _m[1];
-    var _o = (0, react_2.useState)(null), previewRow = _o[0], setPreviewRow = _o[1];
-    var _p = (0, react_2.useState)(false), uploadOpen = _p[0], setUploadOpen = _p[1];
-    var _q = (0, react_2.useState)({
+    }), 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 = _q[0], setUploadFiles = _q[1];
-    var _r = (0, react_2.useState)({}), uploadStatus = _r[0], setUploadStatus = _r[1];
-    var _s = (0, react_2.useState)(false), working = _s[0], setWorking = _s[1];
-    var _t = (0, react_2.useState)(false), dragging = _t[0], setDragging = _t[1];
-    var _u = (0, react_2.useState)(""), modalError = _u[0], setModalError = _u[1];
+    }), 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);
-    var settings = props.settings;
-    var fileColumn = props.structure.find(function (eachColumn) { return eachColumn.id === settings.fileColumnId; });
-    // INFO: the same folder a file column's uploads use everywhere else, so a
-    // row deleted from another view removes the same storage folder
-    var storageCollection = (_a = fileColumn === null || fileColumn === void 0 ? void 0 : fileColumn.imageCollectionName) !== null && _a !== void 0 ? _a : props.collectionId;
-    var sortedRows = (0, driveUtils_1.handleSortDriveRows)(props.rows, settings);
-    var path = (0, driveUtils_1.handleBuildFolderPath)(folders, props.folderId);
+    // 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, JSON.stringify(props.baseQuery)]);
-    var handleLoadFolders = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var res, err_1;
+    }, [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:
-                    _b.trys.push([0, 2, , 3]);
-                    return [4 /*yield*/, props.readQuery.call({
+                    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([], props.baseQuery, true), [
-                                { type: "=", queryId: settings.kindColumnId, value: driveUtils_1.DRIVE_FOLDER },
+                            query: __spreadArray(__spreadArray([], view.additionalQuery, true), [
+                                view.searchQuery
+                                    ? (0, driveUtils_1.handleBuildDriveSearchQuery)(view.searchQuery)
+                                    : (0, driveUtils_1.handleBuildDriveFolderQuery)(view.folderId),
                             ], false),
                             stopLimit: true,
                         })];
-                case 1:
-                    res = _b.sent();
-                    setFolders((0, driveUtils_1.handleMapDriveFolders)((_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : [], settings));
-                    return [3 /*break*/, 3];
                 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();
-                    return [3 /*break*/, 3];
-                case 3: return [2 /*return*/];
+                    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 {
@@ -187,39 +329,49 @@ var DriveView = function (props) {
     var handleAfterWrite = function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0:
-                    props.handleRefresh();
-                    return [4 /*yield*/, handleLoadFolders()];
+                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, _b;
-        var value = row === null || row === void 0 ? void 0 : row[settings.fileColumnId];
+        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)(props.imageEndpoint, storageCollection, (0, driveUtils_1.handleGetRowId)(row), entry.fileName, entry.token, props.bucketName),
-            label: String((_a = row === null || row === void 0 ? void 0 : row[settings.nameColumnId]) !== null && _a !== void 0 ? _a : "") || undefined,
+            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: (_b = entry.mimeType) !== null && _b !== void 0 ? _b : (0, filePreview_1.handleGuessMimeType)(entry.fileName),
+            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) {
-        var _a;
-        if ((0, driveUtils_1.handleIsDriveFolder)(row, settings)) {
-            if (props.searching)
-                (_a = props.handleClearSearch) === null || _a === void 0 ? void 0 : _a.call(props);
-            props.handleChangeFolder((0, driveUtils_1.handleGetRowId)(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);
@@ -230,27 +382,25 @@ var DriveView = function (props) {
         setModalError("");
     };
     var handleCreateFolder = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var name, err_2;
+        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, props.folderId, name))
+                    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*/, props.writeQuery.call("create", {
-                            data: (_a = {},
-                                _a[props.serverId] = (0, uuid_1.v4)(),
-                                _a[settings.nameColumnId] = name,
-                                _a[settings.kindColumnId] = driveUtils_1.DRIVE_FOLDER,
-                                _a[settings.parentColumnId] = props.folderId,
-                                _a),
+                    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();
@@ -260,7 +410,7 @@ var DriveView = function (props) {
                     _b.sent();
                     return [3 /*break*/, 5];
                 case 4:
-                    err_2 = _b.sent();
+                    err_3 = _b.sent();
                     setModalError("The folder could not be created.");
                     return [3 /*break*/, 5];
                 case 5:
@@ -272,30 +422,32 @@ var DriveView = function (props) {
     var handleOpenRename = function (row) {
         var _a;
         setRenameRow(row);
-        setRenameValue(String((_a = row === null || row === void 0 ? void 0 : row[settings.nameColumnId]) !== null && _a !== void 0 ? _a : ""));
+        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_3;
+        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, settings) &&
-                        (0, driveUtils_1.handleIsDuplicateFolderName)(folders, String((_b = renameRow === null || renameRow === void 0 ? void 0 : renameRow[settings.parentColumnId]) !== null && _b !== void 0 ? _b : ""), name, rowId))
+                    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*/, props.writeQuery.call("update", {
+                    return [4 /*yield*/, writeQuery.call("update", {
                             id: rowId,
-                            data: (_a = {}, _a[settings.nameColumnId] = name, _a),
+                            data: (_a = {}, _a[driveUtils_1.DRIVE_COLUMNS.name] = name, _a),
                         })];
                 case 2:
                     _c.sent();
@@ -305,7 +457,7 @@ var DriveView = function (props) {
                     _c.sent();
                     return [3 /*break*/, 5];
                 case 4:
-                    err_3 = _c.sent();
+                    err_4 = _c.sent();
                     setModalError("The name could not be saved.");
                     return [3 /*break*/, 5];
                 case 5:
@@ -315,23 +467,25 @@ var DriveView = function (props) {
         });
     }); };
     var handleMove = function (targetFolderId) { return __awaiter(void 0, void 0, void 0, function () {
-        var rowId, err_4;
+        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, settings) &&
-                        (0, driveUtils_1.handleIsDuplicateFolderName)(folders, targetFolderId, String((_b = moveRow === null || moveRow === void 0 ? void 0 : moveRow[settings.nameColumnId]) !== null && _b !== void 0 ? _b : ""), rowId))
+                    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*/, props.writeQuery.call("update", {
+                    return [4 /*yield*/, writeQuery.call("update", {
                             id: rowId,
-                            data: (_a = {}, _a[settings.parentColumnId] = targetFolderId, _a),
+                            data: (_a = {}, _a[driveUtils_1.DRIVE_COLUMNS.parentId] = targetFolderId, _a),
                         })];
                 case 2:
                     _c.sent();
@@ -341,7 +495,7 @@ var DriveView = function (props) {
                     _c.sent();
                     return [3 /*break*/, 5];
                 case 4:
-                    err_4 = _c.sent();
+                    err_5 = _c.sent();
                     setModalError("The item could not be moved.");
                     return [3 /*break*/, 5];
                 case 5:
@@ -351,49 +505,128 @@ var DriveView = function (props) {
         });
     }); };
     /**
-     * INFO: a folder's contents are counted before anything is deleted, so the
-     * confirmation says what will go. Read from the whole collection, not the
-     * filtered list — a file hidden from this view would otherwise be left
-     * pointing at a folder that no longer exists.
+     * 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 handleOpenDelete = function (row) { return __awaiter(void 0, void 0, void 0, function () {
-        var res, rowId, err_5;
+    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, settings)) {
+                    if (!(0, driveUtils_1.handleIsDriveFolder)(row)) {
                         setDeleteIds([(0, driveUtils_1.handleGetRowId)(row)]);
                         return [2 /*return*/];
                     }
                     setDeleteIds(null);
-                    _b.label = 1;
+                    rowId = (0, driveUtils_1.handleGetRowId)(row);
+                    visibleIds = [];
+                    _a.label = 1;
                 case 1:
-                    _b.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, props.readQuery.call({
-                            type: "list",
-                            query: [],
-                            stopLimit: true,
-                        })];
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, handleReadSubtreeIds(rowId, additionalQuery)];
                 case 2:
-                    res = _b.sent();
-                    rowId = (0, driveUtils_1.handleGetRowId)(row);
-                    setDeleteIds(__spreadArray([
-                        rowId
-                    ], (0, driveUtils_1.handleCollectDescendantIds)((_a = res === null || res === void 0 ? void 0 : res.data) !== null && _a !== void 0 ? _a : [], settings, rowId), true));
+                    visibleIds = _a.sent();
                     return [3 /*break*/, 4];
                 case 3:
-                    err_5 = _b.sent();
-                    setModalError("The folder's contents could not be read.");
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                    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_6;
+        var form, err_8;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -403,19 +636,19 @@ var DriveView = function (props) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 5, , 6]);
-                    return [4 /*yield*/, props.writeQuery.call("batchDelete", { id: deleteIds })];
+                    return [4 /*yield*/, writeQuery.call("batchDelete", { id: deleteIds })];
                 case 2:
                     _a.sent();
                     form = new FormData();
-                    form.append("data[assetCollectionName]", storageCollection);
+                    form.append("data[assetCollectionName]", props.collectionId);
                     form.append("data[assetParentId]", JSON.stringify(deleteIds));
-                    if (props.bucketName)
-                        form.append("data[bucketName]", props.bucketName);
+                    if (devSettings.bucketName)
+                        form.append("data[bucketName]", devSettings.bucketName);
                     return [4 /*yield*/, props.lib
                             .axios({
                             data: form,
                             method: "post",
-                            url: "".concat(props.uploadEndpoint, "/batchDeleteDirectory"),
+                            url: "".concat(uploadEndpoint, "/batchDeleteDirectory"),
                             headers: { "Content-Type": "multipart/form-data" },
                         })
                             .catch(function () { })];
@@ -427,7 +660,7 @@ var DriveView = function (props) {
                     _a.sent();
                     return [3 /*break*/, 6];
                 case 5:
-                    err_6 = _a.sent();
+                    err_8 = _a.sent();
                     setModalError("The item could not be deleted.");
                     return [3 /*break*/, 6];
                 case 6:
@@ -436,60 +669,79 @@ var DriveView = function (props) {
             }
         });
     }); };
+    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_1, _i, queued_1, eachFile;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        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_1 = function (eachFile) {
-                        var file, rowId, storedName, res, token, err_7;
-                        var _c, _d, _e;
-                        return __generator(this, function (_f) {
-                            switch (_f.label) {
+                    _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)));
                                     });
-                                    _f.label = 1;
+                                    _c.label = 1;
                                 case 1:
-                                    _f.trys.push([1, 4, , 5]);
+                                    _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*/, props.handleUpload(props.uploadEndpoint, rowId, storageCollection, storedName, file, props.bucketName)];
+                                    return [4 /*yield*/, handleUploadToStorage(rowId, storedName, file)];
                                 case 2:
-                                    res = _f.sent();
-                                    token = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data;
+                                    token = _c.sent();
                                     if (!token)
                                         throw new Error("No token returned");
-                                    return [4 /*yield*/, props.writeQuery.call("create", {
-                                            data: __assign(__assign((_c = {}, _c[props.serverId] = rowId, _c[settings.nameColumnId] = file.name, _c[settings.kindColumnId] = driveUtils_1.DRIVE_FILE, _c[settings.parentColumnId] = props.folderId, _c[settings.fileColumnId] = [
-                                                { token: token, fileName: storedName, mimeType: file.type || undefined },
-                                            ], _c), (settings.sizeColumnId
-                                                ? (_d = {}, _d[settings.sizeColumnId] = file.size, _d) : {})), (settings.mimeTypeColumnId
-                                                ? (_e = {}, _e[settings.mimeTypeColumnId] = file.type, _e) : {})),
+                                    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:
-                                    _f.sent();
+                                    _c.sent();
                                     setUploadStatus(function (current) {
                                         var _a;
                                         return (__assign(__assign({}, current), (_a = {}, _a[eachFile.token] = "done", _a)));
                                     });
                                     return [3 /*break*/, 5];
                                 case 4:
-                                    err_7 = _f.sent();
+                                    err_9 = _c.sent();
                                     failed += 1;
                                     setUploadStatus(function (current) {
                                         var _a;
@@ -501,20 +753,20 @@ var DriveView = function (props) {
                         });
                     };
                     _i = 0, queued_1 = queued;
-                    _b.label = 1;
+                    _a.label = 1;
                 case 1:
                     if (!(_i < queued_1.length)) return [3 /*break*/, 4];
                     eachFile = queued_1[_i];
-                    return [5 /*yield**/, _loop_1(eachFile)];
+                    return [5 /*yield**/, _loop_2(eachFile)];
                 case 2:
-                    _b.sent();
-                    _b.label = 3;
+                    _a.sent();
+                    _a.label = 3;
                 case 3:
                     _i++;
                     return [3 /*break*/, 1];
                 case 4:
                     setWorking(false);
-                    props.handleRefresh();
+                    handleFetchRows();
                     if (failed === 0)
                         handleCloseUpload();
                     else
@@ -564,10 +816,18 @@ var DriveView = function (props) {
     // while the upload dialog is open — it has its own drop zone
     var handleIsFileDrag = function (event) {
         var _a, _b;
-        return props.canCreate &&
+        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;
@@ -578,12 +838,8 @@ var DriveView = function (props) {
                 "Drop to upload to ",
                 target)));
     };
-    var renderMenu = function (row) { return (react_2.default.createElement(DriveItemMenu, { testId: "drive-menu-".concat((0, driveUtils_1.handleGetRowId)(row)), items: __spreadArray(__spreadArray([
-            {
-                text: "Details",
-                onClick: function () { return props.handleOpenDetails((0, driveUtils_1.handleGetRowId)(row)); },
-            }
-        ], (props.canUpdate
+    var renderMenu = function (row) {
+        var items = __spreadArray(__spreadArray([], (canUpdate
             ? [
                 { text: "Rename", onClick: function () { return handleOpenRename(row); } },
                 {
@@ -594,102 +850,117 @@ var DriveView = function (props) {
                     },
                 },
             ]
-            : []), true), (props.canDelete
+            : []), true), (canDelete
             ? [{ text: "Delete", onClick: function () { return handleOpenDelete(row); } }]
-            : []), true) })); };
-    var renderRowPath = function (row) {
-        var _a;
-        if (!props.searching)
-            return "";
-        var parentId = String((_a = row === null || row === void 0 ? void 0 : row[settings.parentColumnId]) !== 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";
+            : []), 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 renderToolbar = function () { return (react_2.default.createElement("div", { className: "flex flex-col gap-y-3 sm:flex-row sm:items-center sm:gap-x-3" },
-        react_2.default.createElement("nav", { "aria-label": "Drive path", className: "flex min-w-0 flex-row flex-wrap items-center gap-x-1 text-sm" },
-            react_2.default.createElement("button", { type: "button", className: "font-medium ".concat(props.folderId ? "text-primary-600 hover:underline" : "text-gray-900"), onClick: function () { return props.handleChangeFolder(""); } }, "Drive"),
-            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
-                        ? "text-gray-900"
-                        : "text-primary-600 hover:underline"), onClick: function () { return props.handleChangeFolder(eachFolder.id); } }, eachFolder.name))); }),
-            props.searching && (react_2.default.createElement("span", { className: "ml-2 text-gray-500" }, "\u00B7 Search results"))),
-        react_2.default.createElement("div", { className: "grow" }),
-        react_2.default.createElement("div", { className: "flex flex-row flex-wrap items-center gap-2" },
-            react_2.default.createElement("div", { className: "flex flex-row overflow-hidden rounded-md border border-gray-200" }, ["grid", "list"].map(function (eachLayout) {
-                var Icon = eachLayout === "grid"
-                    ? HeroIcons.Squares2X2Icon
-                    : HeroIcons.ListBulletIcon;
-                return (react_2.default.createElement("button", { key: eachLayout, type: "button", "aria-label": eachLayout === "grid" ? "Grid view" : "List view", "aria-pressed": layout === eachLayout, className: "p-1.5 ".concat(layout === eachLayout
-                        ? "bg-primary-50 text-primary-600"
-                        : "bg-white text-gray-500 hover:bg-gray-50"), onClick: function () { return handleChangeLayout(eachLayout); } },
-                    react_2.default.createElement(Icon, { className: "h-4 w-4" })));
-            })),
-            props.canCreate && (react_2.default.createElement(react_2.default.Fragment, null,
-                react_2.default.createElement(button_1.Button, { text: "New folder", type: "light", size: "extraSmall", className: "whitespace-nowrap sm:!px-3", icon: react_2.default.createElement(HeroIcons.FolderPlusIcon, { className: "mr-1 h-4 w-4" }), onClick: function () {
-                        setFolderName("");
-                        setModalError("");
-                        setNewFolderOpen(true);
+    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");
                     } }),
-                react_2.default.createElement(button_1.Button, { text: "Upload", type: "normal", size: "extraSmall", className: "whitespace-nowrap sm:!px-3", icon: react_2.default.createElement(HeroIcons.ArrowUpTrayIcon, { className: "mr-1 h-4 w-4" }), onClick: handleOpenUpload })))))); };
+                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, settings);
+            return (0, driveUtils_1.handleIsDriveFolder)(eachRow);
         });
-        var fileRows = sortedRows.filter(function (eachRow) { return !(0, driveUtils_1.handleIsDriveFolder)(eachRow, settings); });
+        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 border-gray-200 bg-white pr-1 hover:bg-gray-50" },
+                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 text-gray-900" }, String((_a = eachRow === null || eachRow === void 0 ? void 0 : eachRow[settings.nameColumnId]) !== null && _a !== void 0 ? _a : ""))),
-                        props.searching && (react_2.default.createElement("span", { className: "w-full truncate pl-7 text-xs text-gray-500" }, renderRowPath(eachRow)))),
+                            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", 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 border-gray-200" },
+                    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 text-gray-900" }, String((_a = eachRow === null || eachRow === void 0 ? void 0 : eachRow[settings.nameColumnId]) !== null && _a !== void 0 ? _a : "")))),
-                    props.searching && (react_2.default.createElement("p", { className: "mt-1 truncate text-xs text-gray-500" }, renderRowPath(eachRow))),
-                    react_2.default.createElement("div", { className: "absolute right-1 top-1 rounded-md bg-white/90 shadow-sm" }, renderMenu(eachRow))));
+                        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, settings);
-            var rowPath = renderRowPath(eachRow);
-            var size = !isFolder && settings.sizeColumnId
-                ? eachRow === null || eachRow === void 0 ? void 0 : eachRow[settings.sizeColumnId]
-                : undefined;
+            var isFolder = (0, driveUtils_1.handleIsDriveFolder)(eachRow);
             var description = [
-                rowPath,
-                typeof size === "number" ? "".concat(Math.max(1, Math.round(size / 1024)), " KB") : "",
+                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(" · ");
-            return __assign(__assign({ id: (0, driveUtils_1.handleGetRowId)(eachRow), title: String((_a = eachRow === null || eachRow === void 0 ? void 0 : eachRow[settings.nameColumnId]) !== 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 } : {})), { action: renderMenu(eachRow) });
+            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 (props.loading)
+        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, { text: props.searching ? "Nothing matches the search" : "This folder is empty", icon: renderFolderIcon("h-10 w-10") }));
+            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 (
@@ -701,7 +972,7 @@ var DriveView = function (props) {
             event.stopPropagation();
             onSubmit();
         }, className: "flex flex-col gap-y-3" },
-        react_2.default.createElement(textInput_1.TextInput, { id: "drive-name", type: "text", label: "", placeholder: placeholder, value: value, autoFocus: true, onChange: function (event) { return onChange(event.target.value); } }),
+        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 }),
@@ -711,14 +982,17 @@ var DriveView = function (props) {
         if (!moveRow)
             return null;
         var rowId = (0, driveUtils_1.handleGetRowId)(moveRow);
-        var currentParent = String((_a = moveRow === null || moveRow === void 0 ? void 0 : moveRow[settings.parentColumnId]) !== null && _a !== void 0 ? _a : "");
-        var targets = (0, driveUtils_1.handleGetMoveTargets)(folders, rowId, (0, driveUtils_1.handleIsDriveFolder)(moveRow, settings))
+        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" });
+            return a.label.localeCompare(b.label, undefined, {
+                numeric: true,
+                sensitivity: "base",
+            });
         });
         var options = __spreadArray([
             { id: "", label: "Drive (top level)" }
@@ -729,7 +1003,7 @@ var DriveView = function (props) {
         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, { list: options.map(function (eachOption) { return ({
+                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"),
@@ -741,14 +1015,16 @@ var DriveView = function (props) {
         var _a, _b;
         if (!deleteRow)
             return null;
-        var isFolder = (0, driveUtils_1.handleIsDriveFolder)(deleteRow, settings);
-        var name = String((_a = deleteRow === null || deleteRow === void 0 ? void 0 : deleteRow[settings.nameColumnId]) !== null && _a !== void 0 ? _a : "");
+        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 text-gray-700" }, !isFolder
+            react_2.default.createElement("p", { className: "text-sm ".concat(textBody) }, !isFolder
                 ? "Delete \"".concat(name, "\"? This cannot be undone.")
                 : deleteIds === null
-                    ? "Counting what is inside…"
+                    ? 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, "\"?")),
@@ -761,7 +1037,7 @@ var DriveView = function (props) {
         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, { lib: props.lib, id: "drive-upload", label: "", type: "multi", files: uploadFiles, disabled: working, onChange: function (_a) {
+            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) {
@@ -777,7 +1053,7 @@ var DriveView = function (props) {
             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 text-gray-700" }, (_b = (_a = eachFile.fileName) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : ""),
+                    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"
@@ -791,34 +1067,34 @@ var DriveView = function (props) {
             }))),
             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", onClick: handleCloseUpload }),
+                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;
+        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" && (
-            // eslint-disable-next-line jsx-a11y/img-redundant-alt
-            react_2.default.createElement("img", { src: file.fileName, alt: (_a = file.label) !== null && _a !== void 0 ? _a : "", className: "max-h-[70vh] w-full object-contain" })),
-            kind === "pdf" && (react_2.default.createElement("iframe", { title: (_b = file.label) !== null && _b !== void 0 ? _b : "Preview", src: file.fileName, className: "h-[70vh] w-full" })),
+            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 text-gray-600" }, "This file has no preview.")),
-            react_2.default.createElement("div", { className: "flex flex-row justify-end gap-x-3" },
-                react_2.default.createElement(button_1.Button, { text: "Details", type: "light", size: "small", onClick: function () {
-                        var rowId = (0, driveUtils_1.handleGetRowId)(previewRow);
-                        setPreviewRow(null);
-                        props.handleOpenDetails(rowId);
-                    } }),
+            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 mt-4 flex min-h-[240px] flex-col gap-y-4 rounded-lg p-4 ".concat(props.darkMode ? "bg-white/5" : "bg-white"), "data-testid": "drive-view", onDragEnter: function (event) {
+        className: "relative flex min-h-[240px] flex-col", "data-testid": "drive-view", onDragEnter: function (event) {
             if (!handleIsFileDrag(event))
                 return;
             event.preventDefault();
@@ -842,21 +1118,25 @@ var DriveView = function (props) {
             event.preventDefault();
             handleDropFiles(Array.from(event.dataTransfer.files));
         } },
-        renderToolbar(),
-        renderContent(),
+        renderHeader(),
+        renderPath(),
+        react_2.default.createElement("div", { className: "mt-2" }, renderContent()),
         renderDropOverlay(),
-        react_2.default.createElement(modal_1.Modal, { open: newFolderOpen, title: "New folder", onClose: handleCloseModals, renderContent: function () {
+        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, { open: !!renameRow, title: "Rename", onClose: handleCloseModals, renderContent: function () {
+        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, { open: !!moveRow, title: "Move \"".concat(String((_b = moveRow === null || moveRow === void 0 ? void 0 : moveRow[settings.nameColumnId]) !== null && _b !== void 0 ? _b : ""), "\" to"), onClose: handleCloseModals, renderContent: renderMoveContent }),
-        react_2.default.createElement(modal_1.Modal, { open: !!deleteRow, title: "Delete", onClose: handleCloseModals, renderContent: renderDeleteContent }),
-        react_2.default.createElement(modal_1.Modal, { open: uploadOpen, title: "Upload files", maxWidth: "2xl", onClose: handleCloseUpload, renderContent: renderUploadContent }),
-        react_2.default.createElement(modal_1.Modal, { open: !!previewRow, title: String((_c = previewRow === null || previewRow === void 0 ? void 0 : previewRow[settings.nameColumnId]) !== null && _c !== void 0 ? _c : ""), maxWidth: "4xl", onClose: function () { return setPreviewRow(null); }, renderContent: renderPreviewContent })));
+        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.DriveView = DriveView;
+exports.DriveTemplate = DriveTemplate;
 /**
  * The per-item action menu.
  *
@@ -867,11 +1147,17 @@ exports.DriveView = DriveView;
 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 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 bg-white shadow-md" }, 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 hover:bg-gray-100 ".concat(eachItem.text === "Delete" ? "text-red-600" : "text-gray-900"), onClick: function () {
+        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=driveView.js.map
+//# sourceMappingURL=index.js.map