@ahrowe/ui 0.2.2 → 0.2.4

package/dist/index.mjs

@@ -2484,56 +2484,62 @@ function wn(e, t) {
 	let n = t.find((t) => t.value === e);
 	return n ? n.label ?? n.value : e;
 }
-function Tn({ label: e = "", value: t = "", formValidator: n = null, items: r = [], className: a, style: o, classNames: s, styles: c, onSelect: l = () => null, onChange: u, placeholder: m = "", ...h }) {
-	let g = Cn(t, n), [_, v] = f(() => wn(g, r)), [y, b] = f(g), [x, S] = f(!1), [C, w] = f(null), T = d(null);
-	if (g !== y) {
-		b(g);
-		let e = r.find((e) => e.value === g);
-		e && v(e.label ?? e.value);
-	}
-	let E = r.filter((e) => (e.label ?? e.value).toLowerCase().includes(_.toLowerCase())), D = () => {
-		T.current &&= (clearTimeout(T.current), null), S(!0);
-	}, O = () => {
-		T.current = setTimeout(() => {
-			S(!1), T.current = null;
+function Tn({ label: e = "", value: t = "", formValidator: n = null, items: r = [], allowCustomValue: a = !1, className: o, style: s, classNames: c, styles: l, onSelect: u = () => null, onChange: m, placeholder: h = "", ...g }) {
+	let _ = Cn(t, n), [v, y] = f(() => wn(_, r)), [b, x] = f(_), [S, C] = f(!1), [w, T] = f(null), E = d(null);
+	if (_ !== b) {
+		x(_);
+		let e = r.find((e) => e.value === _);
+		e ? y(e.label ?? e.value) : a && y(_);
+	}
+	let D = r.filter((e) => (e.label ?? e.value).toLowerCase().includes(v.toLowerCase())), O = () => {
+		E.current &&= (clearTimeout(E.current), null), C(!0);
+	}, k = () => {
+		E.current = setTimeout(() => {
+			C(!1), E.current = null, a || y(wn(_, r));
 		}, 100);
-	}, k = i((e) => {
-		v(e.label ?? e.value), n && n.set(e.value), u && u(e.value), l(e.value);
+	}, A = i((e) => {
+		y(e.label ?? e.value), C(!1), T(null), n && n.set(e.value), m && m(e.value), u(e.value);
 	}, [
 		n,
-		u,
-		l
-	]), A = i((e) => {
-		e.key === "ArrowUp" ? (e.preventDefault(), w((e) => e ? e - 1 : null)) : e.key === "ArrowDown" ? (e.preventDefault(), w((e) => e === null ? 0 : Math.min(e + 1, E.length - 1))) : e.key === "Enter" && C !== null && E[C] && k(E[C]);
+		m,
+		u
+	]), j = i((e) => {
+		e.key === "ArrowUp" ? (e.preventDefault(), T((e) => e ? e - 1 : null)) : e.key === "ArrowDown" ? (e.preventDefault(), T((e) => e === null ? 0 : Math.min(e + 1, D.length - 1))) : e.key === "Enter" && (w !== null && D[w] ? A(D[w]) : a && (C(!1), T(null)));
 	}, [
-		E,
-		C,
-		k
+		D,
+		w,
+		A,
+		a
 	]);
 	return /* @__PURE__ */ G("div", {
-		...h,
-		className: p(Sn.inputDropdown, s?.root, a),
+		...g,
+		className: p(Sn.inputDropdown, c?.root, o),
 		style: {
-			...c?.root,
-			...o
+			...l?.root,
+			...s
 		},
-		onFocus: D,
-		onBlur: O,
-		onKeyDown: A,
+		onFocus: O,
+		onBlur: k,
+		onKeyDown: j,
 		children: [/* @__PURE__ */ W(ut, {
 			label: e,
-			value: _,
+			value: v,
 			onChange: (e) => {
-				v(e), w(null);
+				if (y(e), T(null), C(!0), a) n && n.set(e), m && m(e);
+				else {
+					let t = r.find((t) => (t.label ?? t.value).toLowerCase() === e.toLowerCase());
+					t && (n && n.set(t.value), m && m(t.value), u(t.value));
+				}
 			},
-			placeholder: m
+			placeholder: h
 		}), /* @__PURE__ */ W("div", {
-			className: p(Sn.dropdown, { [Sn.dropdownShown]: x }, s?.dropdown),
-			style: c?.dropdown,
-			children: x && E.map((e, t) => /* @__PURE__ */ W("div", {
-				className: p(Sn.dropdownItem, C === t && Sn.dropdownItemHighlighted, s?.item),
-				style: c?.item,
-				onClick: () => k(e),
+			className: p(Sn.dropdown, { [Sn.dropdownShown]: S }, c?.dropdown),
+			style: l?.dropdown,
+			children: S && D.map((e, t) => /* @__PURE__ */ W("div", {
+				className: p(Sn.dropdownItem, w === t && Sn.dropdownItemHighlighted, c?.item),
+				style: l?.item,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => A(e),
 				children: e.label ?? e.value
 			}, `${t}_${e.label}_${e.value}`))
 		})]
@@ -5027,6 +5033,9 @@ var pi = {
 	"toast-dismissing": "toast-dismissing_xKmB-",
 	toastDismissing: "toast-dismissing_xKmB-",
 	toastFadeOut: "toastFadeOut_cvHYp",
+	"toast-paused": "toast-paused_NPmT4",
+	toastPaused: "toast-paused_NPmT4",
+	toastProgressBar: "toastProgressBar_6vBs6",
 	"toast-info": "toast-info_RlLli",
 	toastInfo: "toast-info_RlLli",
 	toastIcon: "toastIcon_xU1nA",
@@ -5040,7 +5049,6 @@ var pi = {
 	toastDefault: "toast-default_RTt2L",
 	toastContent: "toastContent_gvyIv",
 	toastCloseButton: "toastCloseButton_n-YST",
-	toastProgressBar: "toastProgressBar_6vBs6",
 	toastShrink: "toastShrink_h89HS"
 }, mi = {
 	info: S,
@@ -5050,41 +5058,48 @@ var pi = {
 	default: h
 };
 function hi({ item: e, isBottom: t, onDismiss: n }) {
-	let { id: r, content: i, options: o, dismissing: s } = e, { duration: c, showRemainingTime: l, showCloseButton: u, type: d, classNames: f, styles: h } = o;
+	let { id: r, content: i, options: o, dismissing: s } = e, { duration: c, showRemainingTime: l, showCloseButton: u, pauseOnHover: h, type: g, classNames: _, styles: v } = o, [y, b] = f(!1), [x, S] = f(!1), C = h && (y || x), w = d(c);
 	return a(() => {
-		if (c === 0) return;
-		let e = setTimeout(() => n(r), c);
-		return () => clearTimeout(e);
+		if (c === 0 || C) return;
+		let e = Date.now(), t = setTimeout(() => n(r), w.current);
+		return () => {
+			clearTimeout(t), w.current -= Date.now() - e;
+		};
 	}, [
 		r,
 		c,
-		n
+		n,
+		C
 	]), /* @__PURE__ */ G("div", {
-		className: p(pi.toast, t ? pi.toastBottom : null, pi[`toast-${d}`], s && pi.toastDismissing, f?.root),
-		style: h?.root,
+		className: p(pi.toast, t ? pi.toastBottom : null, pi[`toast-${g}`], s && pi.toastDismissing, C && pi.toastPaused, _?.root),
+		style: v?.root,
+		onMouseEnter: h ? () => b(!0) : void 0,
+		onMouseLeave: h ? () => b(!1) : void 0,
+		onFocus: h ? () => S(!0) : void 0,
+		onBlur: h ? () => S(!1) : void 0,
 		children: [
 			/* @__PURE__ */ W(m, {
-				icon: mi[d],
-				className: p(pi.toastIcon, f?.icon),
-				style: h?.icon
+				icon: mi[g],
+				className: p(pi.toastIcon, _?.icon),
+				style: v?.icon
 			}),
 			/* @__PURE__ */ W("div", {
-				className: p(pi.toastContent, f?.content),
-				style: h?.content,
+				className: p(pi.toastContent, _?.content),
+				style: v?.content,
 				children: i
 			}),
 			u && /* @__PURE__ */ W(Be, {
 				icon: H,
 				onClick: () => n(r),
-				className: p(pi.toastCloseButton, f?.closeButton),
-				style: h?.closeButton,
+				className: p(pi.toastCloseButton, _?.closeButton),
+				style: v?.closeButton,
 				"aria-label": "Close"
 			}),
 			l && c > 0 && /* @__PURE__ */ W("div", {
-				className: p(pi.toastProgressBar, f?.progressBar),
+				className: p(pi.toastProgressBar, _?.progressBar),
 				style: {
 					"--toast-duration": `${c}ms`,
-					...h?.progressBar
+					...v?.progressBar
 				}
 			})
 		]
@@ -5113,60 +5128,63 @@ var bi = {
 	duration: 4e3,
 	showRemainingTime: !0,
 	showCloseButton: !0,
-	allowStacking: !0
+	allowStacking: !0,
+	pauseOnHover: !0
 }, xi = 220;
 function Si(e) {
 	return pi[`container-${e}`];
 }
-function Ci({ children: e, position: t = bi.position, duration: n = bi.duration, showRemainingTime: r = bi.showRemainingTime, showCloseButton: o = bi.showCloseButton, allowStacking: s = bi.allowStacking }) {
-	let [c, l] = f([]), u = d(0), m = i((e) => {
-		l((t) => t.map((t) => t.id === e ? {
+function Ci({ children: e, position: t = bi.position, duration: n = bi.duration, showRemainingTime: r = bi.showRemainingTime, showCloseButton: o = bi.showCloseButton, allowStacking: s = bi.allowStacking, pauseOnHover: c = bi.pauseOnHover }) {
+	let [l, u] = f([]), m = d(0), h = i((e) => {
+		u((t) => t.map((t) => t.id === e ? {
 			...t,
 			dismissing: !0
 		} : t)), setTimeout(() => {
-			l((t) => t.filter((t) => t.id !== e));
+			u((t) => t.filter((t) => t.id !== e));
 		}, xi);
-	}, []), h = i((e, i) => {
+	}, []), g = i((e, i) => {
 		let a = {
 			position: i?.position ?? t,
 			duration: i?.duration ?? n,
 			showRemainingTime: i?.showRemainingTime ?? r,
 			showCloseButton: i?.showCloseButton ?? o,
+			pauseOnHover: i?.pauseOnHover ?? c,
 			type: i?.type ?? "default",
 			classNames: i?.classNames,
 			styles: i?.styles
 		};
-		u.current += 1;
-		let c = {
-			id: `toast-${u.current}`,
+		m.current += 1;
+		let l = {
+			id: `toast-${m.current}`,
 			content: e,
 			options: a,
 			dismissing: !1
 		};
-		l((e) => !s && e.length > 0 ? (setTimeout(() => {
-			l([c]);
+		u((e) => !s && e.length > 0 ? (setTimeout(() => {
+			u([l]);
 		}, xi), e.map((e) => ({
 			...e,
 			dismissing: !0
-		}))) : [...e, c]);
+		}))) : [...e, l]);
 	}, [
 		t,
 		n,
 		r,
 		o,
-		s
+		s,
+		c
 	]);
-	a(() => (_i(h), () => vi()), [h]);
-	let g = c.reduce((e, t) => {
+	a(() => (_i(g), () => vi()), [g]);
+	let _ = l.reduce((e, t) => {
 		let n = t.options.position;
 		return e[n] || (e[n] = []), e[n].push(t), e;
 	}, {});
-	return /* @__PURE__ */ G(U, { children: [e, /* @__PURE__ */ W(Ve, { children: Object.entries(g).map(([e, t]) => /* @__PURE__ */ W("div", {
+	return /* @__PURE__ */ G(U, { children: [e, /* @__PURE__ */ W(Ve, { children: Object.entries(_).map(([e, t]) => /* @__PURE__ */ W("div", {
 		className: p(pi.container, Si(e)),
 		children: t.map((t) => /* @__PURE__ */ W(hi, {
 			item: t,
 			isBottom: e.startsWith("bottom"),
-			onDismiss: m
+			onDismiss: h
 		}, t.id))
 	}, e)) })] });
 }