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

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

import { useRef as u, useEffect as f, useCallback as p } from "react";
import { useDropdownContext as m } from "../contexts/dropdown.hook.js";
const E = ({ ulRef: i }) => {
  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = m();
  f(() => {
    var r;
    const n = new AbortController(), s = (t) => {
      t.key === "Escape" && e(!1);
    }, a = (t) => {
      var d;
      (d = l.current) != null && d.contains(t.target) || e(!1);
    };
    return document.addEventListener("keydown", s, {
      signal: n.signal
    }), document.addEventListener("mousedown", a, {
      signal: n.signal
    }), document.addEventListener(
      "visibilitychange",
      () => {
        document.hidden && e(!1);
      },
      {
        signal: n.signal
      }
    ), (r = o.current) == null || r.addEventListener(
      "focus",
      () => {
        e(!0);
      },
      { signal: n.signal }
    ), () => {
      n.abort();
    };
  }, [e, l]), f(() => {
    var s;
    const n = new AbortController();
    return (s = o.current) == null || s.addEventListener(
      "keydown",
      (a) => {
        var r;
        if (a.key === "ArrowDown") {
          const t = (r = i.current) == null ? void 0 : r.querySelector("li");
          t && t.focus();
        }
      },
      { signal: n.signal }
    ), () => {
      n.abort();
    };
  }, [o, i]);
  const g = p(() => e(!0), [e]), w = p(() => {
    c || e(!1);
  }, [c, e]);
  return {
    wrapperRef: l,
    wrapperInputRef: o,
    handleOpen: g,
    handleOpenIfClosed: w
  };
};
export {
  E as useDropdown
};