import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { useState as h, useMemo as m, useCallback as g } from "react";
import { Popover as y, PopoverTrigger as u, PopoverContent as b } from "../../../popover/PopoverPrimitive.js";
import v from "../../../icon/Icon.js";
import f from "../../../command/Command.js";
const x = ({ title: r, titleOptions: o, onTitleChange: a }) => {
  const [n, s] = h(!1), i = m(() => [{ heading: "", items: o.map((e) => ({ label: e.label, value: e.value, selected: e.value === r })) }], [o, r]), c = g(
    (e) => {
      const p = Array.isArray(e) ? e[0] : e;
      a == null || a(p), s(!1);
    },
    [a]
  ), d = m(() => {
    var e;
    return ((e = o.find((p) => p.value === r)) == null ? void 0 : e.label) ?? r;
  }, [r, o]);
  return /* @__PURE__ */ l(y, { open: n, onOpenChange: s, children: [
    /* @__PURE__ */ t(u, { asChild: !0, children: /* @__PURE__ */ l(
      "button",
      {
        type: "button",
        className: "flex shrink-0 cursor-pointer items-center gap-[var(--spacing-2)] border-none bg-transparent p-0 text-[length:var(--typography-typography-components-h3-font-size)] font-[var(--typography-typography-components-h3-font-weight)] leading-[var(--typography-typography-components-h3-line-height)] tracking-[var(--typography-typography-components-h3-letter-spacing)] text-[var(--base-foreground)]",
        "aria-expanded": n,
        "aria-haspopup": "listbox",
        children: [
          d,
          /* @__PURE__ */ t(v, { name: "ChevronDown", size: 20 })
        ]
      }
    ) }),
    /* @__PURE__ */ t(b, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", side: "bottom", children: /* @__PURE__ */ t(f, { groups: i, onItemSelect: c, isPopover: !0 }) })
  ] });
};
x.displayName = "TitleCombobox";
export {
  x as default
};
//# sourceMappingURL=TitleCombobox.js.map
