@cascivo/react 0.17.1 → 1.0.0

package/dist/node/command-menu/command-menu.js

@@ -4,11 +4,11 @@ import { Spinner as e } from "../spinner/spinner.js";
 import { Kbd as t } from "../kbd/kbd.js";
 import n from "./command-menu.module.js";
 import { useId as r, useRef as i } from "react";
-import { batch as a, cn as o, focusElement as s, useEffectPropSignal as c, useSignal as l, useSignalEffect as u, useSignals as ee } from "@cascivo/core";
-import { builtin as d, t as f } from "@cascivo/i18n";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { batch as a, cn as o, focusElement as s, useEffectPropSignal as c, useSignal as l, useSignalEffect as u, useSignals as d } from "@cascivo/core";
+import { builtin as f, t as p } from "@cascivo/i18n";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region ../components/src/command-menu/command-menu.tsx
-function h(e, t) {
+function g(e, t) {
 	if (e.length === 0) return {
 		score: 1,
 		indices: []
@@ -25,21 +25,21 @@ function h(e, t) {
 		indices: s
 	} : null;
 }
-function g(e, t) {
-	return h(e, t)?.score ?? 0;
-}
 function _(e, t) {
-	let n = g(e, t.label);
+	return g(e, t)?.score ?? 0;
+}
+function v(e, t) {
+	let n = _(e, t.label);
 	for (let r of t.keywords ?? []) {
-		let t = g(e, r);
+		let t = _(e, r);
 		t > n && (n = t);
 	}
 	return n;
 }
-function v(e, t) {
+function ee(e, t) {
 	if (t.length === 0) return e;
 	let r = new Set(t), i = [], a = "", o = r.has(0), s = (e) => {
-		a !== "" && (i.push(o ? /* @__PURE__ */ p("mark", {
+		a !== "" && (i.push(o ? /* @__PURE__ */ m("mark", {
 			className: n.match,
 			children: a
 		}, e) : a), a = "");
@@ -50,7 +50,7 @@ function v(e, t) {
 	}
 	return s(e.length), i;
 }
-function y(e, t) {
+function te(e, t) {
 	for (let n of t) {
 		let t = n.prefix;
 		if (t) {
@@ -66,49 +66,49 @@ function y(e, t) {
 	}
 	return null;
 }
-function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel: re, hotkey: x = !0, label: S, loading: C = !1, onQueryChange: w, scopes: T = [], className: ie }) {
-	ee();
-	let E = S ?? f(d.commandMenu.label), ae = re ?? f(d.commandMenu.empty), D = r(), O = `${D}-listbox`, k = i(null), A = i(null), j = i([]), M = i(b);
-	M.current = b;
-	let N = i(w);
-	N.current = w;
-	let P = c(g), F = c(x), I = l(""), L = l(0), R = l([]), z = l(null), B = R.value.at(-1)?.groups ?? te, oe = ne ?? R.value.at(-1)?.placeholder ?? f(d.commandMenu.placeholder), V = T.find((e) => e.id === z.value) ?? null, H = B.filter((e) => !z.value || !e.scope || e.scope === z.value).map((e) => ({
+function y({ open: _, onOpenChange: y, groups: ne, placeholder: b, emptyLabel: x, hotkey: re = !0, label: S, ariaLabel: ie, loading: C = !1, onQueryChange: w, scopes: T = [], className: ae }) {
+	d();
+	let E = ie ?? S ?? p(f.commandMenu.label), D = x ?? p(f.commandMenu.empty), O = r(), k = `${O}-listbox`, A = i(null), j = i(null), M = i([]), N = i(y);
+	N.current = y;
+	let P = i(w);
+	P.current = w;
+	let F = c(_), oe = c(re), I = l(""), L = l(0), R = l([]), z = l(null), se = R.value.at(-1)?.groups ?? ne, B = b ?? R.value.at(-1)?.placeholder ?? p(f.commandMenu.placeholder), V = T.find((e) => e.id === z.value) ?? null, H = se.filter((e) => !z.value || !e.scope || e.scope === z.value).map((e) => ({
 		heading: e.heading,
 		items: e.items.map((e) => ({
 			item: e,
-			score: _(I.value, e)
+			score: v(I.value, e)
 		})).filter(({ score: e }) => e > 0).sort((e, t) => t.score - e.score).map(({ item: e }) => ({
 			item: e,
-			indices: h(I.value, e.label)?.indices ?? []
+			indices: g(I.value, e.label)?.indices ?? []
 		}))
-	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(L.value) ? L.value : W[0] ?? -1, K = (e) => `${D}-option-${e}`;
+	})).filter((e) => e.items.length > 0), U = H.flatMap((e) => e.items.map((e) => e.item)), W = U.flatMap((e, t) => e.disabled ? [] : [t]), G = W.includes(L.value) ? L.value : W[0] ?? -1, K = (e) => `${O}-option-${e}`;
 	u(() => {
-		let e = k.current;
-		e && (P.value ? e.open || (a(() => {
+		let e = A.current;
+		e && (F.value ? e.open || (a(() => {
 			I.value = "", L.value = 0, R.value = [], z.value = null;
-		}), typeof e.showModal == "function" && e.showModal(), s(A.current)) : e.open && (R.value = [], e.close()));
+		}), typeof e.showModal == "function" && e.showModal(), s(j.current)) : e.open && (R.value = [], e.close()));
 	}), u(() => {
-		let e = k.current;
+		let e = A.current;
 		if (!e) return;
-		let t = () => M.current(!1);
+		let t = () => N.current(!1);
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
 	}), u(() => {
-		if (!F.value) return;
+		if (!oe.value) return;
 		let e = (e) => {
-			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), M.current(!P.value));
+			(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), N.current(!F.value));
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	});
 	let q = (e) => {
 		L.value = e;
-		let t = j.current[e];
+		let t = M.current[e];
 		t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest" });
 	}, J = (e) => {
 		if (W.length === 0) return;
 		let t = W[(W.indexOf(G) + e + W.length) % W.length];
 		t !== void 0 && q(t);
 	}, Y = (e) => {
-		e.onSelect(), b(!1);
+		e.onSelect(), y(!1);
 	}, X = (e, t) => {
 		if (!(!e || e.disabled)) {
 			if (e.page) {
@@ -123,9 +123,9 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 				n && Y(n);
 				return;
 			}
-			t !== "secondary" && (e.onSelect?.(), b(!1));
+			t !== "secondary" && (e.onSelect?.(), y(!1));
 		}
-	}, se = (e) => {
+	}, ce = (e) => {
 		if (T.length === 0) return;
 		let t = [null, ...T.map((e) => e.id)], n = t[(t.indexOf(z.value) + e + t.length) % t.length];
 		a(() => {
@@ -134,12 +134,12 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 	}, Z = () => {
 		a(() => {
 			z.value = null, L.value = 0;
-		}), s(A.current);
+		}), s(j.current);
 	}, Q = () => {
 		a(() => {
 			R.value = R.value.slice(0, -1), I.value = "", L.value = 0;
 		});
-	}, ce = (e) => {
+	}, le = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
 				e.preventDefault(), J(1);
@@ -148,7 +148,7 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 				e.preventDefault(), J(-1);
 				break;
 			case "Tab":
-				T.length > 0 && (e.preventDefault(), se(e.shiftKey ? -1 : 1));
+				T.length > 0 && (e.preventDefault(), ce(e.shiftKey ? -1 : 1));
 				break;
 			case "Home":
 				e.preventDefault(), W[0] !== void 0 && q(W[0]);
@@ -166,24 +166,24 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 				I.value === "" && (R.value.length > 0 ? (e.preventDefault(), Q()) : z.value && (e.preventDefault(), Z()));
 				break;
 		}
-	}, le = (e) => {
-		e.key === "Escape" && (e.preventDefault(), R.value.length > 0 ? Q() : k.current?.close());
 	}, ue = (e) => {
-		e.target === k.current && k.current?.close();
+		e.key === "Escape" && (e.preventDefault(), R.value.length > 0 ? Q() : A.current?.close());
+	}, de = (e) => {
+		e.target === A.current && A.current?.close();
 	}, $ = -1;
-	return /* @__PURE__ */ p("dialog", {
-		ref: k,
+	return /* @__PURE__ */ m("dialog", {
+		ref: A,
 		"aria-label": E,
-		className: o(n.dialog, ie),
-		onClick: ue,
-		onKeyDown: le,
-		children: /* @__PURE__ */ m("div", {
+		className: o(n.dialog, ae),
+		onClick: de,
+		onKeyDown: ue,
+		children: /* @__PURE__ */ h("div", {
 			className: n.panel,
 			children: [
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: n.search,
 					children: [
-						/* @__PURE__ */ m("svg", {
+						/* @__PURE__ */ h("svg", {
 							className: n.searchIcon,
 							"aria-hidden": "true",
 							viewBox: "0 0 16 16",
@@ -193,30 +193,30 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 							stroke: "currentColor",
 							strokeWidth: "1.5",
 							strokeLinecap: "round",
-							children: [/* @__PURE__ */ p("circle", {
+							children: [/* @__PURE__ */ m("circle", {
 								cx: "7",
 								cy: "7",
 								r: "4.5"
-							}), /* @__PURE__ */ p("line", {
+							}), /* @__PURE__ */ m("line", {
 								x1: "10.5",
 								y1: "10.5",
 								x2: "14",
 								y2: "14"
 							})]
 						}),
-						V && /* @__PURE__ */ m("span", {
+						V && /* @__PURE__ */ h("span", {
 							className: n.scopeChip,
-							children: [V.label, /* @__PURE__ */ p("button", {
+							children: [V.label, /* @__PURE__ */ m("button", {
 								type: "button",
 								className: n.scopeClear,
-								"aria-label": f(d.commandMenu.clearScope),
+								"aria-label": p(f.commandMenu.clearScope),
 								onClick: Z,
-								children: /* @__PURE__ */ p("svg", {
+								children: /* @__PURE__ */ m("svg", {
 									viewBox: "0 0 16 16",
 									width: "12",
 									height: "12",
 									"aria-hidden": "true",
-									children: /* @__PURE__ */ p("path", {
+									children: /* @__PURE__ */ m("path", {
 										d: "M4 4l8 8M12 4l-8 8",
 										fill: "none",
 										stroke: "currentColor",
@@ -226,77 +226,77 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 								})
 							})]
 						}),
-						/* @__PURE__ */ p("input", {
-							ref: A,
+						/* @__PURE__ */ m("input", {
+							ref: j,
 							type: "text",
 							role: "combobox",
 							"aria-expanded": "true",
-							"aria-controls": O,
+							"aria-controls": k,
 							"aria-activedescendant": G >= 0 ? K(G) : void 0,
 							"aria-autocomplete": "list",
 							"aria-label": E,
 							autoComplete: "off",
 							spellCheck: !1,
 							className: n.input,
-							placeholder: oe,
+							placeholder: B,
 							value: I.value,
 							onChange: (e) => {
 								let t = e.target.value;
 								if (!z.value && T.length > 0) {
-									let e = y(t, T);
+									let e = te(t, T);
 									e && (z.value = e.scope.id, t = e.rest);
 								}
-								I.value = t, L.value = 0, N.current?.(t);
+								I.value = t, L.value = 0, P.current?.(t);
 							},
-							onKeyDown: ce
+							onKeyDown: le
 						})
 					]
 				}),
-				T.length > 0 && /* @__PURE__ */ m("div", {
+				T.length > 0 && /* @__PURE__ */ h("div", {
 					className: n.scopes,
-					children: [/* @__PURE__ */ p("span", {
+					children: [/* @__PURE__ */ m("span", {
 						className: n.scopesLabel,
-						children: f(d.commandMenu.scopeLabel)
-					}), T.map((e) => /* @__PURE__ */ m("button", {
+						children: p(f.commandMenu.scopeLabel)
+					}), T.map((e) => /* @__PURE__ */ h("button", {
 						type: "button",
 						className: n.scopePill,
 						"data-active": e.id === z.value || void 0,
 						onClick: () => {
 							a(() => {
 								z.value = z.value === e.id ? null : e.id, L.value = 0;
-							}), s(A.current);
+							}), s(j.current);
 						},
-						children: [e.prefix && /* @__PURE__ */ p("span", {
+						children: [e.prefix && /* @__PURE__ */ m("span", {
 							className: n.scopePrefix,
 							children: e.prefix
 						}), e.label]
 					}, e.id))]
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: n.list,
-					children: [/* @__PURE__ */ p("div", {
+					children: [/* @__PURE__ */ m("div", {
 						role: "listbox",
-						id: O,
+						id: k,
 						"aria-label": S,
 						tabIndex: 0,
-						children: H.map((e, r) => /* @__PURE__ */ m("div", {
+						children: H.map((e, r) => /* @__PURE__ */ h("div", {
 							role: "group",
 							"aria-label": e.heading,
 							className: n.group,
-							children: [e.heading && /* @__PURE__ */ m("div", {
+							children: [e.heading && /* @__PURE__ */ h("div", {
 								className: n.heading,
 								"aria-hidden": "true",
-								children: [/* @__PURE__ */ p("span", { children: e.heading }), I.value !== "" && /* @__PURE__ */ p("span", {
+								children: [/* @__PURE__ */ m("span", { children: e.heading }), I.value !== "" && /* @__PURE__ */ m("span", {
 									className: n.count,
-									children: f(d.commandMenu.matches, { count: e.items.length })
+									children: p(f.commandMenu.matches, { count: e.items.length })
 								})]
 							}), e.items.map((e) => {
 								let { item: r, indices: i } = e;
 								$++;
 								let a = $;
-								return /* @__PURE__ */ m("div", {
+								return /* @__PURE__ */ h("div", {
 									ref: (e) => {
-										j.current[a] = e;
+										M.current[a] = e;
 									},
 									id: K(a),
 									role: "option",
@@ -310,50 +310,50 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 									},
 									onClick: () => X(r, "primary"),
 									children: [
-										r.icon && /* @__PURE__ */ p("span", {
+										r.icon && /* @__PURE__ */ m("span", {
 											className: n.icon,
 											"aria-hidden": "true",
 											children: r.icon
 										}),
-										/* @__PURE__ */ m("span", {
+										/* @__PURE__ */ h("span", {
 											className: n.text,
-											children: [/* @__PURE__ */ p("span", {
+											children: [/* @__PURE__ */ m("span", {
 												className: n.label,
-												children: v(r.label, i)
-											}), r.description && /* @__PURE__ */ p("span", {
+												children: ee(r.label, i)
+											}), r.description && /* @__PURE__ */ m("span", {
 												className: n.description,
 												children: r.description
 											})]
 										}),
-										r.status && /* @__PURE__ */ m("span", {
+										r.status && /* @__PURE__ */ h("span", {
 											className: n.status,
 											"data-tone": r.status.tone ?? "neutral",
-											children: [/* @__PURE__ */ p("span", {
+											children: [/* @__PURE__ */ m("span", {
 												className: n.statusDot,
 												"aria-hidden": "true"
 											}), r.status.label]
 										}),
-										r.actions && r.actions.length > 0 && /* @__PURE__ */ p("span", {
+										r.actions && r.actions.length > 0 && /* @__PURE__ */ m("span", {
 											className: n.actions,
-											children: r.actions.map((e) => /* @__PURE__ */ m("span", {
+											children: r.actions.map((e) => /* @__PURE__ */ h("span", {
 												className: n.action,
 												onClick: (t) => {
 													t.stopPropagation(), Y(e);
 												},
-												children: [e.label, e.shortcut && /* @__PURE__ */ p("span", {
+												children: [e.label, e.shortcut && /* @__PURE__ */ m("span", {
 													className: n.actionKeys,
 													"aria-hidden": "true",
-													children: e.shortcut.map((e, n) => /* @__PURE__ */ p(t, {
+													children: e.shortcut.map((e, n) => /* @__PURE__ */ m(t, {
 														size: "sm",
 														children: e
 													}, n))
 												})]
 											}, e.id))
 										}),
-										r.shortcut && /* @__PURE__ */ p("span", {
+										r.shortcut && /* @__PURE__ */ m("span", {
 											className: n.shortcut,
 											"aria-hidden": "true",
-											children: r.shortcut.map((e, n) => /* @__PURE__ */ p(t, {
+											children: r.shortcut.map((e, n) => /* @__PURE__ */ m(t, {
 												size: "sm",
 												children: e
 											}, n))
@@ -362,51 +362,51 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 								}, r.id);
 							})]
 						}, e.heading ?? `group-${r}`))
-					}), U.length === 0 && (C ? /* @__PURE__ */ m("div", {
+					}), U.length === 0 && (C ? /* @__PURE__ */ h("div", {
 						role: "status",
 						className: n.empty,
-						children: [/* @__PURE__ */ p(e, { size: "sm" }), f(d.commandMenu.loading)]
-					}) : /* @__PURE__ */ p("div", {
+						children: [/* @__PURE__ */ m(e, { size: "sm" }), p(f.commandMenu.loading)]
+					}) : /* @__PURE__ */ m("div", {
 						role: "status",
 						className: n.empty,
-						children: ae
+						children: D
 					}))]
 				}),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ h("div", {
 					className: n.footer,
 					"aria-hidden": "true",
 					children: [
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ h("span", {
 							className: n.hint,
 							children: [
-								/* @__PURE__ */ p(t, {
+								/* @__PURE__ */ m(t, {
 									size: "sm",
 									children: "↑"
 								}),
-								/* @__PURE__ */ p(t, {
+								/* @__PURE__ */ m(t, {
 									size: "sm",
 									children: "↓"
 								}),
 								" navigate"
 							]
 						}),
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ h("span", {
 							className: n.hint,
-							children: [/* @__PURE__ */ p(t, {
+							children: [/* @__PURE__ */ m(t, {
 								size: "sm",
 								children: "↵"
 							}), " open"]
 						}),
-						T.length > 0 && /* @__PURE__ */ m("span", {
+						T.length > 0 && /* @__PURE__ */ h("span", {
 							className: n.hint,
-							children: [/* @__PURE__ */ p(t, {
+							children: [/* @__PURE__ */ m(t, {
 								size: "sm",
 								children: "Tab"
 							}), " scope"]
 						}),
-						/* @__PURE__ */ m("span", {
+						/* @__PURE__ */ h("span", {
 							className: n.hint,
-							children: [/* @__PURE__ */ p(t, {
+							children: [/* @__PURE__ */ m(t, {
 								size: "sm",
 								children: "esc"
 							}), " close"]
@@ -418,4 +418,4 @@ function b({ open: g, onOpenChange: b, groups: te, placeholder: ne, emptyLabel:
 	});
 }
 //#endregion
-export { b as CommandMenu, h as fuzzyMatch, g as fuzzyScore };
+export { y as CommandMenu, g as fuzzyMatch, _ as fuzzyScore };

package/dist/node/comparison/comparison.js

@@ -7,37 +7,37 @@ import { builtin as o, t as s } from "@cascivo/i18n";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region ../components/src/comparison/comparison.tsx
 var u = (e) => Math.min(100, Math.max(0, e));
-function d({ after: d, before: f, position: p, defaultPosition: m = 50, onPositionChange: h, orientation: g = "horizontal", keyboardStep: _ = 5, label: v, className: y, ...b }) {
+function d({ after: d, before: f, position: p, defaultPosition: m = 50, onPositionChange: h, orientation: g = "horizontal", keyboardStep: _ = 5, label: v, ariaLabel: y, className: b, ...x }) {
 	a();
-	let x = t(null), S = i(!1), [C, w] = r({
+	let S = t(null), C = i(!1), [w, T] = r({
 		value: p,
 		defaultValue: m,
 		onChange: h
-	}), T = Math.round(u(C.value)), E = (e) => {
-		let t = x.current;
+	}), E = Math.round(u(w.value)), D = (e) => {
+		let t = S.current;
 		if (!t) return;
 		let n = t.getBoundingClientRect();
-		w(u(g === "vertical" ? (e.clientY - n.top) / n.height * 100 : (e.clientX - n.left) / n.width * 100));
-	}, D = (e) => {
+		T(u(g === "vertical" ? (e.clientY - n.top) / n.height * 100 : (e.clientX - n.left) / n.width * 100));
+	}, O = (e) => {
 		let t = g === "vertical" ? "ArrowUp" : "ArrowLeft", n = g === "vertical" ? "ArrowDown" : "ArrowRight", r = null;
-		e.key === t || e.key === "ArrowLeft" || e.key === "ArrowUp" ? r = T - _ : e.key === n || e.key === "ArrowRight" || e.key === "ArrowDown" ? r = T + _ : e.key === "Home" ? r = 0 : e.key === "End" ? r = 100 : e.key === "PageUp" ? r = T + _ * 2 : e.key === "PageDown" && (r = T - _ * 2), r !== null && (e.preventDefault(), w(u(r)));
+		e.key === t || e.key === "ArrowLeft" || e.key === "ArrowUp" ? r = E - _ : e.key === n || e.key === "ArrowRight" || e.key === "ArrowDown" ? r = E + _ : e.key === "Home" ? r = 0 : e.key === "End" ? r = 100 : e.key === "PageUp" ? r = E + _ * 2 : e.key === "PageDown" && (r = E - _ * 2), r !== null && (e.preventDefault(), T(u(r)));
 	};
 	return /* @__PURE__ */ l("div", {
-		ref: x,
+		ref: S,
 		"data-orientation": g,
-		"data-dragging": S.value || void 0,
-		className: n(e.comparison, y),
-		style: { "--position": `${T}%` },
+		"data-dragging": C.value || void 0,
+		className: n(e.comparison, b),
+		style: { "--position": `${E}%` },
 		onPointerDown: (e) => {
-			S.value = !0, e.currentTarget.setPointerCapture?.(e.pointerId), E(e);
+			C.value = !0, e.currentTarget.setPointerCapture?.(e.pointerId), D(e);
 		},
 		onPointerMove: (e) => {
-			S.value && E(e);
+			C.value && D(e);
 		},
 		onPointerUp: (e) => {
-			S.value = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+			C.value = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
 		},
-		...b,
+		...x,
 		children: [
 			/* @__PURE__ */ c("div", {
 				className: e.item,
@@ -53,13 +53,13 @@ function d({ after: d, before: f, position: p, defaultPosition: m = 50, onPositi
 				children: /* @__PURE__ */ c("div", {
 					role: "slider",
 					tabIndex: 0,
-					"aria-label": v ?? s(o.comparison.label),
+					"aria-label": y ?? v ?? s(o.comparison.label),
 					"aria-orientation": g,
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					"aria-valuenow": T,
+					"aria-valuenow": E,
 					className: e.handle,
-					onKeyDown: D
+					onKeyDown: O
 				})
 			})
 		]