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

Design system of Frontify

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