blixify-ui-web 1.2.111 → 1.2.112

package/lib/components/data/dataTemplate/driveView.js

@@ -0,0 +1,877 @@
+"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 __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.DriveView = 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 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 driveUtils_1 = require("./driveUtils");
+var LAYOUT_STORAGE_PREFIX = "blixify-dtw-drive-layout-";
+/**
+ * A 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.
+ */
+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 () {
+        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 = _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)({
+        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];
+    // 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);
+    (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;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, props.readQuery.call({
+                            type: "list",
+                            query: __spreadArray(__spreadArray([], props.baseQuery, true), [
+                                { type: "=", queryId: settings.kindColumnId, value: driveUtils_1.DRIVE_FOLDER },
+                            ], 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:
+                    err_1 = _b.sent();
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    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:
+                    props.handleRefresh();
+                    return [4 /*yield*/, handleLoadFolders()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleResolveFile = function (row) {
+        var _a, _b;
+        var value = row === null || row === void 0 ? void 0 : row[settings.fileColumnId];
+        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,
+            token: entry.token,
+            mimeType: (_b = entry.mimeType) !== null && _b !== void 0 ? _b : (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));
+        }
+        else
+            setPreviewRow(row);
+    };
+    var handleCloseModals = function () {
+        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_2;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    name = folderName.trim();
+                    if (!name)
+                        return [2 /*return*/, setModalError("Name the folder.")];
+                    if ((0, driveUtils_1.handleIsDuplicateFolderName)(folders, props.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),
+                        })];
+                case 2:
+                    _b.sent();
+                    handleCloseModals();
+                    return [4 /*yield*/, handleAfterWrite()];
+                case 3:
+                    _b.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_2 = _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[settings.nameColumnId]) !== null && _a !== void 0 ? _a : ""));
+        setModalError("");
+    };
+    var handleRename = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var name, rowId, err_3;
+        var _a;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    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))
+                        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", {
+                            id: rowId,
+                            data: (_a = {}, _a[settings.nameColumnId] = name, _a),
+                        })];
+                case 2:
+                    _c.sent();
+                    handleCloseModals();
+                    return [4 /*yield*/, handleAfterWrite()];
+                case 3:
+                    _c.sent();
+                    return [3 /*break*/, 5];
+                case 4:
+                    err_3 = _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_4;
+        var _a;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    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))
+                        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", {
+                            id: rowId,
+                            data: (_a = {}, _a[settings.parentColumnId] = targetFolderId, _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 item could not be moved.");
+                    return [3 /*break*/, 5];
+                case 5:
+                    setWorking(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * 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.
+     */
+    var handleOpenDelete = function (row) { return __awaiter(void 0, void 0, void 0, function () {
+        var res, rowId, err_5;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    setDeleteRow(row);
+                    setModalError("");
+                    if (!(0, driveUtils_1.handleIsDriveFolder)(row, settings)) {
+                        setDeleteIds([(0, driveUtils_1.handleGetRowId)(row)]);
+                        return [2 /*return*/];
+                    }
+                    setDeleteIds(null);
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, props.readQuery.call({
+                            type: "list",
+                            query: [],
+                            stopLimit: true,
+                        })];
+                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));
+                    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*/];
+            }
+        });
+    }); };
+    var handleDelete = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var form, err_6;
+        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*/, props.writeQuery.call("batchDelete", { id: deleteIds })];
+                case 2:
+                    _a.sent();
+                    form = new FormData();
+                    form.append("data[assetCollectionName]", storageCollection);
+                    form.append("data[assetParentId]", JSON.stringify(deleteIds));
+                    if (props.bucketName)
+                        form.append("data[bucketName]", props.bucketName);
+                    return [4 /*yield*/, props.lib
+                            .axios({
+                            data: form,
+                            method: "post",
+                            url: "".concat(props.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_6 = _a.sent();
+                    setModalError("The item could not be deleted.");
+                    return [3 /*break*/, 6];
+                case 6:
+                    setWorking(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    /**
+     * 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) {
+                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) {
+                                case 0:
+                                    setUploadStatus(function (current) {
+                                        var _a;
+                                        return (__assign(__assign({}, current), (_a = {}, _a[eachFile.token] = "uploading", _a)));
+                                    });
+                                    _f.label = 1;
+                                case 1:
+                                    _f.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)];
+                                case 2:
+                                    res = _f.sent();
+                                    token = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data;
+                                    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) : {})),
+                                        })];
+                                case 3:
+                                    _f.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();
+                                    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;
+                    _b.label = 1;
+                case 1:
+                    if (!(_i < queued_1.length)) return [3 /*break*/, 4];
+                    eachFile = queued_1[_i];
+                    return [5 /*yield**/, _loop_1(eachFile)];
+                case 2:
+                    _b.sent();
+                    _b.label = 3;
+                case 3:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 4:
+                    setWorking(false);
+                    props.handleRefresh();
+                    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 props.canCreate &&
+            !uploadOpen &&
+            Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes("Files");
+    };
+    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) { 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
+            ? [
+                { text: "Rename", onClick: function () { return handleOpenRename(row); } },
+                {
+                    text: "Move to…",
+                    onClick: function () {
+                        setMoveRow(row);
+                        setModalError("");
+                    },
+                },
+            ]
+            : []), true), (props.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";
+    };
+    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);
+                    } }),
+                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 })))))); };
+    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);
+        });
+        var fileRows = sortedRows.filter(function (eachRow) { return !(0, driveUtils_1.handleIsDriveFolder)(eachRow, settings); });
+        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" },
+                    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)))),
+                    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);
+                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" },
+                        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))));
+            })))));
+    };
+    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 description = [
+                rowPath,
+                typeof size === "number" ? "".concat(Math.max(1, Math.round(size / 1024)), " KB") : "",
+            ]
+                .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) });
+        }), 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)
+            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 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", 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[settings.parentColumnId]) !== null && _a !== void 0 ? _a : "");
+        var targets = (0, driveUtils_1.handleGetMoveTargets)(folders, rowId, (0, driveUtils_1.handleIsDriveFolder)(moveRow, settings))
+            .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, { 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, settings);
+        var name = String((_a = deleteRow === null || deleteRow === void 0 ? void 0 : deleteRow[settings.nameColumnId]) !== 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
+                ? "Delete \"".concat(name, "\"? This cannot be undone.")
+                : deleteIds === null
+                    ? "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, { 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 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: "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", 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 file = previewRow ? handleResolveFile(previewRow) : null;
+        if (!file)
+            return null;
+        var kind = (0, filePreview_1.handleResolveFileKind)(file);
+        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 === "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);
+                    } }),
+                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) {
+            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));
+        } },
+        renderToolbar(),
+        renderContent(),
+        renderDropOverlay(),
+        react_2.default.createElement(modal_1.Modal, { 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 () {
+                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 })));
+};
+exports.DriveView = DriveView;
+/**
+ * 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 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 () {
+                    var _a;
+                    (_a = popUpRef.current) === null || _a === void 0 ? void 0 : _a.handleOnClose();
+                    eachItem.onClick();
+                } }, eachItem.text)); })) })));
+};
+//# sourceMappingURL=driveView.js.map