import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { forwardRef as E } from "react";
import { cx as b } from "../../utils/classNames.js";
import { useArrowTheme as H } from "../../hooks/useArrowTheme.js";
import { FilterChip as R } from "../filter-chip/FilterChip.js";
import { IconButton as Z } from "../icon-button/IconButton.js";
function q() {
  return /* @__PURE__ */ t(
    "svg",
    {
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "currentColor",
      xmlns: "http://www.w3.org/2000/svg",
      children: /* @__PURE__ */ t("path", { d: "M17 9L12 15L7 9L17 9Z" })
    }
  );
}
const G = E(
  ({
    id: e,
    label: n,
    variant: r,
    inverse: o,
    size: a,
    monochrome: v,
    disabled: m,
    optionalBody: i,
    menuAlignment: g = "leading",
    menuPlacement: w = "below",
    showMenu: d = !1,
    hasPopUp: p,
    controls: f,
    icon: x,
    variantIconButtonBackground: _,
    leadingIcon: y,
    caretIcon: N,
    chipType: B,
    selectedItem: C,
    focused: u,
    hover: s,
    pressed: c,
    renderMenu: I,
    className: L,
    ...$
  }, j) => {
    const D = H(), h = o ?? D.inverse;
    if (n === "")
      return null;
    const F = () => {
      const A = b("tdds-menu-button", {
        "force-focus": !!u,
        "force-hover": !!s,
        "force-pressed": !!c
      });
      return /* @__PURE__ */ l(
        "button",
        {
          id: e,
          type: "button",
          className: A,
          ...h ? { "data-inverse": "true" } : {},
          ...a === "small" ? { "data-size": a } : {},
          ...v ? { "data-monochrome": "true" } : {},
          "aria-disabled": m || void 0,
          "aria-controls": f || `${e}-menu`,
          "aria-describedby": i ? `${e}-optional-body` : void 0,
          "aria-expanded": d || void 0,
          "aria-haspopup": p ? "true" : void 0,
          children: [
            /* @__PURE__ */ t("span", { children: n }),
            /* @__PURE__ */ t("span", { className: "tdds-menu-button__decoration-end", children: /* @__PURE__ */ t(q, {}) })
          ]
        }
      );
    }, M = () => /* @__PURE__ */ t(
      Z,
      {
        id: e,
        icon: x || null,
        a11yLabel: n,
        inverse: o,
        background: _,
        size: a,
        ariaHasPopup: !0,
        disabled: m,
        ariaControls: `${e}-menu`,
        ariaExpanded: d || void 0,
        hover: s,
        pressed: c,
        focused: u
      }
    ), T = () => /* @__PURE__ */ t(
      R,
      {
        id: e,
        chipType: B || "filter",
        leadingIcon: y,
        caretIcon: N,
        selectedItem: C,
        inverse: o,
        showMenu: d || void 0,
        hasPopUp: p,
        hover: s,
        pressed: c,
        focused: u
      }
    ), k = () => r === "button" ? F() : r === "filter-chip" ? T() : M();
    return /* @__PURE__ */ l(
      "div",
      {
        ref: j,
        className: b("tdds-menu-container", L),
        ...h ? { "data-inverse": "true" } : {},
        ...$,
        children: [
          /* @__PURE__ */ l("div", { className: "tdds-menu-container__body", children: [
            k(),
            /* @__PURE__ */ t(
              "div",
              {
                className: "tdds-menu-container__content",
                "data-align": g,
                "data-placement": w,
                children: I
              }
            )
          ] }),
          r === "button" && i ? /* @__PURE__ */ t("div", { className: "tdds-menu-container__optional-body", id: `${e}-optional-body`, children: i }) : null
        ]
      }
    );
  }
);
G.displayName = "MenuButton";
export {
  G as MenuButton
};
//# sourceMappingURL=MenuButton.js.map
