@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
79 lines (78 loc) • 2.1 kB
JavaScript
import { useRef as d, useEffect as i } from "react";
const y = ({
ulRef: c,
inputRef: l,
wrapperRef: b,
options: g
}) => {
const r = d(0);
i(() => {
var o, k;
const e = ((o = c.current) == null ? void 0 : o.querySelectorAll("li")) ?? [], t = new AbortController(), u = () => {
r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
}, n = () => {
var s;
r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, (s = l.current) == null || s.focus());
};
return (k = c.current) == null || k.addEventListener(
"keydown",
(s) => {
var w;
switch (s.preventDefault(), s.key) {
case "ArrowDown": {
u();
break;
}
case "Tab": {
s.shiftKey ? n() : u();
break;
}
case "ArrowUp": {
r.current === 0 ? (w = l.current) == null || w.focus() : n();
break;
}
case "Enter": {
const a = e[r.current].querySelector("button");
a == null || a.click();
break;
}
}
},
{ signal: t.signal }
), () => {
t.abort();
};
}, [l, c, g, r]), i(() => {
var t;
const e = new AbortController();
return (t = l.current) == null || t.addEventListener(
"keydown",
(u) => {
var n;
if (u.key === "ArrowDown") {
const o = (n = c.current) == null ? void 0 : n.querySelector("li");
o && o.focus();
}
},
{ signal: e.signal }
), () => {
e.abort();
};
}, [l, c, g]), i(() => {
var t;
const e = new AbortController();
return (t = b.current) == null || t.addEventListener(
"mouseenter",
() => {
var n;
(((n = c.current) == null ? void 0 : n.querySelectorAll("li")) ?? []).forEach((o) => o.blur());
},
{ signal: e.signal }
), () => {
e.abort();
};
}, [c, b]);
};
export {
y as useNavigationUlList
};