@uva-glass/component-library/dist/components/ActionList/ActionList.js

React components UvA

import { jsxs as k, jsx as c } from "react/jsx-runtime";
import { c as T } from "../../clsx-OuTLNxxd.js";
import { useId as U, useRef as l, Children as w, useState as b, useEffect as D } from "react";
import { Icon as m } from "../Icon/Icon.js";
import "../Buttons/Button.js";
import "../Buttons/LinkButton.js";
import { MenuButton as $ } from "../Buttons/MenuButton.js";
import '../../assets/ActionList.css';const p = {
  "action-list": "_action-list_1vi7f_1",
  "action-list--open": "_action-list--open_1vi7f_13",
  "action-list-container": "_action-list-container_1vi7f_17"
}, O = -1, s = 1;
function B({ label: h, prefixIcon: E, iconName: C, variant: L = "secondary", children: u }) {
  const I = U(), _ = l(null), n = l(null), r = l(null), d = w.count(u), [f, i] = b(O), [a, g] = b(!1);
  function R() {
    g(!0), document.addEventListener("click", N, { once: !0, capture: !0 });
  }
  function o(e) {
    e && r.current && !r.current.contains(e.target) || (i(O), g(!1), document.removeEventListener("click", N, { capture: !0 }));
  }
  function x() {
    a ? o() : R();
  }
  function y(e) {
    if (!a) return;
    ["ArrowUp", "ArrowDown", "Home", "End"].includes(e.code) && e.preventDefault(), e.code === "Tab" && o();
  }
  function A(e) {
    (e.code === "Space" || e.key === "Enter") && (e.target === _.current ? x() : e.key === "Enter" && e.target !== n.current && "firstChild" in e.target && e.target.firstChild.click()), e.code === "Escape" && o(), e.code === "ArrowUp" && i((t) => t === 0 ? d - s : t - s), e.code === "ArrowDown" && i((t) => t === d - s ? 0 : t + s), e.code === "Home" && i(0), e.code === "End" && i(d - s);
  }
  const N = (e) => {
    const { target: t } = e;
    !t || !r.current || r.current.contains(t) || o();
  };
  return D(() => {
    if (f < 0 || !n.current) return;
    const e = n.current.children.item(f);
    e && e.focus();
  }, [f]), D(() => {
    !n.current || !n.current.hasChildNodes() || Array.from(n.current.children).filter((e) => e.nodeType === Node.ELEMENT_NODE && e.hasChildNodes()).forEach((e) => {
      Array.from(e.children).filter((t) => t.nodeType === Node.ELEMENT_NODE).forEach((t) => {
        t.setAttribute("tabIndex", "-1");
      });
    });
  }, [u]), /* @__PURE__ */ k("div", { className: p["action-list-container"], ref: r, children: [
    /* @__PURE__ */ k(
      $,
      {
        onClick: x,
        onKeyDown: y,
        onKeyUp: A,
        buttonRef: _,
        variant: L,
        children: [
          E && /* @__PURE__ */ c(m, { size: 24, name: E }),
          h,
          C ? /* @__PURE__ */ c(m, { size: 24, name: C }) : /* @__PURE__ */ c(m, { size: 16, name: a ? "CheveronUp" : "CheveronDown" })
        ]
      }
    ),
    /* @__PURE__ */ c(
      "div",
      {
        "aria-activedescendant": `${I}-child-${f}`,
        "aria-label": h,
        className: T(p["action-list"], {
          [p["action-list--open"]]: a
        }),
        onClickCapture: o,
        onKeyDown: y,
        onKeyUp: A,
        ref: n,
        role: "menu",
        tabIndex: -1,
        children: w.map(u, (e, t) => /* @__PURE__ */ c("div", { role: "menuitem", tabIndex: -1, children: e }, `${I}-child-${t}`))
      }
    )
  ] });
}
export {
  B as ActionList
};
//# sourceMappingURL=ActionList.js.map