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

React component library

import { jsx as d, 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 $ from "./Icon.js";
import { c as o, d as Y, i as v } 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) => o(
  l.theme,
  "MenuItem",
  l.color,
  l.isActive === !0 ? "active" : "enabled",
  "text"
)};
  &:hover {
    ${(l) => l.disabled === !1 && `background-color: ${o(
  l.theme,
  "MenuItem",
  l.color,
  "hover",
  "background",
  "backgroundOpacity"
)};`}

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