@halazv2/react-file-manager 0.1.0

package/dist/index.js

@@ -0,0 +1,839 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { createContext as r, useCallback as i, useContext as a, useDeferredValue as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+//#region src/icons.tsx
+function d({ size: e = 16, className: t, ...n }) {
+	return {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.8,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		width: e,
+		height: e,
+		className: t,
+		"aria-hidden": !0,
+		...n
+	};
+}
+function f(e) {
+	return /* @__PURE__ */ t("svg", {
+		...d(e),
+		children: /* @__PURE__ */ t("path", { d: "M3 7.5A1.5 1.5 0 0 1 4.5 6h4.2l1.8 1.8H19.5A1.5 1.5 0 0 1 21 9.3v7.2A1.5 1.5 0 0 1 19.5 18h-15A1.5 1.5 0 0 1 3 16.5z" })
+	});
+}
+function p(e) {
+	return /* @__PURE__ */ n("svg", {
+		...d(e),
+		children: [/* @__PURE__ */ t("path", { d: "M7 3.5h7l5 5V20a1.5 1.5 0 0 1-1.5 1.5h-10.5A1.5 1.5 0 0 1 5.5 20V5A1.5 1.5 0 0 1 7 3.5z" }), /* @__PURE__ */ t("path", { d: "M14 3.5V9h5.5" })]
+	});
+}
+function m(e) {
+	return /* @__PURE__ */ n("svg", {
+		...d(e),
+		children: [/* @__PURE__ */ t("path", { d: "M4 11.5 12 4.5l8 7" }), /* @__PURE__ */ t("path", { d: "M6.5 10.5V19h11v-8.5" })]
+	});
+}
+function h(e) {
+	return /* @__PURE__ */ t("svg", {
+		...d(e),
+		children: /* @__PURE__ */ t("path", { d: "m9 6 6 6-6 6" })
+	});
+}
+function g(e) {
+	return /* @__PURE__ */ n("svg", {
+		...d(e),
+		children: [/* @__PURE__ */ t("path", { d: "M8 7h12M8 12h12M8 17h12" }), /* @__PURE__ */ t("path", { d: "M4 7h.01M4 12h.01M4 17h.01" })]
+	});
+}
+function _(e) {
+	return /* @__PURE__ */ t("svg", {
+		...d(e),
+		children: /* @__PURE__ */ t("path", { d: "M4 5h7v7H4zM13 5h7v7h-7zM4 14h7v6H4zM13 14h7v6h-7z" })
+	});
+}
+function v(e) {
+	return /* @__PURE__ */ n("svg", {
+		...d(e),
+		children: [/* @__PURE__ */ t("path", { d: "M8 4H4v4M16 4h4v4M8 20H4v-4M16 20h4v-4" }), /* @__PURE__ */ t("path", { d: "m14 10-4 4m0-4 4 4" })]
+	});
+}
+function y(e) {
+	return /* @__PURE__ */ n("svg", {
+		...d(e),
+		children: [/* @__PURE__ */ t("circle", {
+			cx: "11",
+			cy: "11",
+			r: "6.5"
+		}), /* @__PURE__ */ t("path", { d: "m16 16 4 4" })]
+	});
+}
+function b(e) {
+	return /* @__PURE__ */ n("svg", {
+		...d(e),
+		children: [
+			/* @__PURE__ */ t("path", { d: "M12 16V5" }),
+			/* @__PURE__ */ t("path", { d: "m8 9 4-4 4 4" }),
+			/* @__PURE__ */ t("path", { d: "M5 19h14" })
+		]
+	});
+}
+//#endregion
+//#region src/context.ts
+var x = r(null);
+function S() {
+	let e = a(x);
+	if (!e) throw Error("FileManager components must be used inside <FileManager>");
+	return e;
+}
+//#endregion
+//#region src/styles.ts
+function C(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var w = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rfm-primary", T = "transition-colors duration-150";
+C("inline-flex shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-gray-500 hover:bg-black/[0.06] hover:text-gray-900", T, w);
+var E = "bg-rfm-hover outline-dashed outline-2 outline-rfm-primary";
+//#endregion
+//#region src/components/Breadcrumbs.tsx
+function ee() {
+	let { breadcrumbs: e, dropTargetId: r, rootLabel: i, openFolder: a, folderDropHandlers: o } = S();
+	return /* @__PURE__ */ n("nav", {
+		className: "flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto overflow-y-hidden text-[13px] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+		"aria-label": "Breadcrumb",
+		children: [/* @__PURE__ */ t("button", {
+			type: "button",
+			className: C("cursor-pointer whitespace-nowrap rounded-sm border-0 bg-transparent p-0 text-gray-700 hover:text-rfm-primary", r === "root" ? E : ""),
+			onClick: () => a(null),
+			...o("root"),
+			children: i
+		}), e.map((e) => /* @__PURE__ */ n("span", {
+			className: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ t(h, {
+				className: "text-gray-400",
+				size: 14
+			}), /* @__PURE__ */ t("button", {
+				type: "button",
+				className: C("cursor-pointer whitespace-nowrap rounded-sm border-0 bg-transparent p-0 text-gray-700 hover:text-rfm-primary", r === e.id ? E : ""),
+				onClick: () => a(e.id),
+				...o(e.id),
+				children: e.name
+			})]
+		}, e.id))]
+	});
+}
+//#endregion
+//#region src/tree.ts
+function D(e, t) {
+	for (let n of e) {
+		if (n.id === t) return n;
+		if (n.children?.length) {
+			let e = D(n.children, t);
+			if (e) return e;
+		}
+	}
+	return null;
+}
+function O(e, t) {
+	return e.id === t || (e.children ?? []).some((e) => O(e, t));
+}
+function k(e) {
+	return (e.children ?? []).some((e) => e.kind === "folder");
+}
+function A(e, t) {
+	return t ? D(e, t)?.children ?? [] : e;
+}
+function te(e, t) {
+	return [...A(e, t)].sort((e, t) => e.kind === t.kind ? e.name.localeCompare(t.name) : e.kind === "folder" ? -1 : 1);
+}
+function ne(e, t) {
+	if (!t) return [];
+	let n = [], r = (e) => {
+		for (let i of e) {
+			if (i.id === t) return n.push(i), !0;
+			if (i.kind === "folder" && r(i.children ?? [])) return n.unshift(i), !0;
+		}
+		return !1;
+	};
+	return r(e), n;
+}
+function j(e, t) {
+	return [t, ...e].join(" / ");
+}
+function re(e, t, n = "My files") {
+	let r = t.trim().toLowerCase();
+	if (!r) return [];
+	let i = [], a = (e, t) => {
+		let o = j(t, n);
+		for (let n of e) n.name.toLowerCase().includes(r) && i.push({
+			...n,
+			path: o
+		}), n.kind === "folder" && a(n.children ?? [], [...t, n.name]);
+	};
+	return a(e, []), i;
+}
+function M(e) {
+	if (e.kind !== "folder") return e.extension ? e.extension.replace(/^\./, "").toLowerCase() : e.name.match(/\.([^.]+)$/)?.[1]?.toLowerCase();
+}
+function N(e, t, n) {
+	let r = new Set(t), i = [];
+	for (let r of t) {
+		let t = D(e, r);
+		if (t && t.kind === "folder" && n && O(t, n)) return e;
+	}
+	let a = (e) => e.flatMap((e) => r.has(e.id) ? (i.push(e), []) : e.children ? [{
+		...e,
+		children: a(e.children)
+	}] : [e]), o = a(e);
+	if (!i.length) return e;
+	if (!n) return [...o, ...i];
+	let s = (e) => e.map((e) => e.id === n ? {
+		...e,
+		children: [...e.children ?? [], ...i]
+	} : e.children ? {
+		...e,
+		children: s(e.children)
+	} : e);
+	return s(o);
+}
+//#endregion
+//#region src/components/Item.tsx
+function P({ item: e, index: r }) {
+	let { view: i, selectedIds: a, focusedIndex: o, dropTargetId: s, canManage: c, selectItem: l, activateItem: u, onDragStart: d, folderDropHandlers: m, renderIcon: h, renderActions: g } = S(), _ = a.includes(e.id), v = o === r, y = e.kind === "folder", b = s === e.id && y, x = y ? e.children?.length ?? 0 : null, w = M(e);
+	return /* @__PURE__ */ t("div", {
+		className: "rfm-row min-w-0",
+		children: /* @__PURE__ */ n("div", {
+			draggable: c,
+			role: "option",
+			"aria-selected": _,
+			"aria-label": e.name,
+			className: C("cursor-pointer", i === "cards" ? "group/card relative flex min-h-[116px] flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border border-gray-200 p-3 text-center shadow-[0_1px_2px_rgba(16,24,40,0.05)] transition duration-150 hover:-translate-y-px hover:border-gray-300 hover:shadow-[0_4px_12px_rgba(16,24,40,0.08)]" : C("group/row grid grid-cols-[22px_minmax(0,1fr)_auto_auto] items-center gap-2 rounded-lg px-2.5 py-2", T), _ ? "bg-rfm-hover" : i === "list" ? "hover:bg-gray-100" : "bg-white", v && i === "list" ? "outline outline-1 outline-rfm-primary" : "", b ? E : ""),
+			onDragStart: (t) => d(e, t),
+			...y ? m(e.id) : {},
+			onClick: (t) => l(e, t),
+			onDoubleClick: () => u(e),
+			children: [
+				h?.(e) ?? t(y ? f : p, { size: i === "cards" ? 36 : 18 }),
+				/* @__PURE__ */ n("span", {
+					className: "flex min-w-0 flex-col gap-px",
+					children: [/* @__PURE__ */ t("span", {
+						className: C("min-w-0 text-[13px] text-gray-900", i === "cards" ? "line-clamp-2 w-full break-words text-center" : "truncate"),
+						children: e.name
+					}), e.path && /* @__PURE__ */ t("span", {
+						className: "min-w-0 truncate text-[11px] text-gray-500",
+						children: e.path
+					})]
+				}),
+				i === "list" && /* @__PURE__ */ t("span", {
+					className: "text-[11px] text-gray-500",
+					children: y ? `${x} item${x === 1 ? "" : "s"}` : (w || "file").toUpperCase()
+				}),
+				g && /* @__PURE__ */ t("span", {
+					className: C("rfm-more", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rfm-primary", _ || v ? "opacity-100" : "", i === "cards" ? "absolute right-1.5 top-1.5" : ""),
+					children: g(e)
+				})
+			]
+		})
+	});
+}
+function ie({ folders: r, depth: i = 0 }) {
+	let { viewFolderId: a, dropTargetId: o, expandedIds: s, openFolder: c, toggleExpanded: l, folderDropHandlers: u, renderIcon: d, renderActions: p } = S();
+	return /* @__PURE__ */ t(e, { children: r.filter((e) => e.kind === "folder").map((e) => {
+		let r = k(e), m = s.has(e.id), h = a === e.id, g = o === e.id;
+		return /* @__PURE__ */ n("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ n("div", {
+				role: "treeitem",
+				"aria-selected": h,
+				"aria-label": e.name,
+				tabIndex: 0,
+				className: C("rfm-tree-row group/tree mb-0.5 flex w-full cursor-pointer items-center gap-1 rounded-md py-1 pr-1 text-left text-[13px]", h ? "bg-rfm-hover font-semibold text-rfm-primary" : "text-gray-900 hover:bg-black/[0.04]", g ? E : "", T, w),
+				style: { paddingLeft: 6 + i * 12 },
+				onClick: () => c(e.id),
+				...u(e.id),
+				children: [
+					/* @__PURE__ */ t("button", {
+						type: "button",
+						className: C("inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-gray-500", m ? "rotate-90" : "", r ? "cursor-pointer hover:bg-black/[0.06] hover:text-gray-900" : "invisible pointer-events-none", T, w),
+						"aria-label": m ? "Collapse folder" : "Expand folder",
+						disabled: !r,
+						onClick: (t) => {
+							r && l(t, e.id);
+						},
+						children: /* @__PURE__ */ t(F, {})
+					}),
+					d?.(e) ?? /* @__PURE__ */ t(f, { size: 16 }),
+					/* @__PURE__ */ t("span", {
+						className: "min-w-0 flex-1 truncate",
+						title: e.name,
+						children: e.name
+					}),
+					p && /* @__PURE__ */ t("span", {
+						className: "rfm-more",
+						children: p(e)
+					})
+				]
+			}), r && m && /* @__PURE__ */ t("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ t(ie, {
+					folders: e.children ?? [],
+					depth: i + 1
+				})
+			})]
+		}, e.id);
+	}) });
+}
+function F() {
+	return /* @__PURE__ */ t("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ t("path", { d: "m9 6 6 6-6 6" })
+	});
+}
+//#endregion
+//#region src/components/Browser.tsx
+function I() {
+	let { view: e, searchQuery: r, canManage: i, isBusy: a, items: o, viewItems: s, viewFolderId: c, folderId: l, selectedIds: u, setView: d, setSearchQuery: f, onDropOnFolder: p, onUpload: m, fileInputRef: h } = S(), v = e === "cards" ? "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] content-start gap-2.5 p-3" : "flex flex-col gap-0.5 px-2.5 pb-4 pt-2", b = s !== o, x = b ? s : o;
+	return /* @__PURE__ */ n("section", {
+		className: "relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-white",
+		onDragOver: (e) => {
+			i && (e.preventDefault(), e.dataTransfer.dropEffect = "move");
+		},
+		onDrop: (e) => {
+			i && p(e, c);
+		},
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-black/[0.06] px-3 py-2.5",
+				children: [/* @__PURE__ */ t(ee, {}), /* @__PURE__ */ n("div", {
+					className: "ml-auto flex items-center gap-2",
+					children: [/* @__PURE__ */ n("label", {
+						className: "relative",
+						children: [/* @__PURE__ */ t(y, {
+							className: "pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-gray-400",
+							size: 14
+						}), /* @__PURE__ */ t("input", {
+							type: "search",
+							value: r,
+							placeholder: "Search",
+							"aria-label": "Search files",
+							className: C("h-7 w-40 rounded-md border border-gray-200 bg-gray-50 pr-2 pl-7 text-[13px] text-gray-900 outline-none placeholder:text-gray-400 focus:border-rfm-primary", w),
+							onChange: (e) => f(e.target.value)
+						})]
+					}), /* @__PURE__ */ n("div", {
+						className: "flex gap-1",
+						children: [/* @__PURE__ */ t(ae, {
+							label: "List view",
+							pressed: e === "list",
+							onClick: () => d("list"),
+							children: /* @__PURE__ */ t(g, { size: 16 })
+						}), /* @__PURE__ */ t(ae, {
+							label: "Card view",
+							pressed: e === "cards",
+							onClick: () => d("cards"),
+							children: /* @__PURE__ */ t(_, { size: 16 })
+						})]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "relative min-h-0 flex-1 overflow-hidden",
+				children: [/* @__PURE__ */ t(L, {
+					items: x,
+					className: v,
+					emptyLabel: r.trim() && !b ? "No matching files" : "This folder is empty",
+					showEmptyActions: !r.trim() || b,
+					folderId: b ? c : l,
+					isBusy: a
+				}), u.length > 1 && /* @__PURE__ */ n("div", {
+					className: "pointer-events-none absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-full bg-gray-900 py-1.5 px-4 text-xs text-white shadow-[0_12px_32px_rgba(15,23,42,0.35)]",
+					children: [u.length, " selected"]
+				})]
+			}),
+			i && m && /* @__PURE__ */ t("input", {
+				ref: h,
+				type: "file",
+				multiple: !0,
+				className: "hidden",
+				"aria-label": "Upload files",
+				onChange: (e) => {
+					e.target.files?.length && (m(Array.from(e.target.files), l), e.target.value = "");
+				}
+			})
+		]
+	});
+}
+function L({ items: e, className: r, emptyLabel: i, showEmptyActions: a, folderId: o, isBusy: s }) {
+	let { view: c, canManage: l, onCreateFolder: u, fileInputRef: d } = S();
+	return /* @__PURE__ */ n("div", {
+		className: "relative h-full overflow-y-auto overscroll-contain",
+		children: [s && /* @__PURE__ */ t("div", {
+			className: "absolute inset-0 z-20 bg-white/50",
+			"aria-busy": "true"
+		}), /* @__PURE__ */ t("div", {
+			className: r,
+			role: "listbox",
+			"aria-label": "Folder contents",
+			children: e.length === 0 ? /* @__PURE__ */ n("div", {
+				className: C("flex min-h-[240px] flex-col items-center justify-center gap-3 p-6 text-center text-[13px] text-gray-500", c === "cards" ? "col-span-full" : ""),
+				children: [/* @__PURE__ */ t("p", {
+					className: "m-0",
+					children: i
+				}), a && l && /* @__PURE__ */ n("div", {
+					className: "flex flex-wrap justify-center gap-2",
+					children: [/* @__PURE__ */ n("button", {
+						type: "button",
+						className: C("inline-flex cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-gray-900 px-3 py-2 text-[13px] font-semibold text-white hover:bg-gray-700", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rfm-primary"),
+						onClick: () => d.current?.click(),
+						children: [/* @__PURE__ */ t(b, { size: 16 }), "Upload files"]
+					}), u && /* @__PURE__ */ n("button", {
+						type: "button",
+						className: C("inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-[13px] font-semibold text-gray-700 hover:border-gray-300 hover:bg-gray-50", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rfm-primary"),
+						onClick: () => u(o),
+						children: [/* @__PURE__ */ t(f, { size: 16 }), "Create folder"]
+					})]
+				})]
+			}) : e.map((e, n) => /* @__PURE__ */ t(P, {
+				item: e,
+				index: n
+			}, e.id))
+		})]
+	});
+}
+function ae({ label: e, pressed: n, onClick: r, children: i }) {
+	return /* @__PURE__ */ t("button", {
+		type: "button",
+		className: C("inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border-0", n ? "bg-rfm-primary text-white" : "bg-transparent text-gray-500 hover:bg-black/5", T, w),
+		"aria-label": e,
+		"aria-pressed": n,
+		onClick: r,
+		children: i
+	});
+}
+//#endregion
+//#region src/components/DetailsPane.tsx
+function R() {
+	let { selectedNode: e, renderIcon: r, renderPreview: i, renderActions: a } = S();
+	if (i) return /* @__PURE__ */ t("aside", {
+		className: "flex min-h-0 flex-col overflow-hidden border-l border-black/[0.06] bg-gray-50",
+		children: /* @__PURE__ */ t("div", {
+			className: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain p-4",
+			children: i(e)
+		})
+	});
+	if (!e) return /* @__PURE__ */ t("aside", {
+		className: "flex min-h-0 flex-col overflow-hidden border-l border-black/[0.06] bg-gray-50",
+		children: /* @__PURE__ */ n("div", {
+			className: "flex h-full flex-col items-center justify-center gap-3 px-2 text-center text-[13px] text-gray-500",
+			children: [
+				/* @__PURE__ */ t(f, { size: 56 }),
+				/* @__PURE__ */ t("p", {
+					className: "m-0",
+					children: "Select a file or folder to view details"
+				}),
+				/* @__PURE__ */ t("p", {
+					className: "m-0 max-w-[180px] text-[11px] leading-snug text-gray-400",
+					children: "↑↓ navigate · Shift range · ⌘/Ctrl toggle · Enter open · Esc clear"
+				})
+			]
+		})
+	});
+	let o = e.kind === "folder", s = M(e), c = e.children?.length ?? 0;
+	return /* @__PURE__ */ t("aside", {
+		className: "flex min-h-0 flex-col overflow-hidden border-l border-black/[0.06] bg-gray-50",
+		children: /* @__PURE__ */ n("div", {
+			className: "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain p-4",
+			children: [/* @__PURE__ */ n("div", {
+				className: "relative flex min-h-[220px] flex-1 flex-col items-center justify-center rounded-lg bg-gray-100/80 px-4 py-5",
+				children: [r?.(e) ?? t(o ? f : p, { size: 64 }), /* @__PURE__ */ t("span", {
+					className: "mt-2 text-xs text-gray-500",
+					children: o ? `${c} item${c === 1 ? "" : "s"}` : (s || "file").toUpperCase()
+				})]
+			}), /* @__PURE__ */ n("div", {
+				className: "mt-3",
+				children: [
+					/* @__PURE__ */ t("h3", {
+						className: "m-0 mb-2.5 break-words text-sm font-semibold text-gray-900",
+						children: e.name
+					}),
+					e.path && /* @__PURE__ */ t("p", {
+						className: "m-0 -mt-1.5 mb-2.5 break-words text-xs text-gray-500",
+						children: e.path
+					}),
+					/* @__PURE__ */ n("dl", {
+						className: "m-0",
+						children: [/* @__PURE__ */ n("div", {
+							className: "flex justify-between gap-3 border-b border-gray-200/70 py-2 text-xs",
+							children: [/* @__PURE__ */ t("dt", {
+								className: "text-gray-500",
+								children: "Type"
+							}), /* @__PURE__ */ t("dd", {
+								className: "m-0 font-medium text-gray-900",
+								children: o ? "Folder" : (s || "file").toUpperCase()
+							})]
+						}), o && /* @__PURE__ */ n("div", {
+							className: "flex justify-between gap-3 py-2 text-xs",
+							children: [/* @__PURE__ */ t("dt", {
+								className: "text-gray-500",
+								children: "Items"
+							}), /* @__PURE__ */ t("dd", {
+								className: "m-0 font-medium text-gray-900",
+								children: c
+							})]
+						})]
+					}),
+					a && /* @__PURE__ */ t("div", {
+						className: C("mt-3", "transition-colors duration-150", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rfm-primary"),
+						children: a(e)
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/Sidebar.tsx
+function z() {
+	let { nodes: e, viewFolderId: r, dropTargetId: i, canManage: a, rootLabel: o, openFolder: s, collapseAll: c, folderDropHandlers: l, onCreateFolder: u } = S();
+	return /* @__PURE__ */ n("aside", {
+		className: "flex min-h-0 flex-col gap-2 overflow-hidden border-r border-black/[0.06] bg-gray-100/80 p-3",
+		children: [
+			a && u && /* @__PURE__ */ t("button", {
+				type: "button",
+				className: C("flex h-9 w-full shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border-0 bg-rfm-primary text-sm font-semibold text-white hover:brightness-95", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rfm-primary"),
+				onClick: () => u(r),
+				children: "New folder"
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "flex shrink-0 justify-end",
+				children: /* @__PURE__ */ n("button", {
+					type: "button",
+					className: C("inline-flex cursor-pointer items-center gap-1 rounded-md border-0 bg-transparent px-1.5 py-1 text-[11px] font-semibold text-gray-500 hover:bg-black/5 hover:text-gray-900", T, w),
+					onClick: c,
+					children: [/* @__PURE__ */ t(v, { size: 14 }), "Collapse all"]
+				})
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
+				children: [/* @__PURE__ */ n("button", {
+					type: "button",
+					className: C("flex w-full cursor-pointer items-center gap-1 rounded-md border-0 bg-transparent py-1 text-left text-[13px]", r === null ? "bg-rfm-hover font-semibold text-rfm-primary" : "text-gray-900 hover:bg-black/[0.04]", i === "root" ? E : "", T, w),
+					style: { paddingLeft: 8 },
+					onClick: () => s(null),
+					...l("root"),
+					children: [
+						/* @__PURE__ */ t("span", { className: "invisible inline-block h-[18px] w-[18px] shrink-0" }),
+						/* @__PURE__ */ t(m, {
+							className: "h-4 w-4 shrink-0",
+							size: 16
+						}),
+						/* @__PURE__ */ t("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: o
+						})
+					]
+				}), /* @__PURE__ */ t("div", {
+					role: "tree",
+					children: /* @__PURE__ */ t(ie, { folders: e })
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/dropTarget.ts
+function B(e) {
+	let t = e.relatedTarget;
+	return !(t && e.currentTarget.contains(t));
+}
+function oe({ canManage: e, targetId: t, setDropTargetId: n, onDropOnFolder: r, onHoverExpand: i, clearExpandTimer: a }) {
+	let o = t === "root" ? null : t;
+	return {
+		onDragEnter: (r) => {
+			e && B(r) && (r.preventDefault(), n(t), i?.());
+		},
+		onDragOver: (r) => {
+			e && (r.preventDefault(), r.dataTransfer.dropEffect = "move", n(t));
+		},
+		onDragLeave: (e) => {
+			B(e) && (n((e) => e === t ? null : e), a?.());
+		},
+		onDrop: (e) => {
+			r(e, o);
+		}
+	};
+}
+//#endregion
+//#region src/selection.ts
+function se(e, t, n) {
+	let r = Math.min(t, n), i = Math.max(t, n);
+	return e.slice(r, i + 1).map((e) => e.id);
+}
+//#endregion
+//#region src/useFileManagerController.ts
+var ce = "application/x-file-manager-item";
+function V(e, t, n) {
+	let [r, a] = u(t), o = e !== void 0;
+	return [o ? e : r, i((e) => {
+		o || a(e), n?.(e);
+	}, [o, n])];
+}
+function le(e) {
+	let { nodes: t, canManage: n = !0, rootLabel: r = "My files", showDetails: a = !0, springLoadDelay: d = 500, isBusy: f = !1, onMove: p, onOpenFile: m, onOpenFolder: h, onUpload: g, onCreateFolder: _, onDelete: v, renderIcon: y, renderPreview: b, renderActions: x } = e, [S, C] = V(e.folderId, e.defaultFolderId ?? null, e.onFolderChange), [w, T] = V(e.selectedIds, e.defaultSelectedIds ?? [], e.onSelectionChange), [E, ee] = V(e.view, e.defaultView ?? "list", e.onViewChange), [A, j] = V(e.searchQuery, e.defaultSearchQuery ?? "", e.onSearchChange), M = o(A), [N, P] = u(() => /* @__PURE__ */ new Set()), [ie, F] = u(null), [I, L] = u(-1), [ae, R] = u(null), [z, B] = u(void 0), le = l(null), H = l(null), U = l([]), W = l(!1), G = l(0), K = l(null), q = l(null), J = l(null), Y = l(null), X = l(!1);
+	U.current = w;
+	let ue = z === void 0 ? S : z, Z = c(() => M.trim() && z === void 0 ? re(t, M, r) : te(t, S), [
+		M,
+		S,
+		t,
+		r,
+		z
+	]), de = c(() => z === void 0 ? Z : te(t, z), [
+		Z,
+		t,
+		z
+	]), fe = c(() => ne(t, ue), [t, ue]);
+	s(() => {
+		let e = fe.map((e) => e.id);
+		e.length && P((t) => {
+			let n = new Set(t), r = !1;
+			for (let t of e) n.has(t) || (n.add(t), r = !0);
+			return r ? n : t;
+		});
+	}, [fe]), s(() => {
+		L(-1), G.current = 0;
+	}, [
+		S,
+		M,
+		E
+	]), s(() => () => {
+		K.current && clearTimeout(K.current), J.current && clearTimeout(J.current);
+	}, []);
+	let Q = i(() => {
+		j("");
+	}, [j]), pe = i((e) => {
+		C(e), F(null), T([]), Q(), h?.(e);
+	}, [
+		Q,
+		h,
+		C,
+		T
+	]), $ = i(() => {
+		K.current &&= (clearTimeout(K.current), null), q.current = null, J.current &&= (clearTimeout(J.current), null), Y.current = null;
+	}, []), me = i((e) => {
+		N.has(e) || (H.current?.kind !== "folder" || H.current.id !== e) && q.current !== e && (K.current && clearTimeout(K.current), q.current = e, K.current = setTimeout(() => {
+			q.current = null, P((t) => {
+				if (t.has(e)) return t;
+				let n = new Set(t);
+				return n.add(e), n;
+			});
+		}, d));
+	}, [N, d]), he = i((e) => {
+		if (!H.current || (z === void 0 ? S : z) === e) return;
+		if (e !== null && H.current.kind === "folder") {
+			if (H.current.id === e) return;
+			let n = D(t, H.current.id);
+			if (n && O(n, e)) return;
+		}
+		let n = e === null ? "root" : `folder-${e}`;
+		Y.current !== n && (J.current && clearTimeout(J.current), Y.current = n, J.current = setTimeout(() => {
+			Y.current = null, B(e), R(null);
+		}, d));
+	}, [
+		S,
+		t,
+		z,
+		d
+	]), ge = i((e, t) => {
+		n && (W.current = !0, X.current = !1, t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData(ce, JSON.stringify({
+			id: e.id,
+			kind: e.kind
+		})), t.dataTransfer.setData("text/plain", `${e.kind}:${e.id}`), H.current = {
+			id: e.id,
+			kind: e.kind
+		}, U.current.includes(e.id) || (T([e.id]), F(e)));
+	}, [n, T]), _e = i(async (e, t) => {
+		if (e.preventDefault(), e.stopPropagation(), X.current = !0, R(null), $(), B(void 0), C(t), e.dataTransfer.files.length) {
+			await g?.(Array.from(e.dataTransfer.files), t);
+			return;
+		}
+		let r = H.current;
+		if (H.current = null, !r || !n) return;
+		let i = U.current, a = i.length > 1 && i.includes(r.id) ? i : [r.id];
+		await p?.(a, t), T([]), F(null);
+	}, [
+		n,
+		$,
+		p,
+		g,
+		C,
+		T
+	]), ve = i(() => {
+		$(), R(null), X.current || B(void 0), X.current = !1, H.current = null;
+	}, [$]), ye = i((e) => {
+		let r = e === "root" ? null : e, i = e === "root" ? null : D(t, e);
+		return oe({
+			canManage: n,
+			targetId: e,
+			setDropTargetId: R,
+			onDropOnFolder: _e,
+			onHoverExpand: () => {
+				i && k(i) && me(e), he(r);
+			},
+			clearExpandTimer: $
+		});
+	}, [
+		n,
+		$,
+		t,
+		_e,
+		me,
+		he
+	]), be = i((e, t) => {
+		e.stopPropagation(), P((e) => {
+			let n = new Set(e);
+			return n.has(t) ? n.delete(t) : n.add(t), n;
+		});
+	}, []), xe = i(() => {
+		P(/* @__PURE__ */ new Set());
+	}, []), Se = i((e, t) => {
+		if (W.current) {
+			W.current = !1;
+			return;
+		}
+		let n = Z.findIndex((t) => t.id === e.id);
+		if (t?.shiftKey && n >= 0) {
+			let t = se(Z, G.current, n);
+			L(n), T(t), F(e);
+			return;
+		}
+		if (t?.metaKey || t?.ctrlKey) {
+			n >= 0 && (L(n), G.current = n), T(U.current.includes(e.id) ? U.current.filter((t) => t !== e.id) : [...U.current, e.id]), F(e);
+			return;
+		}
+		n >= 0 && (L(n), G.current = n), T([e.id]), F(e);
+	}, [Z, T]), Ce = i((e) => {
+		e.kind === "folder" ? pe(e.id) : m?.(e.id);
+	}, [m, pe]);
+	return {
+		nodes: t,
+		folderId: S,
+		viewFolderId: ue,
+		expandedIds: N,
+		dropTargetId: ae,
+		selectedIds: w,
+		selectedNode: ie,
+		focusedIndex: I,
+		view: E,
+		searchQuery: A,
+		canManage: n,
+		rootLabel: r,
+		isBusy: f,
+		items: Z,
+		viewItems: de,
+		breadcrumbs: fe,
+		showDetails: a,
+		fileInputRef: le,
+		folderDropHandlers: ye,
+		openFolder: pe,
+		toggleExpanded: be,
+		collapseAll: xe,
+		selectItem: Se,
+		activateItem: Ce,
+		onDragStart: ge,
+		onInternalDragEnd: ve,
+		onDropOnFolder: _e,
+		setView: ee,
+		setSearchQuery: j,
+		handleKeyDown: i((e) => {
+			let t = e.target;
+			if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) {
+				e.key === "Escape" && Q();
+				return;
+			}
+			let r = z === void 0 ? Z : de;
+			if (!r.length) {
+				e.key === "Escape" && A && Q();
+				return;
+			}
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				let t = e.key === "ArrowDown" ? 1 : -1, n = Math.min(Math.max((I < 0 ? t > 0 ? -1 : 0 : I) + t, 0), r.length - 1);
+				L(n), e.shiftKey || (G.current = n);
+				let i = r[n];
+				if (!i) return;
+				e.shiftKey && T(se(r, G.current, n)), F(i);
+				return;
+			}
+			if (e.key === "Enter") {
+				e.preventDefault();
+				let t = r[I];
+				t && Ce(t);
+				return;
+			}
+			if (e.key === " ") {
+				e.preventDefault();
+				let t = r[I];
+				t && Se(t);
+				return;
+			}
+			if (e.key === "Escape") {
+				if (A) {
+					Q();
+					return;
+				}
+				F(null), T([]);
+				return;
+			}
+			if ((e.key === "Delete" || e.key === "Backspace") && n) {
+				let t = w.length > 0 ? w : r[I] ? [r[I].id] : [];
+				if (!t.length) return;
+				e.preventDefault(), v?.(t);
+			}
+		}, [
+			Ce,
+			n,
+			Q,
+			I,
+			Z,
+			v,
+			A,
+			Se,
+			w,
+			T,
+			z,
+			de
+		]),
+		renderIcon: y,
+		renderPreview: b,
+		renderActions: x,
+		onCreateFolder: _,
+		onUpload: g
+	};
+}
+//#endregion
+//#region src/FileManager.tsx
+function H(e) {
+	let r = le(e), i = r.showDetails ? "grid-cols-[216px_minmax(0,1fr)_280px]" : "grid-cols-[216px_minmax(0,1fr)]";
+	return /* @__PURE__ */ t(x.Provider, {
+		value: r,
+		children: /* @__PURE__ */ n("div", {
+			className: C("rfm-root relative grid h-full min-h-0 overflow-hidden outline-none", i, e.className),
+			tabIndex: 0,
+			"aria-label": "File manager",
+			onKeyDown: r.handleKeyDown,
+			onDragEnd: r.onInternalDragEnd,
+			children: [
+				/* @__PURE__ */ t(z, {}),
+				/* @__PURE__ */ t(I, {}),
+				r.showDetails && /* @__PURE__ */ t(R, {})
+			]
+		})
+	});
+}
+//#endregion
+export { H as FileManager, O as folderContainsId, oe as folderDropTargetHandlers, k as folderHasChildFolders, ne as getBreadcrumbs, M as getExtension, A as getFolderContents, D as getNodeById, te as listFolder, N as moveNodes, re as searchNodes };