haze-ui 1.26.0 → 1.28.0

package/dist/components/Tree/TreeItem.js

@@ -2,113 +2,149 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { matchRanges as n } from "./utils.js";
 /* empty css                   */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useId as i } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react";
 //#region src/lib/components/Tree/TreeItem.tsx
-var a = "haze-TreeItem__item", o = "haze-TreeItem__blockItem", s = "haze-TreeItem__selectedStyle", c = "haze-TreeItem__disabledStyle", l = "haze-TreeItem__switcher", u = "haze-TreeItem__switcherExpanded", d = "haze-TreeItem__checkbox", f = "haze-TreeItem__checkboxChecked", p = "haze-TreeItem__checkboxHalfChecked", m = "haze-TreeItem__nodeIcon", h = "haze-TreeItem__title", g = "haze-TreeItem__loadingIcon", _ = "haze-TreeItem__indentLine", v = "haze-TreeItem__indentLineWithBorder", y = () => /* @__PURE__ */ n("svg", {
+var o = "haze-TreeItem__item", s = "haze-TreeItem__blockItem", c = "haze-TreeItem__selectedStyle", l = "haze-TreeItem__disabledStyle", u = "haze-TreeItem__switcher", d = "haze-TreeItem__switcherExpanded", f = "haze-TreeItem__checkbox", p = "haze-TreeItem__checkboxChecked", m = "haze-TreeItem__checkboxHalfChecked", h = "haze-TreeItem__nodeIcon", g = "haze-TreeItem__title", _ = "haze-TreeItem__loadingIcon", v = "haze-TreeItem__mark", y = "haze-TreeItem__loadFailedNote", b = "haze-TreeItem__indentLine", ee = "haze-TreeItem__indentLineWithBorder", te = () => /* @__PURE__ */ r("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: n("path", { d: "M4 2l4 4-4 4" })
-}), b = () => /* @__PURE__ */ n("svg", {
+	children: r("path", { d: "M4 2l4 4-4 4" })
+}), ne = () => /* @__PURE__ */ r("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	children: n("path", { d: "M2 6l3 3 5-5" })
-}), x = () => /* @__PURE__ */ n("svg", {
+	children: r("path", { d: "M2 6l3 3 5-5" })
+}), re = () => /* @__PURE__ */ r("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
 	strokeWidth: "2",
 	strokeLinecap: "round",
-	children: n("path", { d: "M2 6h8" })
-}), S = () => /* @__PURE__ */ n("svg", {
+	children: r("path", { d: "M2 6h8" })
+}), x = () => /* @__PURE__ */ r("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: n("path", { d: "M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9z" })
-}), C = () => /* @__PURE__ */ r("svg", {
+	children: r("path", { d: "M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5v-9z" })
+}), S = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: [/* @__PURE__ */ n("path", { d: "M.5 5l.5-.5A.5.5 0 0 1 1.5 4H4l1-1h4.5a1.5 1.5 0 0 1 1.5 1.5v1H14a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5.5L.5 5z" }), /* @__PURE__ */ n("path", {
+	children: [/* @__PURE__ */ r("path", { d: "M.5 5l.5-.5A.5.5 0 0 1 1.5 4H4l1-1h4.5a1.5 1.5 0 0 1 1.5 1.5v1H14a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5.5L.5 5z" }), /* @__PURE__ */ r("path", {
 		d: "M1 6v6h14V6H1z",
 		opacity: "0.5"
 	})]
-}), w = () => /* @__PURE__ */ n("svg", {
+}), C = () => /* @__PURE__ */ r("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: n("path", { d: "M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414a2 2 0 0 0-.586-1.414L10.586.172A2 2 0 0 0 9.172 0H4zm1 1a1 1 0 0 1 1-1h3.172a1 1 0 0 1 .707.293l2.121 2.121a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1z" })
-}), T = () => /* @__PURE__ */ r("svg", {
+	children: r("path", { d: "M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.414a2 2 0 0 0-.586-1.414L10.586.172A2 2 0 0 0 9.172 0H4zm1 1a1 1 0 0 1 1-1h3.172a1 1 0 0 1 .707.293l2.121 2.121a1 1 0 0 1 .293.707V13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V1z" })
+}), w = () => /* @__PURE__ */ i("svg", {
 	viewBox: "0 0 16 16",
 	fill: "currentColor",
-	children: [/* @__PURE__ */ n("path", {
+	children: [/* @__PURE__ */ r("path", {
 		d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1a6 6 0 0 1 0 12V2z",
 		opacity: "0.3"
-	}), /* @__PURE__ */ n("path", { d: "M8 1a7 7 0 0 1 7 7h-2a5 5 0 0 0-5-5V1z" })]
+	}), /* @__PURE__ */ r("path", { d: "M8 1a7 7 0 0 1 7 7h-2a5 5 0 0 0-5-5V1z" })]
+}), T = () => /* @__PURE__ */ i("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: [/* @__PURE__ */ r("path", { d: "M13.5 8a5.5 5.5 0 1 1-1.61-3.89" }), /* @__PURE__ */ r("path", { d: "M13.5 1.5v3h-3" })]
 });
-function E({ node: E, level: D, expanded: O, selected: k, checked: A, disabled: j, checkable: M, selectable: N, blockNode: P, showLine: F, showIcon: I, switcherIcon: L, loadingIcon: R, loading: z, titleRender: B, iconRender: V, isLast: H, onToggle: U, onSelect: W, onCheck: G }) {
-	let K = !!E.children?.length, q = E.isLeaf ?? !K, J = t("tree"), Y = `haze-tree-title-${i()}`, X = Array.from({ length: D }, (e, t) => ({ showLine: F && !H[t] })), Z = B ? B(E) : E.title, Q = V ? V(E) : E.icon;
-	return /* @__PURE__ */ n("div", { children: r("div", {
+function E(e, t) {
+	let i = n(e, t);
+	if (i.length === 0) return e;
+	let a = [], o = 0;
+	return i.forEach(([t, n], i) => {
+		t > o && a.push(e.slice(o, t)), a.push(/* @__PURE__ */ r("mark", {
+			className: v,
+			children: e.slice(t, n)
+		}, i)), o = n;
+	}), o < e.length && a.push(e.slice(o)), a;
+}
+function D({ node: n, level: v, expanded: D, selected: O, checked: k, disabled: A, checkable: j, selectable: M, blockNode: N, showLine: P, showIcon: F, switcherIcon: I, loadingIcon: ie, loading: L, loadable: R, loadFailed: z, searchValue: B, titleRender: V, iconRender: H, isLast: U, tabIndex: W, onToggle: G, onSelect: K, onCheck: q, onRetry: J }) {
+	let Y = !!n.children?.length, X = n.isLeaf ?? (!Y && !R), Z = t("tree"), Q = `haze-tree-title-${a()}`, ae = Array.from({ length: v }, (e, t) => ({ showLine: P && !U[t] })), oe = V ? V(n) : typeof n.title == "string" && B ? E(n.title, B) : n.title, $ = H ? H(n) : n.icon;
+	return /* @__PURE__ */ r("div", { children: i("div", {
 		role: "treeitem",
-		"aria-selected": k,
-		"aria-expanded": q ? void 0 : O,
-		"aria-level": D + 1,
+		tabIndex: W,
+		"data-tree-key": n.key,
+		"aria-selected": O,
+		"aria-expanded": X ? void 0 : D,
+		"aria-level": v + 1,
+		"aria-busy": L || void 0,
 		onClick: () => {
-			j || E.disabled || (N && W(), q || U());
+			A || n.disabled || (M && K(), X || G());
 		},
 		className: e([
-			a,
-			P && o,
-			k && N && s,
-			(j || E.disabled) && c
+			o,
+			N && s,
+			O && M && c,
+			(A || n.disabled) && l
 		]),
 		children: [
-			X.map((t, r) => /* @__PURE__ */ n("span", { className: e([_, t.showLine && v]) }, r)),
-			!q && /* @__PURE__ */ n("span", {
+			ae.map((t, n) => /* @__PURE__ */ r("span", { className: e([b, t.showLine && ee]) }, n)),
+			!X && /* @__PURE__ */ r("span", {
 				role: "button",
-				"aria-label": O ? J.collapse : J.expand,
+				"aria-label": D ? Z.collapse : Z.expand,
 				onClick: (e) => {
-					e.stopPropagation(), U();
+					e.stopPropagation(), G();
 				},
-				className: e([l, O && u]),
-				children: z ? /* @__PURE__ */ n("span", {
-					className: g,
-					children: R ?? /* @__PURE__ */ n(T, {})
-				}) : L || /* @__PURE__ */ n(y, {})
+				className: e([u, D && d]),
+				children: L ? /* @__PURE__ */ r("span", {
+					className: _,
+					children: ie ?? /* @__PURE__ */ r(w, {})
+				}) : I || /* @__PURE__ */ r(te, {})
 			}),
-			q && /* @__PURE__ */ n("span", { className: e(_) }),
-			M && /* @__PURE__ */ r("span", {
+			X && /* @__PURE__ */ r("span", { className: e(b) }),
+			j && /* @__PURE__ */ i("span", {
 				role: "checkbox",
-				"aria-checked": A === "halfChecked" ? "mixed" : A === "checked",
-				"aria-labelledby": Y,
+				"aria-checked": k === "halfChecked" ? "mixed" : k === "checked",
+				"aria-labelledby": Q,
 				onClick: (e) => {
-					e.stopPropagation(), G();
+					e.stopPropagation(), q();
 				},
 				className: e([
-					d,
-					A === "checked" && f,
-					A === "halfChecked" && p,
-					E.disableCheckbox && c
+					f,
+					k === "checked" && p,
+					k === "halfChecked" && m,
+					n.disableCheckbox && l
 				]),
-				children: [A === "checked" && /* @__PURE__ */ n(b, {}), A === "halfChecked" && /* @__PURE__ */ n(x, {})]
+				children: [k === "checked" && /* @__PURE__ */ r(ne, {}), k === "halfChecked" && /* @__PURE__ */ r(re, {})]
 			}),
-			(I || Q) && /* @__PURE__ */ n("span", {
-				className: m,
-				children: Q ?? n(q ? w : O ? C : S, {})
-			}),
-			/* @__PURE__ */ n("span", {
+			(F || $) && /* @__PURE__ */ r("span", {
 				className: h,
-				id: Y,
-				children: Z
+				children: $ ?? r(X ? C : D ? S : x, {})
+			}),
+			/* @__PURE__ */ r("span", {
+				className: g,
+				id: Q,
+				children: oe
+			}),
+			z && /* @__PURE__ */ i("span", {
+				role: "button",
+				onClick: (e) => {
+					e.stopPropagation(), J?.();
+				},
+				className: e(y),
+				children: [
+					/* @__PURE__ */ r(T, {}),
+					Z.loadError,
+					" · ",
+					Z.retry
+				]
 			})
 		]
 	}) });
 }
 //#endregion
-export { E as default };
+export { D as default };

package/dist/components/Tree/utils.js

@@ -1,32 +1,104 @@
 "use client";
 //#region src/lib/components/Tree/utils.ts
-function e(t, n) {
-	for (let r of t) {
+function e(e, t, n) {
+	let r = new Set(t), i = [], a = (e, t, o, s) => {
+		e.forEach((c, l) => {
+			let u = l === e.length - 1, d = [...s, u];
+			i.push({
+				key: c.key,
+				node: c,
+				level: t,
+				parentKey: o,
+				isLast: d,
+				disabled: n || !!c.disabled
+			}), c.children?.length && r.has(c.key) && a(c.children, t + 1, c.key, d);
+		});
+	};
+	return a(e, 0, null, []), i;
+}
+function t(e, n) {
+	for (let r of e) {
 		if (r.key === n) return r;
 		if (r.children?.length) {
-			let t = e(r.children, n);
-			if (t) return t;
+			let e = t(r.children, n);
+			if (e) return e;
 		}
 	}
 	return null;
 }
-function t(t, n) {
-	let r = e(t, n);
+function n(e, n) {
+	let r = t(e, n);
 	if (!r?.children?.length) return [];
 	let i = [], a = (e) => {
 		for (let t of e) i.push(t.key), t.children?.length && a(t.children);
 	};
 	return a(r.children), i;
 }
-function n(e, t, r) {
+function r(e, t, n) {
 	for (let i of e) {
-		if (i.key === t) return r ?? null;
+		if (i.key === t) return n ?? null;
 		if (i.children?.length) {
-			let e = n(i.children, t, i.key);
+			let e = r(i.children, t, i.key);
 			if (e) return e;
 		}
 	}
 	return null;
 }
+function i(e, t) {
+	if (!t) return [];
+	let n = e.toLowerCase(), r = t.toLowerCase(), i = [], a = n.indexOf(r);
+	for (; a !== -1;) i.push([a, a + r.length]), a = n.indexOf(r, a + r.length);
+	return i;
+}
+function a(e, t) {
+	return typeof e.title == "string" && i(e.title, t).length > 0;
+}
+function o(e, t) {
+	if (!t) return null;
+	let n = [], r = [], i = (e) => {
+		let o = [];
+		for (let s of e) {
+			let e = s.children?.length ? i(s.children) : [], c = a(s, t);
+			c && n.push(s.key), (c || e.length !== 0) && (e.length > 0 ? (r.push(s.key), o.push({
+				...s,
+				children: e
+			})) : o.push(s));
+		}
+		return o;
+	};
+	return {
+		tree: i(e),
+		matchedKeys: n,
+		ancestorKeys: r
+	};
+}
+function s(e, t) {
+	if (Object.keys(t).length === 0) return e;
+	let n = (e) => e.map((e) => {
+		if (e.children?.length) return {
+			...e,
+			children: n(e.children)
+		};
+		let r = t[e.key];
+		return r ? r.length ? {
+			...e,
+			children: r
+		} : {
+			...e,
+			isLeaf: !0
+		} : e;
+	});
+	return n(e);
+}
+function c(e, n) {
+	let r = Object.entries(e);
+	if (r.length === 0) return e;
+	let i = {}, a = !1;
+	for (let [e, o] of r) {
+		let r = t(n, e);
+		r && !r.children?.length ? i[e] = o : a = !0;
+	}
+	return a ? i : e;
+}
 //#endregion
-export { e as findNodeByKey, t as getChildKeys, n as getParentKey };
+export { o as filterTreeByQuery, t as findNodeByKey, e as flattenVisibleTree, n as getChildKeys, r as getParentKey, i as matchRanges, s as mergeLoadedChildren, a as nodeTitleMatches, c as pruneLoadedChildren };

package/dist/components/Typography/Typography.js

@@ -1,5 +1,4 @@
 
-"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                     */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Typography/index.js

@@ -1,3 +1,2 @@
-"use client";
 import { Paragraph as e, Text as t, Title as n } from "./Typography.js";
 export { e as Paragraph, t as Text, n as Title };

package/dist/components/Upload/Upload.js

@@ -3,18 +3,34 @@ import e from "./UploadCore.js";
 import { jsx as t } from "react/jsx-runtime";
 import { useControl as n } from "react-use-control";
 //#region src/lib/components/Upload/Upload.tsx
-function r({ value: r, accept: i, multiple: a = !1, onChange: o, className: s, children: c }) {
-	let [l, u] = n(r, []);
+function r({ value: r, accept: i, droppable: a, beforeUpload: o, maxCount: s, multiple: c = !1, request: l, action: u, method: d, headers: f, name: p, data: m, manual: h, showUploadList: g, listType: _, removeLabel: v, directory: y, onStatusChange: b, onChange: x, className: S, children: C, ref: w }) {
+	let [T, E] = n(r, []);
 	return /* @__PURE__ */ t(e, {
-		value: l,
+		value: T,
 		onChange: (e) => {
-			let t = e.filter((e) => !l.includes(e));
-			u(e), o?.(t);
+			let t = e.filter((e) => !T.includes(e));
+			E(e), t.length > 0 && x?.(t);
 		},
 		accept: i,
-		multiple: a,
-		className: s,
-		children: c
+		droppable: a,
+		beforeUpload: o,
+		maxCount: s,
+		multiple: c,
+		request: l,
+		action: u,
+		method: d,
+		headers: f,
+		name: p,
+		data: m,
+		manual: h,
+		showUploadList: g,
+		listType: _,
+		removeLabel: v,
+		directory: y,
+		onStatusChange: b,
+		className: S,
+		ref: w,
+		children: C
 	});
 }
 //#endregion

package/dist/components/Upload/UploadCore.js

@@ -2,44 +2,229 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import n from "./UploadList.js";
+import { createXhrRequest as r } from "./xhr-upload.js";
 /* empty css                     */
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useCallback as a, useRef as o } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useImperativeHandle as l, useRef as u, useState as d } from "react";
 //#region src/lib/components/Upload/UploadCore.tsx
-var s = "haze-UploadCore__dropzone", c = "haze-UploadCore__iconStyle", l = "haze-UploadCore__hiddenInput";
-function u({ value: u, onChange: d, accept: f, multiple: p = !1, className: m, children: h, ...g }) {
-	let _ = o(null), v = t("upload"), y = a((e) => {
-		e.length !== 0 && d(p ? [...u, ...e] : e);
+var ee = "haze-UploadCore__zoneBase", te = "haze-UploadCore__dropArea", ne = "haze-UploadCore__clickArea", re = "haze-UploadCore__iconStyle", f = "haze-UploadCore__hiddenInput";
+function p(e) {
+	return e.toLowerCase().replace(/([./])jpg\b/g, "$1jpeg");
+}
+function m(e, t) {
+	let n = p(e.name), r = p(e.type);
+	return t.toLowerCase().split(",").map((e) => p(e.trim())).filter((e) => e.length > 0).some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
+}
+function h(e) {
+	return Math.max(0, Math.min(100, Math.round(e)));
+}
+var g = /* @__PURE__ */ new WeakMap(), _ = { n: 0 };
+function v(e) {
+	let t = g.get(e);
+	if (t) return t;
+	_.n += 1;
+	let n = `haze-upload-file-${_.n}`;
+	return g.set(e, n), n;
+}
+function y({ value: p, onChange: g, accept: _, droppable: y = !0, beforeUpload: b, maxCount: x, multiple: S = !1, request: C, action: w, method: T, headers: E, name: D, data: O, manual: k = !1, showUploadList: A, listType: ie, removeLabel: ae, directory: oe, onStatusChange: j, className: se, children: ce, ref: le, ...ue }) {
+	let M = u(null), [de, N] = d(!1), [P, F] = d([]), I = t("upload"), L = C ?? (w == null ? void 0 : r({
+		action: w,
+		method: T,
+		headers: E,
+		name: D,
+		data: O
+	})), R = L != null, z = A != null && A !== !1, B = R || z, V = u(p);
+	c(() => {
+		V.current = p;
+	});
+	let H = u(P);
+	c(() => {
+		H.current = P;
+	});
+	let U = u(L);
+	c(() => {
+		U.current = L;
+	});
+	let W = u(g);
+	c(() => {
+		W.current = g;
+	});
+	let G = u(j);
+	c(() => {
+		G.current = j;
+	});
+	let K = u(/* @__PURE__ */ new Map()), q = u(/* @__PURE__ */ new Set()), J = u(!0);
+	c(() => {
+		J.current = !0;
+		let e = K.current;
+		return () => {
+			J.current = !1, e.forEach((e) => e.abort()), e.clear();
+		};
+	}, []);
+	let Y = s((e) => {
+		let t = U.current;
+		if (!t || !J.current) return;
+		let n = H.current.find((t) => t.file === e);
+		if (!n || K.current.has(n.uid)) return;
+		let { uid: r } = n, i = new AbortController();
+		K.current.set(r, i), q.current.add(r), F((e) => e.map((e) => e.uid === r ? {
+			...e,
+			status: "uploading",
+			percent: 0
+		} : e)), t(e, {
+			signal: i.signal,
+			onProgress: (e) => {
+				F((t) => t.map((t) => t.uid === r && t.status === "uploading" ? {
+					...t,
+					percent: h(e)
+				} : t));
+			}
+		}).then(() => {
+			F((e) => e.map((e) => e.uid === r && e.status === "uploading" ? {
+				...e,
+				status: "success",
+				percent: 100
+			} : e));
+		}).catch((e) => {
+			F((t) => t.map((t) => t.uid !== r || t.status !== "uploading" ? t : i.signal.aborted || e instanceof DOMException && e.name === "AbortError" ? {
+				...t,
+				status: "idle",
+				percent: 0
+			} : {
+				...t,
+				status: "error"
+			}));
+		}).finally(() => {
+			K.current.delete(r);
+		});
+	}, []);
+	c(() => {
+		if (!B) {
+			F((e) => e.length > 0 ? [] : e);
+			return;
+		}
+		let e = new Set(p.map((e) => v(e)));
+		q.current.forEach((t) => {
+			e.has(t) || q.current.delete(t);
+		}), F((e) => {
+			if (e.length === 0 && p.length === 0) return e;
+			let t = new Map(e.map((e) => [e.file, e])), n = p.length !== e.length, r = p.map((e) => {
+				let r = t.get(e);
+				return r ? (t.delete(e), r) : (n = !0, {
+					uid: v(e),
+					file: e,
+					status: "idle",
+					percent: 0
+				});
+			});
+			return n || t.size > 0 ? r : e;
+		});
+	}, [p, B]), c(() => {
+		R && !k && P.filter((e) => e.status === "idle" && !q.current.has(e.uid)).forEach((e) => Y(e.file));
+	}, [
+		P,
+		R,
+		k,
+		Y
+	]), c(() => {
+		let e = G.current;
+		e && B && e(P.map(({ file: e, status: t, percent: n }) => ({
+			file: e,
+			status: t,
+			percent: n
+		})));
+	}, [P, B]), l(le, () => ({
+		upload: (e) => {
+			if (e !== void 0) {
+				Y(e);
+				return;
+			}
+			H.current.filter((e) => e.status === "idle" || e.status === "error").forEach((e) => Y(e.file));
+		},
+		uploadAll: () => {
+			H.current.filter((e) => e.status !== "uploading").forEach((e) => Y(e.file));
+		},
+		abort: () => {
+			K.current.forEach((e) => e.abort());
+		},
+		clear: () => {
+			K.current.forEach((e) => e.abort()), K.current.clear(), J.current && W.current([]);
+		}
+	}), [Y]);
+	let X = s((e) => {
+		let t = H.current.find((t) => t.file === e);
+		t && K.current.get(t.uid)?.abort();
+	}, []), Z = s((e) => {
+		X(e), J.current && g(V.current.filter((t) => t !== e));
+	}, [X, g]), fe = s((e) => {
+		H.current.find((t) => t.file === e)?.status === "error" && Y(e);
+	}, [Y]), Q = s((e) => {
+		if (e.length === 0) return;
+		let t = (e) => {
+			if (e.length === 0) return;
+			let t = S ? [...V.current, ...e] : e;
+			g(x == null ? t : t.slice(0, x));
+		};
+		if (!b) {
+			t(e);
+			return;
+		}
+		Promise.all(e.map((e) => Promise.resolve(b(e)))).then((n) => {
+			t(e.filter((e, t) => n[t]));
+		}).catch(() => void 0);
 	}, [
-		u,
-		p,
-		d
-	]), b = a(() => {
-		_.current?.click();
-	}, []), x = a((e) => {
-		y(Array.from(e.target.files || [])), e.target.value = "";
-	}, [y]), S = a((e) => {
-		e.preventDefault(), y(Array.from(e.dataTransfer.files));
-	}, [y]), C = a((e) => {
-		e.preventDefault();
+		S,
+		x,
+		b,
+		g
+	]), pe = s(() => {
+		M.current?.click();
+	}, []), me = oe ? {
+		webkitdirectory: "",
+		directory: ""
+	} : {}, he = s((e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), M.current?.click());
+	}, []), ge = s((e) => {
+		Q(Array.from(e.target.files || [])), e.target.value = "";
+	}, [Q]), $ = s((e) => {
+		e.preventDefault(), N(!1);
+		let t = Array.from(e.dataTransfer.files);
+		Q(_ ? t.filter((e) => m(e, _)) : t);
+	}, [Q, _]), _e = s((e) => {
+		e.preventDefault(), N(!0);
+	}, []), ve = s((e) => {
+		e.preventDefault(), N(!0);
+	}, []), ye = s((e) => {
+		e.currentTarget.contains(e.relatedTarget) || N(!1);
 	}, []);
-	return /* @__PURE__ */ i("div", {
-		...g,
-		onClick: b,
-		onDrop: S,
-		onDragOver: C,
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
+		"aria-label": I.label,
+		...ue,
+		"data-dragover": y && de ? "true" : void 0,
+		onClick: pe,
+		onKeyDown: he,
+		onDrop: y ? $ : void 0,
+		onDragOver: y ? _e : void 0,
+		onDragEnter: y ? ve : void 0,
+		onDragLeave: y ? ye : void 0,
 		role: "button",
 		tabIndex: 0,
-		className: e([s, m]),
-		children: [/* @__PURE__ */ r("input", {
-			ref: _,
+		className: e([
+			ee,
+			y ? te : ne,
+			se
+		]),
+		children: [/* @__PURE__ */ a("input", {
+			ref: M,
 			type: "file",
-			accept: f,
-			multiple: p,
-			onChange: x,
+			accept: _,
+			multiple: S,
+			...me,
+			onChange: ge,
 			hidden: !0,
-			className: e([l])
-		}), h || /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("svg", {
+			className: e([f])
+		}), ce || /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("svg", {
 			width: "40",
 			height: "40",
 			viewBox: "0 0 24 24",
@@ -48,19 +233,27 @@ function u({ value: u, onChange: d, accept: f, multiple: p = !1, className: m, c
 			strokeWidth: "2",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
-			className: e([c]),
+			className: e([re]),
 			children: [
-				/* @__PURE__ */ r("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-				/* @__PURE__ */ r("polyline", { points: "17 8 12 3 7 8" }),
-				/* @__PURE__ */ r("line", {
+				/* @__PURE__ */ a("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+				/* @__PURE__ */ a("polyline", { points: "17 8 12 3 7 8" }),
+				/* @__PURE__ */ a("line", {
 					x1: "12",
 					y1: "3",
 					x2: "12",
 					y2: "15"
 				})
 			]
-		}), /* @__PURE__ */ r("div", { children: v.hint })] })]
-	});
+		}), /* @__PURE__ */ a("div", { children: y ? I.hint : I.clickHint })] })]
+	}), z && P.length > 0 && /* @__PURE__ */ a(n, {
+		entries: P,
+		listType: ie,
+		removeLabel: ae,
+		itemRender: typeof A == "object" ? A.itemRender : void 0,
+		onRemove: Z,
+		onRetry: fe,
+		onCancel: Z
+	})] });
 }
 //#endregion
-export { u as default };
+export { y as default };