@frontify/fondue/dist/components/Dropdown/SelectMenu/SelectMenuItem.es.js

Design system of Frontify

import { jsx as o } from "react/jsx-runtime";
import { useFocusRing as w } from "@react-aria/focus";
import { useOption as S } from "@react-aria/listbox";
import { mergeProps as b } from "@react-aria/utils";
import { useRef as F } from "react";
import { FOCUS_STYLE_INSET as I } from "../../../utilities/focusStyle.es.js";
import { merge as g } from "../../../utilities/merge.es.js";
import { MenuItem as h } from "../../MenuItem/MenuItem.es.js";
const x = ({ state: r, menuItem: s, node: i }) => {
  const e = F(null), { optionProps: n, isSelected: m } = S(
    {
      key: i.key,
      shouldFocusOnHover: !1
    },
    r,
    e
  ), { title: l, decorator: c, subtitle: p, size: u, style: a, disabled: t, selectionIndicator: f } = s, { isFocusVisible: d, focusProps: v } = w();
  return /* @__PURE__ */ o(
    "li",
    {
      ...b(n, v),
      "data-test-id": "menu-item",
      className: g([
        "tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none",
        t && "tw-pointer-events-none tw-top-px",
        d && I
      ]),
      ref: e,
      children: /* @__PURE__ */ o(
        h,
        {
          title: l,
          decorator: c,
          subtitle: p,
          size: u,
          style: a,
          disabled: t,
          active: m,
          selectionIndicator: f
        }
      )
    }
  );
};
x.displayName = "FondueSelectMenuItem";
export {
  x as SelectMenuItem
};
//# sourceMappingURL=SelectMenuItem.es.js.map