@vryzel/file-next-ui 0.5.0 → 0.5.2

package/dist/index.d.cts

@@ -200,6 +200,15 @@ interface FileExplorerProps {
         onSelect: (file: FileNode) => void;
     };
     readonly protectedIds?: ReadonlyArray<string>;
+    /**
+     * Per-item rename/delete locks, resolved by the consumer (permissions,
+     * business rules). Locked actions are disabled in the context menu, blocked
+     * on F2/Delete, and excluded from the selection toast.
+     */
+    readonly itemLocks?: (file: FileNode) => {
+        rename?: boolean;
+        delete?: boolean;
+    };
     readonly labels?: Partial<ExplorerLabels>;
 }
 declare function FileExplorer(props: FileExplorerProps): React.ReactElement;
@@ -280,6 +289,8 @@ interface ExplorerContextMenuProps {
     readonly mode?: "browse" | "trash";
     readonly actions: ExplorerContextMenuActions;
     readonly protectedItem?: boolean;
+    readonly renameLocked?: boolean;
+    readonly deleteLocked?: boolean;
     readonly onClose: () => void;
     readonly onPreview?: (file: FileNode) => void;
     readonly onDownload?: (file: FileNode) => void;

package/dist/index.d.ts

@@ -200,6 +200,15 @@ interface FileExplorerProps {
         onSelect: (file: FileNode) => void;
     };
     readonly protectedIds?: ReadonlyArray<string>;
+    /**
+     * Per-item rename/delete locks, resolved by the consumer (permissions,
+     * business rules). Locked actions are disabled in the context menu, blocked
+     * on F2/Delete, and excluded from the selection toast.
+     */
+    readonly itemLocks?: (file: FileNode) => {
+        rename?: boolean;
+        delete?: boolean;
+    };
     readonly labels?: Partial<ExplorerLabels>;
 }
 declare function FileExplorer(props: FileExplorerProps): React.ReactElement;
@@ -280,6 +289,8 @@ interface ExplorerContextMenuProps {
     readonly mode?: "browse" | "trash";
     readonly actions: ExplorerContextMenuActions;
     readonly protectedItem?: boolean;
+    readonly renameLocked?: boolean;
+    readonly deleteLocked?: boolean;
     readonly onClose: () => void;
     readonly onPreview?: (file: FileNode) => void;
     readonly onDownload?: (file: FileNode) => void;

package/dist/index.js

@@ -1039,6 +1039,8 @@ function ExplorerContextMenu(props) {
     mode = "browse",
     actions,
     protectedItem = false,
+    renameLocked = false,
+    deleteLocked = false,
     onClose,
     onPreview,
     onDownload,
@@ -1087,7 +1089,7 @@ function ExplorerContextMenu(props) {
     swallowClickThrough();
     onClose();
   };
-  const itemClass = "flex w-full min-h-11 cursor-pointer items-center gap-2 rounded-[10px] px-3 py-2.5 text-left text-sm outline-none hover:bg-accent disabled:opacity-40 sm:min-h-0 sm:px-2.5 sm:py-1.5";
+  const itemClass = "flex w-full min-h-11 cursor-pointer items-center gap-2 rounded-[10px] px-3 py-2.5 text-left text-sm outline-none hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40 sm:min-h-0 sm:px-2.5 sm:py-1.5";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1164,13 +1166,24 @@ function ExplorerContextMenu(props) {
           close();
           extraFileAction.onSelect(target.file);
         }, children: extraFileAction.label }) : null,
-        onRename ? /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: itemClass, onClick: () => {
-          close();
-          onRename(target.file);
-        }, children: [
-          /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" }),
-          labels.rename
-        ] }) : null,
+        onRename ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: itemClass,
+            disabled: renameLocked,
+            onClick: () => {
+              if (renameLocked) return;
+              close();
+              onRename(target.file);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" }),
+              labels.rename
+            ]
+          }
+        ) : null,
         onCopy ? /* @__PURE__ */ jsxs("button", { type: "button", role: "menuitem", className: itemClass, onClick: () => {
           close();
           onCopy(target.file);
@@ -1209,10 +1222,10 @@ function ExplorerContextMenu(props) {
           {
             type: "button",
             role: "menuitem",
-            disabled: protectedItem,
+            disabled: protectedItem || deleteLocked,
             className: cn(itemClass, "text-destructive"),
             onClick: () => {
-              if (protectedItem) return;
+              if (protectedItem || deleteLocked) return;
               close();
               if (onRequestDelete) onRequestDelete(target.file);
               else void actions.deleteFile({ id: target.file.id });
@@ -1964,10 +1977,15 @@ function FileExplorerInner(props) {
     onPreview,
     onDownload,
     extraFileAction,
-    protectedIds
+    protectedIds,
+    itemLocks
   } = props;
   const labels = useExplorerLabels();
   const protectedSet = useMemo(() => new Set(protectedIds ?? []), [protectedIds]);
+  const locksFor = useCallback(
+    (file) => itemLocks?.(file) ?? {},
+    [itemLocks]
+  );
   const explorer = useFileExplorer({
     listFiles: ((input) => listFiles({ parentId: input.parentId, limit: PAGE_SIZE })),
     tenantId,
@@ -1989,6 +2007,7 @@ function FileExplorerInner(props) {
   const browseCursor = useRef(void 0);
   const overlayCursor = useRef(void 0);
   const loadingMoreRef = useRef(false);
+  const openingFolderIdRef = useRef(null);
   const overlayMoreRef = useRef(false);
   const browseGen = useRef(0);
   const [overlayFiles, setOverlayFiles] = useState(null);
@@ -2061,6 +2080,7 @@ function FileExplorerInner(props) {
         setLoadingMore(false);
         return;
       }
+      if (mode === "reset") openingFolderIdRef.current = null;
       if (result.ok) {
         browseCursor.current = result.value.nextCursor;
         setBrowseHasMore(Boolean(result.value.nextCursor));
@@ -2180,14 +2200,18 @@ function FileExplorerInner(props) {
     () => [...sourceFiles].sort((a, b) => compareFiles(a, b, sortKey, sortDir)),
     [sourceFiles, sortKey, sortDir]
   );
+  const refreshSeen = useRef(refreshKey);
   useEffect(() => {
-    if (refreshKey === void 0) return;
+    if (refreshKey === void 0 || refreshSeen.current === refreshKey) return;
+    refreshSeen.current = refreshKey;
     void reload();
-  }, [refreshKey]);
+  }, [refreshKey, reload]);
   const handleActivate = useCallback(
     (file) => {
       if (file.id === DRAFT_FOLDER_ID) return;
       if (file.kind === "folder") {
+        if (openingFolderIdRef.current === file.id) return;
+        openingFolderIdRef.current = file.id;
         onOpenFolder?.(file);
         return;
       }
@@ -2318,6 +2342,7 @@ function FileExplorerInner(props) {
       }
       if (event.key === "F2" && selected && !trashOpen) {
         event.preventDefault();
+        if (locksFor(selected).rename) return;
         setRenameTarget(selected);
         return;
       }
@@ -2327,7 +2352,8 @@ function FileExplorerInner(props) {
           if (actions.purgeNode) setPurgeTargets(selectedFiles);
           return;
         }
-        if (selectedFiles.some((file) => protectedSet.has(file.id))) return;
+        if (selectedFiles.some((file) => protectedSet.has(file.id) || locksFor(file).delete))
+          return;
         setDeleteTargets(selectedFiles);
         return;
       }
@@ -2341,6 +2367,7 @@ function FileExplorerInner(props) {
       clearSelection,
       copyToClipboard,
       handleActivate,
+      locksFor,
       pasteClipboard,
       protectedSet,
       selected,
@@ -2379,6 +2406,7 @@ function FileExplorerInner(props) {
       ...sortedFiles
     ];
   }, [draftFolderName, parentId, sortedFiles, tenantId]);
+  const listing = overlayLoading || pageStatus === "loading";
   const renamingId = draftFolderName != null ? DRAFT_FOLDER_ID : renameTarget?.id ?? null;
   const openUpload = () => uploadInputRef.current?.click();
   return /* @__PURE__ */ jsxs(
@@ -2443,79 +2471,95 @@ function FileExplorerInner(props) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto overflow-x-auto overscroll-x-contain", children: (overlayLoading || pageStatus === "loading") && displayFiles.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-12 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : overlayError || pageStatus === "error" && pageError ? /* @__PURE__ */ jsx("div", { className: "border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: (overlayError ?? pageError)?.message ?? labels.folderCreateFailed }) : displayFiles.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col justify-center px-4 py-16 text-center", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: trashOpen ? labels.emptyTrash : query.trim() ? labels.noMatches : labels.emptyFolder }),
-          trashOpen ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.trashRetention }) : !query.trim() ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.dropHint }) : null
-        ] }) : explorer.view === "list" ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: (event) => {
-              if (event.target.closest("[data-file-id]")) return;
-              clearSelection();
-            },
-            children: /* @__PURE__ */ jsx(
-              ExplorerListView,
-              {
-                files: displayFiles,
-                protectedIds: protectedSet,
-                selectedIds,
-                onSelect: handleSelect,
-                onActivate: handleActivate,
-                onContextMenu: handleContextMenu,
-                onDragStart: explorer.beginDrag,
-                onDragEnd: explorer.endDrag,
-                onDrop: handleDropOnFolder,
-                draggingId: explorer.draggingId,
-                draggingIds,
-                dropTargetId: explorer.dropTargetId,
-                onDragOverRow: explorer.setDropTarget,
-                sortKey,
-                sortDirection: sortDir,
-                onSortChange: handleSortChange,
-                renamingId,
-                onRenameCommit: commitRename,
-                onRenameCancel: cancelRename,
-                scrollRef,
-                hasMore,
-                loadingMore: loadingMore || overlayMore,
-                onLoadMore: loadNext
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
-            onClick: (event) => {
-              if (event.target.closest("[data-file-id]")) return;
-              clearSelection();
-            },
-            children: /* @__PURE__ */ jsx(
-              ExplorerGridView,
-              {
-                files: displayFiles,
-                protectedIds: protectedSet,
-                selectedIds,
-                onSelect: handleSelect,
-                onActivate: handleActivate,
-                onContextMenu: handleContextMenu,
-                onDragStart: explorer.beginDrag,
-                onDragEnd: explorer.endDrag,
-                onDrop: handleDropOnFolder,
-                draggingId: explorer.draggingId,
-                draggingIds,
-                dropTargetId: explorer.dropTargetId,
-                onDragOverRow: explorer.setDropTarget,
-                renamingId,
-                onRenameCommit: commitRename,
-                onRenameCancel: cancelRename,
-                scrollRef,
-                hasMore,
-                loadingMore: loadingMore || overlayMore,
-                onLoadMore: loadNext
-              }
-            )
+            ref: scrollRef,
+            "aria-busy": listing,
+            className: cn(
+              "min-h-0 flex-1 overflow-y-auto overflow-x-auto overscroll-x-contain",
+              // Stale rows stay mounted while the next listing loads, so dim them and
+              // swallow clicks instead of letting the user re-open the same folder.
+              listing && displayFiles.length > 0 && "pointer-events-none opacity-60"
+            ),
+            children: [
+              listing && displayFiles.length > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-0.5 w-full overflow-hidden bg-muted", children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 animate-pulse bg-primary" }) }) : null,
+              listing && displayFiles.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-12 text-center font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: labels.loading }) : overlayError || pageStatus === "error" && pageError ? /* @__PURE__ */ jsx("div", { className: "border-b border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive", children: (overlayError ?? pageError)?.message ?? labels.folderCreateFailed }) : displayFiles.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col justify-center px-4 py-16 text-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: trashOpen ? labels.emptyTrash : query.trim() ? labels.noMatches : labels.emptyFolder }),
+                trashOpen ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.trashRetention }) : !query.trim() ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: labels.dropHint }) : null
+              ] }) : explorer.view === "list" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: (event) => {
+                    if (event.target.closest("[data-file-id]")) return;
+                    clearSelection();
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    ExplorerListView,
+                    {
+                      files: displayFiles,
+                      protectedIds: protectedSet,
+                      selectedIds,
+                      onSelect: handleSelect,
+                      onActivate: handleActivate,
+                      onContextMenu: handleContextMenu,
+                      onDragStart: explorer.beginDrag,
+                      onDragEnd: explorer.endDrag,
+                      onDrop: handleDropOnFolder,
+                      draggingId: explorer.draggingId,
+                      draggingIds,
+                      dropTargetId: explorer.dropTargetId,
+                      onDragOverRow: explorer.setDropTarget,
+                      sortKey,
+                      sortDirection: sortDir,
+                      onSortChange: handleSortChange,
+                      renamingId,
+                      onRenameCommit: commitRename,
+                      onRenameCancel: cancelRename,
+                      scrollRef,
+                      hasMore,
+                      loadingMore: loadingMore || overlayMore,
+                      onLoadMore: loadNext
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onClick: (event) => {
+                    if (event.target.closest("[data-file-id]")) return;
+                    clearSelection();
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    ExplorerGridView,
+                    {
+                      files: displayFiles,
+                      protectedIds: protectedSet,
+                      selectedIds,
+                      onSelect: handleSelect,
+                      onActivate: handleActivate,
+                      onContextMenu: handleContextMenu,
+                      onDragStart: explorer.beginDrag,
+                      onDragEnd: explorer.endDrag,
+                      onDrop: handleDropOnFolder,
+                      draggingId: explorer.draggingId,
+                      draggingIds,
+                      dropTargetId: explorer.dropTargetId,
+                      onDragOverRow: explorer.setDropTarget,
+                      renamingId,
+                      onRenameCommit: commitRename,
+                      onRenameCancel: cancelRename,
+                      scrollRef,
+                      hasMore,
+                      loadingMore: loadingMore || overlayMore,
+                      onLoadMore: loadNext
+                    }
+                  )
+                }
+              )
+            ]
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxs("footer", { className: "flex shrink-0 items-center justify-between gap-3 border-t border-border px-4 py-2", children: [
           /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] uppercase tracking-[0.12em] text-muted-foreground", children: [
             /* @__PURE__ */ jsxs("span", { className: "text-primary tabular-nums", children: [
@@ -2536,6 +2580,8 @@ function FileExplorerInner(props) {
             target: menu,
             mode: trashOpen ? "trash" : "browse",
             protectedItem: menu?.kind === "item" ? protectedSet.has(menu.file.id) : false,
+            renameLocked: menu?.kind === "item" ? Boolean(locksFor(menu.file).rename) : false,
+            deleteLocked: menu?.kind === "item" ? Boolean(locksFor(menu.file).delete) : false,
             extraFileAction,
             actions: {
               deleteFile: async (input) => {
@@ -2570,7 +2616,10 @@ function FileExplorerInner(props) {
           ExplorerSelectionToast,
           {
             files: selectedFiles,
-            protectedIds: protectedSet,
+            protectedIds: /* @__PURE__ */ new Set([
+              ...protectedSet,
+              ...selectedFiles.filter((file) => locksFor(file).delete).map((file) => file.id)
+            ]),
             trashOpen,
             onDownload,
             onCopy: trashOpen ? void 0 : () => copyToClipboard(selectedFiles),