import * as m from "react";
import { useMenuItem as E, REGULAR_ITEM as v } from "./useMenuItem.js";
import { useMenuRootContext as N } from "../root/MenuRootContext.js";
import { useRenderElement as P } from "../../utils/useRenderElement.js";
import { useBaseUiId as g } from "../../utils/useBaseUiId.js";
import { useCompositeListItem as h } from "../../composite/list/useCompositeListItem.js";
import { useMenuPositionerContext as x } from "../positioner/MenuPositionerContext.js";
const C = /* @__PURE__ */ m.forwardRef(function(r, n) {
  const {
    render: A,
    className: B,
    id: u,
    label: a,
    nativeButton: d = !1,
    disabled: e = !1,
    closeOnClick: c = !0,
    ...p
  } = r, i = h({
    label: a
  }), t = x(!0), f = g(u), {
    store: o
  } = N(), s = o.useState("isActive", i.index), l = o.useState("itemProps"), {
    getItemProps: I,
    itemRef: M
  } = E({
    closeOnClick: c,
    disabled: e,
    highlighted: s,
    id: f,
    store: o,
    nativeButton: d,
    nodeId: t == null ? void 0 : t.nodeId,
    itemMetadata: v
  }), R = m.useMemo(() => ({
    disabled: e,
    highlighted: s
  }), [e, s]);
  return P("div", r, {
    state: R,
    props: [l, p, I],
    ref: [M, n, i.ref]
  });
});
process.env.NODE_ENV !== "production" && (C.displayName = "MenuItem");
export {
  C as MenuItem
};
