@muhgholy/next-drive 4.23.23 → 4.23.24

package/dist/client/components/drive/dnd/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/drive/dnd/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAgBhF,KAAK,mBAAmB,GAAG;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAOF,eAAO,MAAM,WAAW,2BAAoC,CAAC;AAG7D,eAAO,MAAM,gBAAgB,GAAI,OAAO,QAAQ,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,sBAuG9E,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/drive/dnd/context.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAgBhF,KAAK,mBAAmB,GAAG;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAOF,eAAO,MAAM,WAAW,2BAAoC,CAAC;AAG7D,eAAO,MAAM,gBAAgB,GAAI,OAAO,QAAQ,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,sBAgH9E,CAAC"}

package/dist/client/components/drive/explorer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"explorer.d.ts","sourceRoot":"","sources":["../../../../src/client/components/drive/explorer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAqErD,eAAO,MAAM,aAAa,GAAI,OAAO,QAAQ,CAAC;IAC1C,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC,sBA0eD,CAAC"}
+{"version":3,"file":"explorer.d.ts","sourceRoot":"","sources":["../../../../src/client/components/drive/explorer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAsErD,eAAO,MAAM,aAAa,GAAI,OAAO,QAAQ,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC,sBAmgBD,CAAC"}

package/dist/client/components/drive/file-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-grid.d.ts","sourceRoot":"","sources":["../../../../src/client/components/drive/file-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA8KrD,eAAO,MAAM,aAAa,GAAI,OAAO,QAAQ,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CACtD,CAAC,sBAsQD,CAAC"}
+{"version":3,"file":"file-grid.d.ts","sourceRoot":"","sources":["../../../../src/client/components/drive/file-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AA+KrD,eAAO,MAAM,aAAa,GAAI,OAAO,QAAQ,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CACvD,CAAC,sBAsRD,CAAC"}

package/dist/client/hooks/use-marquee.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const useMarquee: (onSelectIds: (ids: string[]) => void) => {
+    onMouseDown: (e: React.MouseEvent) => void;
+    overlay: React.DetailedReactHTMLElement<{
+        className: string;
+        style: {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+        };
+    }, HTMLElement> | null;
+};
+//# sourceMappingURL=use-marquee.d.ts.map

package/dist/client/hooks/use-marquee.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-marquee.d.ts","sourceRoot":"","sources":["../../../src/client/hooks/use-marquee.ts"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,eAAO,MAAM,UAAU,GAAI,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI;qBAGnC,KAAK,CAAC,UAAU;;;;;;;;;;CAkD3C,CAAC"}

package/dist/client/index.cjs

@@ -1556,9 +1556,16 @@ var DriveDndContext = React3.createContext({
 var useDriveDnd = () => React3.useContext(DriveDndContext);
 var DriveDndProvider = (props) => {
   const { children } = props;
-  const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView } = useDrive();
+  const { items, setItems, sortBy, setSortBy, moveItem, callAPI, currentView, selectedFileIds, setSelectedFiles } = useDrive();
   const [dragOverFolderId, setDragOverFolderId] = React3.useState(null);
   const [draggingItemId, setDraggingItemId] = React3.useState(null);
+  const moveSelection = React3.useCallback(async (activeId, targetFolderId) => {
+    const ids = selectedFileIds.includes(activeId) && selectedFileIds.length > 1 ? selectedFileIds : [activeId];
+    if (ids.length === 1) return moveItem(ids[0], targetFolderId);
+    setItems((prev) => prev.filter((i) => !ids.includes(i.id)));
+    setSelectedFiles([]);
+    await callAPI("move", { method: "POST", body: JSON.stringify({ ids, targetFolderId }) });
+  }, [selectedFileIds, moveItem, setItems, setSelectedFiles, callAPI]);
   const sensors = core.useSensors(
     core.useSensor(core.PointerSensor, { activationConstraint: { distance: 8 } }),
     core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
@@ -1593,12 +1600,12 @@ var DriveDndProvider = (props) => {
     if (overId.startsWith("path-")) {
       const pathId = overId.slice(5);
       const targetFolderId = pathId === "root" || pathId === "null" ? "root" : pathId;
-      await moveItem(active.id, targetFolderId);
+      await moveSelection(active.id, targetFolderId);
       return;
     }
     const overItem = items.find((i) => i.id === over.id);
     if (overItem?.information.type === "FOLDER") {
-      await moveItem(active.id, over.id);
+      await moveSelection(active.id, over.id);
       return;
     }
     const oldIndex = items.findIndex((i) => i.id === active.id);
@@ -1608,7 +1615,7 @@ var DriveDndProvider = (props) => {
     setItems(reordered);
     if (sortBy.field !== "order") setSortBy({ field: "order", order: 1 });
     await callAPI("reorder", { method: "POST", body: JSON.stringify({ ids: reordered.map((i) => i.id) }) });
-  }, [items, setItems, sortBy, setSortBy, moveItem, callAPI]);
+  }, [items, setItems, sortBy, setSortBy, moveSelection, callAPI]);
   const enableDnd = currentView === "BROWSE";
   return /* @__PURE__ */ jsxRuntime.jsx(DriveDndContext.Provider, { value: { dragOverFolderId, draggingItemId }, children: enableDnd ? /* @__PURE__ */ jsxRuntime.jsx(
     core.DndContext,
@@ -1974,6 +1981,49 @@ var DriveItemRename = (props) => {
     }
   ) });
 };
+var useMarquee = (onSelectIds) => {
+  const [box, setBox] = React3.useState(null);
+  const onMouseDown = (e) => {
+    if (e.button !== 0 || e.target.closest("[data-marquee-id]")) return;
+    const container = e.currentTarget;
+    const start = { x: e.clientX, y: e.clientY };
+    let moved = false;
+    const handleMove = (ev) => {
+      if (!moved && Math.abs(ev.clientX - start.x) < 4 && Math.abs(ev.clientY - start.y) < 4) return;
+      moved = true;
+      const left = Math.min(start.x, ev.clientX);
+      const top = Math.min(start.y, ev.clientY);
+      const right = Math.max(start.x, ev.clientX);
+      const bottom = Math.max(start.y, ev.clientY);
+      const cRect = container.getBoundingClientRect();
+      setBox({
+        left: left - cRect.left + container.scrollLeft,
+        top: top - cRect.top + container.scrollTop,
+        width: right - left,
+        height: bottom - top
+      });
+      const ids = [];
+      container.querySelectorAll("[data-marquee-id]").forEach((el) => {
+        const r = el.getBoundingClientRect();
+        if (r.left < right && r.right > left && r.top < bottom && r.bottom > top) ids.push(el.dataset.marqueeId);
+      });
+      onSelectIds(ids);
+    };
+    const handleUp = () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+      if (!moved) onSelectIds([]);
+      setBox(null);
+    };
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+  };
+  const overlay = box ? React3__namespace.default.createElement("div", {
+    className: "nd:absolute nd:z-50 nd:rounded-sm nd:border nd:border-primary nd:bg-primary/10 nd:pointer-events-none",
+    style: { left: box.left, top: box.top, width: box.width, height: box.height }
+  }) : null;
+  return { onMouseDown, overlay };
+};
 var SortableItem = (props) => {
   const { id, children, disabled, isDragOverTarget } = props;
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({ id, disabled });
@@ -1984,7 +2034,7 @@ var SortableItem = (props) => {
     zIndex: isDragging ? 50 : "auto",
     position: "relative"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, "data-marquee-id": id, style, ...attributes, ...listeners, children });
 };
 var FileItem = (props) => {
   const { item, isSelected, isDragOver, onSelect, onDoubleClick, onRename, onDelete, onRestore } = props;
@@ -2071,6 +2121,8 @@ var DriveFileGrid = (props) => {
     sortBy,
     selectedFileIds,
     toggleSelected,
+    setSelectedFiles,
+    selectionMode,
     navigateToFolder,
     hasMore,
     loadMore,
@@ -2082,6 +2134,19 @@ var DriveFileGrid = (props) => {
     restoreItem
   } = useDrive();
   const { dragOverFolderId } = useDriveDnd();
+  const { onMouseDown: marqueeMouseDown, overlay: marqueeOverlay } = useMarquee((ids) => {
+    let files = items.filter((i) => ids.includes(i.id)).map((i) => ({
+      id: i.id,
+      file: {
+        name: i.name,
+        mime: i.information.type === "FILE" ? i.information.mime : "",
+        size: i.information.type === "FILE" ? i.information.sizeInBytes : 0
+      }
+    }));
+    if (selectionMode.type === "SINGLE") files = files.slice(0, 1);
+    else if (selectionMode.maxFile) files = files.slice(0, selectionMode.maxFile);
+    setSelectedFiles(files);
+  });
   const [dialogs, setDialogs] = React3__namespace.default.useState({ newFolder: false, rename: false, delete: false });
   const [itemToDelete, setItemToDelete] = React3__namespace.default.useState(null);
   const [itemToRename, setItemToRename] = React3__namespace.default.useState(null);
@@ -2204,7 +2269,8 @@ var DriveFileGrid = (props) => {
         indicatorClassName: "nd:bg-primary"
       }
     ) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:relative nd:p-2 nd:sm:p-3 nd:md:p-4", className), onMouseDown: marqueeMouseDown, children: [
+      marqueeOverlay,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         groupBy !== "NONE" && /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "nd:text-xs nd:font-semibold nd:text-muted-foreground nd:uppercase nd:tracking-wide nd:mb-2 nd:sm:mb-3 nd:px-1", children: [
           groupName,
@@ -3855,7 +3921,7 @@ var SortableItem2 = (props) => {
     zIndex: isDragging ? 50 : "auto",
     position: "relative"
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, "data-marquee-id": id, style, ...attributes, ...listeners, children });
 };
 var DriveExplorer = (props) => {
   const { onItemClick, onItemDoubleClick, mimeFilter, className, selectableFolders = false } = props;
@@ -3872,6 +3938,8 @@ var DriveExplorer = (props) => {
     setSortBy,
     selectedFileIds,
     toggleSelected,
+    setSelectedFiles,
+    selectionMode,
     navigateToFolder,
     hasMore,
     loadMore,
@@ -3901,6 +3969,13 @@ var DriveExplorer = (props) => {
   const handleDragStart = (event) => {
     setDraggingItemId(event.active.id);
   };
+  const moveSelection = async (activeId, targetFolderId) => {
+    const ids = selectedFileIds.includes(activeId) && selectedFileIds.length > 1 ? selectedFileIds : [activeId];
+    if (ids.length === 1) return moveItem(ids[0], targetFolderId);
+    setItems((prev) => prev.filter((i) => !ids.includes(i.id)));
+    setSelectedFiles([]);
+    await callAPI("move", { method: "POST", body: JSON.stringify({ ids, targetFolderId }) });
+  };
   const handleDragOver = (event) => {
     const { over } = event;
     if (!over) {
@@ -3924,13 +3999,13 @@ var DriveExplorer = (props) => {
     const overId = over.id;
     if (overId.startsWith("path-")) {
       const targetFolderId = overId.replace("path-", "");
-      await moveItem(active.id, targetFolderId === "root" ? "root" : targetFolderId);
+      await moveSelection(active.id, targetFolderId === "root" ? "root" : targetFolderId);
       return;
     }
     const overItem = items.find((i) => i.id === over.id);
     const activeItem = items.find((i) => i.id === active.id);
     if (overItem?.information.type === "FOLDER" && activeItem) {
-      await moveItem(active.id, over.id);
+      await moveSelection(active.id, over.id);
       return;
     }
     setItems((prevItems) => {
@@ -4034,6 +4109,19 @@ var DriveExplorer = (props) => {
     } else onItemDoubleClick?.(item);
   };
   const enableDrag = currentView === "BROWSE";
+  const { onMouseDown: marqueeMouseDown, overlay: marqueeOverlay } = useMarquee((ids) => {
+    let files = items.filter((i) => ids.includes(i.id)).map((i) => ({
+      id: i.id,
+      file: {
+        name: i.name,
+        mime: i.information.type === "FILE" ? i.information.mime : "",
+        size: i.information.type === "FILE" ? i.information.sizeInBytes : 0
+      }
+    }));
+    if (selectionMode.type === "SINGLE") files = files.slice(0, 1);
+    else if (selectionMode.maxFile) files = files.slice(0, selectionMode.maxFile);
+    setSelectedFiles(files);
+  });
   const stateContent = (() => {
     if (isLoading && items.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:flex nd:items-center nd:justify-center nd:py-12 nd:flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "nd:size-6 nd:animate-spin nd:text-muted-foreground" }) });
@@ -4064,7 +4152,8 @@ var DriveExplorer = (props) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:lg:hidden nd:px-3 nd:py-2 nd:border-b nd:bg-background/95 nd:dark:bg-background/80 nd:backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsx(DrivePathBar, {}) }),
     stateContent || /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkHQTC3554_cjs.cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:relative nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), onMouseDown: marqueeMouseDown, children: [
+        marqueeOverlay,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6 nd:pb-8 nd:sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nd:space-y-3", children: [
           groupBy !== "NONE" && /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "nd:text-sm nd:font-medium nd:text-muted-foreground nd:flex nd:items-center nd:gap-2", children: [
             groupName,