@frontify/fondue/dist/components/MenuItem/MenuItem.es.js

Design system of Frontify

import { jsx as t, jsxs as p, Fragment as k } from "react/jsx-runtime";
import { IconCheckMark as H, IconCaretRight as W } from "@frontify/fondue-icons";
import { useFocusRing as z } from "@react-aria/focus";
import { MenuItemContent as O } from "./MenuItemContent.es.js";
import { getItemElementType as V } from "../../utilities/elements.es.js";
import { FOCUS_STYLE_NO_OFFSET as D } from "../../utilities/focusStyle.es.js";
import { merge as r } from "../../utilities/merge.es.js";
import { MenuItemContentSize as n, SelectionIndicatorIcon as i, MenuItemStyle as e } from "./types.es.js";
const X = {
  [n.XSmall]: "tw-px-5 tw-py-2 tw-min-h-[36px]",
  [n.Small]: "tw-px-5 tw-py-2.5 tw-min-h-[36px]",
  [n.Large]: "tw-px-5 tw-py-3 tw-min-h-[60px]"
}, $ = {
  [e.Primary]: {
    Default: "tw-text-text-x-weak",
    Active: "tw-text-text",
    Disabled: "tw-text-text-disabled"
  },
  [e.Danger]: {
    Default: "tw-text-red-60",
    Active: "tw-text-red-70",
    Disabled: "tw-text-text-disabled"
  },
  [e.Warning]: {
    Default: "tw-text-text-warning",
    Active: "tw-text-yellow-90",
    Disabled: "tw-text-text-disabled"
  }
}, K = {
  [e.Primary]: "hover:tw-text-text",
  [e.Danger]: "hover:tw-text-text-negative",
  [e.Warning]: "hover:tw-text-text-warning"
}, _ = "tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2", U = "hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover", d = r(["tw-w-full tw-text-left tw-py-2 tw-px-5 tw-rounded", U]), Y = "tw-bg-box-selected", q = ({
  title: A,
  decorator: N,
  switchComponent: R,
  subtitle: M,
  size: o = n.Small,
  style: u = e.Primary,
  disabled: m = !1,
  active: s = !1,
  checked: T = !1,
  selectionIndicator: F = i.Check,
  children: a,
  link: S,
  onBlur: f,
  onClick: l,
  onFocus: g,
  onMouseEnter: b,
  onMouseOut: I,
  onMouseOver: h,
  onMouseLeave: C,
  "data-test-id": w = "menu-item",
  type: L
}) => {
  const E = o === n.XSmall ? 16 : 20, P = {
    [i.CaretRight]: /* @__PURE__ */ t(W, { "data-test-id": `${w}-caret`, size: E }),
    [i.Check]: s && /* @__PURE__ */ t(H, { "data-test-id": `${w}-active`, size: E }),
    [i.None]: null
  }[F], { isFocusVisible: v, focusProps: y } = z();
  let x = "Default";
  m ? x = "Disabled" : s && (x = "Active");
  const j = $[u][x], c = V(S, l);
  return /* @__PURE__ */ p(k, { children: [
    a ? /* @__PURE__ */ p(
      "li",
      {
        "data-test-id": w,
        "data-type": L,
        role: "menuitem",
        className: r([
          "tw-text-sm tw-leading-4 tw-text-text-weak",
          _,
          T ? Y : ""
        ]),
        children: [
          c === "a" && /* @__PURE__ */ t(
            "a",
            {
              href: S,
              className: r([d, v && D]),
              onBlur: f,
              onClick: l,
              onFocus: g,
              onMouseEnter: b,
              onMouseLeave: C,
              onMouseOut: I,
              onMouseOver: h,
              ...y,
              children: a
            }
          ),
          c === "button" && /* @__PURE__ */ t(
            "button",
            {
              type: "button",
              disabled: m,
              className: r([d, v && D]),
              onBlur: f,
              onClick: l,
              onFocus: g,
              onMouseEnter: b,
              onMouseLeave: C,
              onMouseOut: I,
              onMouseOver: h,
              ...y,
              children: a
            }
          ),
          c === "span" && /* @__PURE__ */ t("span", { className: d, children: a })
        ]
      }
    ) : null,
    !a && /* @__PURE__ */ p(
      "div",
      {
        className: r([
          _,
          K[u],
          X[o],
          m && "tw-bg-box-disabled tw-pointer-events-none",
          s && "tw-font-medium",
          j
        ]),
        children: [
          /* @__PURE__ */ t(
            O,
            {
              title: A,
              decorator: N,
              subtitle: o === n.Large ? M : void 0,
              size: o,
              switchComponent: R
            }
          ),
          /* @__PURE__ */ t("div", { className: "tw-flex-none", children: P })
        ]
      }
    )
  ] });
};
q.displayName = "FondueMenuItem";
export {
  q as MenuItem,
  $ as menuItemTextColorRecord
};
//# sourceMappingURL=MenuItem.es.js.map