@lanaco/lnc-react-ui/dist/MenuItem.js

React component library

import { jsx as m, Fragment as _, jsxs as G } from "react/jsx-runtime";
import { forwardRef as H, useRef as J, useState as Q, useEffect as W } from "react";
import { s as X } from "./emotion-styled.browser.esm-DfbrHHed.js";
import w from "./Icon.js";
import { c as s, d as Y, i as N } from "./utils-BUdHa0nB.js";
import { u as Z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const I = X.div`
  box-sizing: border-box;
  cursor: ${(l) => l.disabled == !1 ? "pointer" : "context-menu"};
  width: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  gap: 0.563rem;
  padding: 0.563rem;
  color: ${(l) => s(l.theme, "MenuItem", l.color, "enabled", "text")};
  ${(l) => Y(l.theme, "MenuItem", l.size, "enabled")};
  & .menu-icon-lnc {
    color: ${(l) => l.isActive && l.disabled == !1 ? s(
  l.theme,
  "MenuItem",
  l.color,
  "focus",
  "icon"
) : s(
  l.theme,
  "MenuItem",
  l.color,
  "enabled",
  "icon"
)};

    ${(l) => l.disabled === !0 && N(l.theme)};
    background: transparent;
  }
  & .sub-menu-icon-lnc {
    margin-left: auto;
    transform: ${(l) => l.showNested ? "rotate(180deg)" : "rotate(0)"};
    transition: transform 0.25s ease;
  }

  ${(l) => l.isActive == !0 && l.disabled == !1 && `background-color: ${s(
  l.theme,
  "MenuItem",
  l.color,
  "focus",
  "background",
  "backgroundOpacity"
)};
    color: ${s(
  l.theme,
  "MenuItem",
  l.color,
  "focus",
  "text"
)};
  `}
  outline: none;

  ${(l) => l.disabled === !0 && N(l.theme)};
  &:hover {
    ${(l) => l.disabled == !1 && `background-color: ${s(
  l.theme,
  "MenuItem",
  l.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
      color: ${s(
  l.theme,
  "MenuItem",
  l.color,
  "hover",
  "text"
)};
      `}
  }
`, ee = H((l, o) => {
  const {
    value: y,
    active: a = null,
    icon: g,
    disabled: f = !1,
    isNested: d = !1,
    showNested: E,
    //----------------
    onFocus: $ = () => {
    },
    onBlur: v = () => {
    },
    onClick: k = () => {
    },
    onKeyDown: M = () => {
    },
    toggleNested: c = () => {
    },
    onItemSelected: C = () => {
    },
    //----------------
    className: x = "",
    style: A = {},
    color: S = "primary",
    size: O = "small",
    iconProps: p,
    children: D,
    ...F
  } = l, P = { theme: Z(), color: S, style: A, size: O }, r = J(), [R, u] = Q(a ?? !1);
  W(() => {
    u(a);
  }, [a]);
  const z = (e) => {
    f == !1 && (d && c && c(), C(e, y)), k(k);
  }, B = (e) => {
    u(!0), $(e);
  }, K = (e) => {
    a == null && u(!1), v(e);
  }, T = (e) => {
    e.preventDefault(), e.key == "ArrowDown" ? h(o ? o.current : r.current) : e.key == "ArrowUp" ? b(o ? o.current : r.current) : (e.key == "Enter" || e.keyCode == 32) && f == !1 && (d && c && c(), C(e, y)), M(e);
  }, h = (e) => {
    if (e != null && e.nextSibling) {
      let n = j(e);
      if (n != null && n.node && (n == null ? void 0 : n.type) == "item")
        n.node.focus();
      else if (n != null && n.node && (n == null ? void 0 : n.type) == "nested") {
        let i = U(n.node);
        i && i.focus();
      } else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && h(e.parentElement);
    } else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && h(e.parentElement);
  }, b = (e) => {
    if (e != null && e.previousSibling) {
      let n = q(e);
      if (n != null && n.node && (n == null ? void 0 : n.type) == "item")
        n.node.focus();
      else if (n != null && n.node && (n == null ? void 0 : n.type) == "nested") {
        let i = L(n.node);
        i && i.focus();
      } else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && b(e.parentElement);
    } else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && b(e.parentElement);
  }, j = (e) => {
    for (; e = e.nextSibling; ) {
      if (t(e, "menu-item-lnc"))
        return { node: e, type: "item" };
      if (t(e, "nested-item-lnc"))
        return { node: e, type: "nested" };
    }
    return null;
  }, q = (e) => {
    for (; e = e.previousSibling; ) {
      if (t(e, "menu-item-lnc"))
        return { node: e, type: "item" };
      if (t(e, "nested-item-lnc"))
        return { node: e, type: "nested" };
    }
    return null;
  }, U = (e) => {
    var n;
    return (n = Array.from(e.querySelectorAll(".menu-item-lnc"))) == null ? void 0 : n[0];
  }, L = (e) => {
    var n;
    return (n = Array.from(e.querySelectorAll(".menu-item-lnc"))) == null ? void 0 : n.pop();
  }, t = (e, n) => {
    var i = " " + e.className + " ", V = " " + n + " ";
    return i.indexOf(V) != -1;
  };
  return /* @__PURE__ */ m(_, { children: /* @__PURE__ */ G(
    I,
    {
      ref: o || r,
      className: "menu-item-lnc " + (d ? "nested-menu-item-lnc " : "") + (E ? "spread-nested-item-lnc " : "") + x,
      ...P,
      disabled: f,
      tabIndex: 0,
      onKeyDown: T,
      onFocus: B,
      onBlur: K,
      onClick: z,
      isActive: R,
      showNested: E,
      ...F,
      children: [
        g && /* @__PURE__ */ m(w, { icon: g, className: "menu-icon-lnc", ...p }),
        /* @__PURE__ */ m("div", { children: D }),
        d && /* @__PURE__ */ m(w, { icon: "angle-down", className: "sub-menu-icon-lnc" })
      ]
    }
  ) });
});
ee.displayName = "MENU_ITEM";
export {
  ee as default
};