@serkonda7/solid-components 0.3.0 → 0.3.1

package/dist/combobox.d.ts

@@ -44,7 +44,8 @@ export interface ComboboxProps {
 /**
  * Searchable dropdown of `options`, with an optional leading empty choice.
  * A text combobox: typing filters the options by label and detail, arrow keys
- * move the highlight (wrapping around), Enter picks it, Escape closes. The
- * input shows the selected label while closed; the value sits in `data-value`.
+ * move the highlight (wrapping around), Enter picks it, Tab picks it and moves
+ * focus on, Escape closes. The input shows the selected label while closed;
+ * the value sits in `data-value`.
  */
 export declare function Combobox(props: ComboboxProps): JSX.Element;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Dynamic as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, mergeProps as s, setAttribute as c, spread as l, style as u, template as d, use as f } from "solid-js/web";
-import { For as p, Show as m, children as ee, createEffect as h, createMemo as g, createSignal as _, createUniqueId as v, on as y, onCleanup as b, onMount as x, splitProps as S, untrack as C } from "solid-js";
+import { For as p, Show as m, children as h, createEffect as g, createMemo as _, createSignal as v, createUniqueId as ee, on as y, onCleanup as b, onMount as x, splitProps as S, untrack as C } from "solid-js";
 //#region node_modules/@tabler/icons-solidjs/dist/source/defaultAttributes.js
 var w = {
 	outline: {
@@ -57,18 +57,18 @@ var w = {
 		})();
 	};
 	return u.displayName = `${i}`, u;
-}, te = D("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), O = D("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), ne = /*#__PURE__*/ d("<span class=combobox-detail>"), re = /*#__PURE__*/ d("<div role=option class=combobox-option><span class=combobox-option-label>"), k = /*#__PURE__*/ d("<span class=combobox-option-icon aria-hidden=true>"), A = /*#__PURE__*/ d("<div role=option class=\"combobox-option combobox-option-add\">"), j = /*#__PURE__*/ d("<div class=combobox-list role=listbox>"), M = /*#__PURE__*/ d("<div class=combobox-empty>"), N = /*#__PURE__*/ d("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), P = /*#__PURE__*/ d("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), F = /*#__PURE__*/ d("<span class=combobox-icon aria-hidden=true>");
+}, te = D("outline", "chevron-down", "ChevronDown", [["path", { d: "M6 9l6 6l6 -6" }]]), O = D("outline", "plus", "Plus", [["path", { d: "M12 5l0 14" }], ["path", { d: "M5 12l14 0" }]]), ne = /*#__PURE__*/ d("<span class=combobox-detail>"), k = /*#__PURE__*/ d("<div role=option class=combobox-option><span class=combobox-option-label>"), A = /*#__PURE__*/ d("<span class=combobox-option-icon aria-hidden=true>"), re = /*#__PURE__*/ d("<div role=option class=\"combobox-option combobox-option-add\">"), j = /*#__PURE__*/ d("<div class=combobox-list role=listbox>"), M = /*#__PURE__*/ d("<div class=combobox-empty>"), N = /*#__PURE__*/ d("<span class=combobox-value aria-hidden=true><span class=combobox-option-label></span><span class=combobox-detail>"), P = /*#__PURE__*/ d("<div><input class=combobox-input role=combobox aria-autocomplete=list autocomplete=off>"), F = /*#__PURE__*/ d("<span class=combobox-icon aria-hidden=true>");
 function I(r) {
-	let s, l, u = v(), d = () => r.id ?? u, ee = () => `${d()}-listbox`, y = (e) => `${d()}-option-${e}`, [b, S] = _(!1), [C, w] = _(""), [T, E] = _(0), D = g(() => r.emptyLabel === void 0 ? r.options : [{
+	let s, l, u = ee(), d = () => r.id ?? u, h = () => `${d()}-listbox`, y = (e) => `${d()}-option-${e}`, [b, S] = v(!1), [C, w] = v(""), [T, E] = v(0), D = _(() => r.emptyLabel === void 0 ? r.options : [{
 		value: "",
 		label: r.emptyLabel
-	}, ...r.options]), I = g(() => r.value === "" ? void 0 : D().find((e) => String(e.value) === r.value)), L = g(() => {
+	}, ...r.options]), I = _(() => r.value === "" ? void 0 : D().find((e) => String(e.value) === r.value)), L = _(() => {
 		let e = C().trim().toLowerCase();
 		return e === "" ? D() : D().filter((t) => t.label.toLowerCase().includes(e) || (t.detail?.toLowerCase().includes(e) ?? !1));
 	}), ie = () => r.options.some((e) => e.detail !== void 0), R = () => L().length, ae = () => L().length + +!!r.onAdd, oe = () => !r.disabled && r.onChange !== void 0;
 	x(() => {
 		r.autofocus === !0 && s?.focus();
-	}), h(() => {
+	}), g(() => {
 		b() && l?.querySelector(`[data-index="${T()}"]`)?.scrollIntoView({ block: "nearest" });
 	});
 	function z() {
@@ -90,18 +90,18 @@ function I(r) {
 		b() ? t > 0 && E((T() + e + t) % t) : z();
 	}
 	function H(e) {
-		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), V(e.key === "ArrowDown" ? 1 : -1)) : b() && (e.key === "Enter" ? (e.preventDefault(), B(T())) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), S(!1)));
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), V(e.key === "ArrowDown" ? 1 : -1)) : b() && (e.key === "Enter" ? (e.preventDefault(), B(T())) : e.key === "Tab" ? r.onAdd && T() === R() ? S(!1) : B(T()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), S(!1)));
 	}
 	let se = () => b() ? I()?.label ?? r.emptyLabel ?? r.searchLabel ?? "Search" : r.emptyLabel ?? r.placeholder;
 	function U(t, o) {
 		return (() => {
-			var s = re(), l = s.firstChild;
+			var s = k(), l = s.firstChild;
 			return s.$$click = () => B(o()), s.$$mousemove = () => E(o()), s.$$mousedown = (e) => e.preventDefault(), a(l, n(m, {
 				get when() {
 					return t.icon;
 				},
 				children: (t) => (() => {
-					var r = k();
+					var r = A();
 					return a(r, n(e, {
 						get component() {
 							return t();
@@ -131,7 +131,7 @@ function I(r) {
 	}
 	function W() {
 		return (() => {
-			var e = A();
+			var e = re();
 			return e.$$click = () => B(R()), e.$$mousemove = () => E(R()), e.$$mousedown = (e) => e.preventDefault(), c(e, "aria-selected", !1), a(e, n(O, {
 				size: 14,
 				"aria-hidden": "true"
@@ -167,7 +167,7 @@ function I(r) {
 					return W();
 				}
 			}), null), i((t) => {
-				var n = !!ie(), r = ee();
+				var n = !!ie(), r = h();
 				return n !== t.e && e.classList.toggle("combobox-list-detail", t.e = n), r !== t.t && c(e, "id", t.t = r), t;
 			}, {
 				e: void 0,
@@ -215,8 +215,8 @@ function I(r) {
 				return G();
 			}
 		}), null), i((e) => {
-			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!b(), a = !(b() || !I()?.detail), o = !(b() || I()?.icon === void 0), s = d(), f = b(), p = ee(), m = b() && ae() > 0 ? y(T()) : void 0, h = r.ariaLabel, g = r.describedBy, _ = r.required, v = r.disabled, x = r.onChange === void 0, S = r.value, C = se();
-			return n !== e.e && t(l, e.e = n), i !== e.t && l.classList.toggle("combobox-open", e.t = i), a !== e.a && l.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && l.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(u, "id", e.i = s), f !== e.n && c(u, "aria-expanded", e.n = f), p !== e.s && c(u, "aria-controls", e.s = p), m !== e.h && c(u, "aria-activedescendant", e.h = m), h !== e.r && c(u, "aria-label", e.r = h), g !== e.d && c(u, "aria-describedby", e.d = g), _ !== e.l && (u.required = e.l = _), v !== e.u && (u.disabled = e.u = v), x !== e.c && (u.readOnly = e.c = x), S !== e.w && c(u, "data-value", e.w = S), C !== e.m && c(u, "placeholder", e.m = C), e;
+			var n = r.class ? `combobox ${r.class}` : "combobox", i = !!b(), a = !(b() || !I()?.detail), o = !(b() || I()?.icon === void 0), s = d(), f = b(), p = h(), m = b() && ae() > 0 ? y(T()) : void 0, g = r.ariaLabel, _ = r.describedBy, v = r.required, ee = r.disabled, x = r.onChange === void 0, S = r.value, C = se();
+			return n !== e.e && t(l, e.e = n), i !== e.t && l.classList.toggle("combobox-open", e.t = i), a !== e.a && l.classList.toggle("combobox-with-detail", e.a = a), o !== e.o && l.classList.toggle("combobox-with-icon", e.o = o), s !== e.i && c(u, "id", e.i = s), f !== e.n && c(u, "aria-expanded", e.n = f), p !== e.s && c(u, "aria-controls", e.s = p), m !== e.h && c(u, "aria-activedescendant", e.h = m), g !== e.r && c(u, "aria-label", e.r = g), _ !== e.d && c(u, "aria-describedby", e.d = _), v !== e.l && (u.required = e.l = v), ee !== e.u && (u.disabled = e.u = ee), x !== e.c && (u.readOnly = e.c = x), S !== e.w && c(u, "data-value", e.w = S), C !== e.m && c(u, "placeholder", e.m = C), e;
 		}, {
 			e: void 0,
 			t: void 0,
@@ -259,19 +259,19 @@ function J(e, t) {
 	return e.width !== void 0 && (r.width = n(e.width)), e.minWidth !== void 0 && (r["min-width"] = n(e.minWidth)), e.maxWidth !== void 0 && (r["max-width"] = n(e.maxWidth)), Object.keys(r).length > 0 ? r : void 0;
 }
 function le(e) {
-	let r = g(() => q(e.rows)), o = () => q(e.loading ?? !1), s = e.sortKey !== void 0 || e.sortDirection !== void 0, [l, d] = _(e.defaultSort), y = () => s ? q(e.sortKey ?? void 0) : l()?.key, x = () => s ? q(e.sortDirection ?? "asc") : l()?.direction ?? "asc", S = () => q(e.showColumnCustomizer ?? !1), w = ee(() => e.toolbar), T = g(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [E, D] = _(void 0), te = () => e.visibleColumns === void 0 ? E() ?? T() : q(e.visibleColumns), O = g(() => new Set(te())), [ne, re] = _(void 0);
-	function k(t) {
+	let r = _(() => q(e.rows)), o = () => q(e.loading ?? !1), s = e.sortKey !== void 0 || e.sortDirection !== void 0, [l, d] = v(e.defaultSort), y = () => s ? q(e.sortKey ?? void 0) : l()?.key, x = () => s ? q(e.sortDirection ?? "asc") : l()?.direction ?? "asc", S = () => q(e.showColumnCustomizer ?? !1), w = h(() => e.toolbar), T = _(() => e.defaultVisibleColumns ?? e.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [E, D] = v(void 0), te = () => e.visibleColumns === void 0 ? E() ?? T() : q(e.visibleColumns), O = _(() => new Set(te())), [ne, k] = v(void 0);
+	function A(t) {
 		let n = new Map(e.columns.map((e) => [e.key, e])), r = [...new Set(t)].flatMap((e) => n.get(e) ?? []), i = new Set(r);
 		return [...r, ...e.columns.filter((e) => !i.has(e))];
 	}
-	let A = g(() => k(e.columnOrder === void 0 ? ne() ?? e.defaultColumnOrder ?? [] : q(e.columnOrder))), j = g(() => A().filter((e) => e.toggleable === !1 || O().has(e.key))), M = g(() => e.columns.filter((e) => e.toggleable !== !1)), N = g(() => M().map((e) => e.key));
+	let re = _(() => A(e.columnOrder === void 0 ? ne() ?? e.defaultColumnOrder ?? [] : q(e.columnOrder))), j = _(() => re().filter((e) => e.toggleable === !1 || O().has(e.key))), M = _(() => e.columns.filter((e) => e.toggleable !== !1)), N = _(() => M().map((e) => e.key));
 	function P(e, t) {
 		return t.sortValue ? t.sortValue(e) : e[t.key];
 	}
 	function F(e, t) {
 		return e === t ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, { numeric: !0 });
 	}
-	let I = g(() => {
+	let I = _(() => {
 		let t = r(), n = y();
 		if (s || !n) return t;
 		let i = e.columns.find((e) => e.key === n);
@@ -302,17 +302,17 @@ function le(e) {
 		Y(N());
 	}
 	function fe(t) {
-		e.columnOrder === void 0 && re(t), e.onColumnOrderChange?.(t);
+		e.columnOrder === void 0 && k(t), e.onColumnOrderChange?.(t);
 	}
 	function pe(e, t) {
-		let n = A().map((e) => e.key), r = n.indexOf(e);
+		let n = re().map((e) => e.key), r = n.indexOf(e);
 		r === -1 || t < 0 || t >= n.length || t === r || (n.splice(r, 1), n.splice(t, 0, e), fe(n));
 	}
 	function me() {
-		Y(T()), fe(k(e.defaultColumnOrder ?? []).map((e) => e.key));
+		Y(T()), fe(A(e.defaultColumnOrder ?? []).map((e) => e.key));
 	}
-	let [Z, he] = _({}), [ge, _e] = _(), Q;
-	h(() => {
+	let [Z, he] = v({}), [ge, _e] = v(), Q;
+	g(() => {
 		let e = j().map((e) => e.key);
 		if (!Q || C(ge) === void 0) return;
 		let t = C(Z);
@@ -365,8 +365,8 @@ function le(e) {
 			[n]: o
 		}), e.onColumnWidthsChange?.(Z());
 	}
-	let [be, xe] = _(), Se = `${v()}-panel`, [Ce, we] = _(!1), Te;
-	h(() => {
+	let [be, xe] = v(), Se = `${ee()}-panel`, [Ce, we] = v(!1), Te;
+	g(() => {
 		if (!Ce() || !S()) return;
 		function e(e) {
 			Te && !Te.contains(e.target) && we(!1);
@@ -419,7 +419,7 @@ function le(e) {
 			var t = R(), r = t.firstChild, o = r.nextSibling, s = o.nextSibling.firstChild, l = s.nextSibling;
 			return c(t, "id", Se), a(r, () => e.columnCustomizerTitle ?? "Shown columns"), a(o, n(p, {
 				get each() {
-					return A();
+					return re();
 				},
 				children: (e, t) => $(e, t)
 			})), s.$$click = de, a(s, () => e.columnCustomizerShowAllLabel ?? "Show all"), l.$$click = me, a(l, () => e.columnCustomizerResetLabel ?? "Reset"), i(() => c(t, "aria-label", e.columnCustomizerTitle ?? "Customize columns")), t;
@@ -503,7 +503,7 @@ function le(e) {
 	}
 	let Le = () => !o() && (e.empty === void 0 ? r().length === 0 : q(e.empty));
 	return (() => {
-		var r = G(), s = r.firstChild, c = s.firstChild, l = c.firstChild, d = l.firstChild, ee = l.nextSibling;
+		var r = G(), s = r.firstChild, c = s.firstChild, l = c.firstChild, d = l.firstChild, h = l.nextSibling;
 		a(r, n(m, {
 			get when() {
 				return S() || w.toArray().length > 0;
@@ -528,8 +528,8 @@ function le(e) {
 				}), null), e;
 			}
 		}), s);
-		var h = Q;
-		return typeof h == "function" ? f(h, c) : Q = c, a(d, n(p, {
+		var g = Q;
+		return typeof g == "function" ? f(g, c) : Q = c, a(d, n(p, {
 			get each() {
 				return j();
 			},
@@ -541,7 +541,7 @@ function le(e) {
 			get children() {
 				return W();
 			}
-		}), null), a(ee, n(p, {
+		}), null), a(h, n(p, {
 			get each() {
 				return I();
 			},
@@ -630,10 +630,10 @@ function Ne(e) {
 		"cancelLabel",
 		"clearSavedFilterLabel",
 		"class"
-	]), u = g(() => ke(r.rows)), [d, ee] = _(je(r.defaultFilterValues ?? {})), b = g(() => r.filterValues === void 0 ? d() : je(ke(r.filterValues)));
+	]), u = _(() => ke(r.rows)), [d, h] = v(je(r.defaultFilterValues ?? {})), b = _(() => r.filterValues === void 0 ? d() : je(ke(r.filterValues)));
 	function x(e) {
 		let t = je(e);
-		r.filterValues === void 0 && ee(t), r.onFilterValuesChange?.(t);
+		r.filterValues === void 0 && h(t), r.onFilterValuesChange?.(t);
 	}
 	function C(e, t) {
 		x({
@@ -641,7 +641,7 @@ function Ne(e) {
 			[e]: t
 		});
 	}
-	let w = () => $(b()[Oe]), T = g(() => r.filters.filter((e) => Ae(b()[e.key])));
+	let w = () => $(b()[Oe]), T = _(() => r.filters.filter((e) => Ae(b()[e.key])));
 	function E(e, t) {
 		return t.getValue ? t.getValue(e) : e[t.key];
 	}
@@ -657,7 +657,7 @@ function Ne(e) {
 	function te(e) {
 		return r.getSearchText ? r.getSearchText(e) : l.columns.map((t) => $(t.sortValue?.(e) ?? e[t.key])).join(" ");
 	}
-	let O = g(() => {
+	let O = _(() => {
 		if (r.manualFiltering) return u();
 		let e = w().toLowerCase(), t = T();
 		return u().filter((n) => (e === "" || te(n).toLowerCase().includes(e)) && t.every((e) => D(n, e, b()[e.key])));
@@ -677,25 +677,25 @@ function Ne(e) {
 			label: e
 		}));
 	}
-	function re(e, t) {
+	function k(e, t) {
 		return e.type === "boolean" ? t === "true" ? r.yesLabel ?? "Yes" : r.noLabel ?? "No" : e.type === "select" ? ne(e).find((e) => String(e.value) === t)?.label ?? t : t;
 	}
-	let k = g(() => T().flatMap((e) => {
+	let A = _(() => T().flatMap((e) => {
 		let t = b()[e.key];
 		return (Array.isArray(t) ? t : [t]).map((t) => ({
 			filter: e,
 			item: t,
-			text: `${e.label}: ${re(e, t)}`
+			text: `${e.label}: ${k(e, t)}`
 		}));
 	}));
-	function A(e, t) {
+	function re(e, t) {
 		let n = b()[e.key];
 		C(e.key, Array.isArray(n) ? n.filter((e) => e !== t) : "");
 	}
 	function j() {
 		x({ [Oe]: w() });
 	}
-	let M = g(() => r.savedFilters === void 0 ? void 0 : ke(r.savedFilters)), N = g(() => M()?.find((e) => Me(je(e.values), b()))), [P, F] = _(!1), [L, ie] = _("");
+	let M = _(() => r.savedFilters === void 0 ? void 0 : ke(r.savedFilters)), N = _(() => M()?.find((e) => Me(je(e.values), b()))), [P, F] = v(!1), [L, ie] = v("");
 	function R(e) {
 		let t = M()?.find((t) => t.name === e);
 		t && x(t.values);
@@ -713,8 +713,8 @@ function Ne(e) {
 			values: b()
 		}]), F(!1);
 	}
-	let [z, B] = _(b());
-	h(y(b, (e) => B(e)));
+	let [z, B] = v(b());
+	g(y(b, (e) => B(e)));
 	function V(e) {
 		return z()[e];
 	}
@@ -724,14 +724,14 @@ function Ne(e) {
 			[e]: t
 		}));
 	}
-	let se = g(() => {
+	let se = _(() => {
 		let e = /* @__PURE__ */ new Map([[void 0, []]]);
 		for (let t of r.filters) e.set(t.group, [...e.get(t.group) ?? [], t]);
 		return [...e.entries()].filter(([, e]) => e.length > 0).map(([e, t]) => ({
 			name: e,
 			filters: t
 		}));
-	}), U = v(), W = ["results", "filters"], [G, ce] = _("results"), K = (e) => `${U}-tab-${e}`, q = (e) => `${U}-panel-${e}`, J = (e) => `${U}-filter-${e}`;
+	}), U = ee(), W = ["results", "filters"], [G, ce] = v("results"), K = (e) => `${U}-tab-${e}`, q = (e) => `${U}-panel-${e}`, J = (e) => `${U}-filter-${e}`;
 	function Ne(e) {
 		e === "filters" && B(b()), ce(e);
 	}
@@ -754,10 +754,10 @@ function Ne(e) {
 			return Array.isArray(t) ? t : [];
 		}, o = (r) => (() => {
 			var o = de(), s = o.firstChild;
-			return a(o, () => re(e, r), s), s.$$click = () => H(e.key, t().filter((e) => e !== r)), a(s, n(X, {
+			return a(o, () => k(e, r), s), s.$$click = () => H(e.key, t().filter((e) => e !== r)), a(s, n(X, {
 				size: 12,
 				"aria-hidden": "true"
-			})), i(() => c(s, "aria-label", `Remove ${re(e, r)}`)), o;
+			})), i(() => c(s, "aria-label", `Remove ${k(e, r)}`)), o;
 		})();
 		return (() => {
 			var i = pe();
@@ -874,7 +874,7 @@ function Ne(e) {
 	function Ve(e) {
 		return (() => {
 			var t = _e(), r = t.firstChild;
-			return r.$$click = () => A(e.filter, e.item), a(r, () => e.text, null), a(r, n(X, {
+			return r.$$click = () => re(e.filter, e.item), a(r, () => e.text, null), a(r, n(X, {
 				size: 12,
 				"aria-hidden": "true"
 			}), null), i(() => c(r, "aria-label", `Remove filter ${e.text}`)), t;
@@ -885,7 +885,7 @@ function Ne(e) {
 			var e = ve(), t = e.firstChild, i = t.firstChild;
 			return a(e, n(p, {
 				get each() {
-					return k();
+					return A();
 				},
 				children: Ve
 			}), t), i.$$click = j, a(i, () => r.clearAllLabel ?? "Clear all"), a(e, n(m, {
@@ -937,14 +937,14 @@ function Ne(e) {
 			}
 		}), null), a(e, n(m, {
 			get when() {
-				return k().length > 0;
+				return A().length > 0;
 			},
 			get children() {
 				return He();
 			}
 		}), null), a(e, n(m, {
 			get when() {
-				return o(() => !!P())() && k().length > 0;
+				return o(() => !!P())() && A().length > 0;
 			},
 			get children() {
 				return Ue();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",