@konstructio/ui/dist/components/Dropdown/hooks/useNavigationList.js

A set of reusable and customizable React components built for konstruct.io

import { useRef as m, useEffect as a } from "react";
import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
const w = ({
  ulRef: n,
  wrapperRef: f,
  wrapperInputRef: u
}) => {
  const r = m(0), { isOpen: b } = d();
  a(() => {
    var s, g;
    const e = ((s = n.current) == null ? void 0 : s.querySelectorAll("li")) ?? [], c = new AbortController(), i = () => {
      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
    }, o = () => {
      var t;
      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, (t = u.current) == null || t.focus());
    };
    return (g = n.current) == null || g.addEventListener(
      "keydown",
      (t) => {
        var k;
        switch (t.preventDefault(), t.key) {
          case "ArrowDown": {
            i();
            break;
          }
          case "Tab": {
            t.shiftKey ? o() : i();
            break;
          }
          case "ArrowUp": {
            r.current === 0 ? (k = u.current) == null || k.focus() : o();
            break;
          }
          case "Enter": {
            const l = e[r.current].querySelector("button");
            l == null || l.click();
            break;
          }
        }
      },
      { signal: c.signal }
    ), () => {
      c.abort();
    };
  }, [n, r, u]), a(() => {
    var c;
    const e = new AbortController();
    return (c = f.current) == null || c.addEventListener(
      "mouseenter",
      () => {
        var o;
        (((o = n.current) == null ? void 0 : o.querySelectorAll("li")) ?? []).forEach((s) => s.blur());
      },
      { signal: e.signal }
    ), () => {
      e.abort();
    };
  }, [n, f]), a(() => {
    b || (r.current = 0);
  }, [b]);
};
export {
  w as useNavigationUlList
};