import { mapToAriaProps as j, getDisabledItemIds as T, getMenuItems as B } from "../ActionMenu/Aria/helper.es.es.js";
import { SelectMenu as J } from "./SelectMenu/SelectMenu.es.es.js";
import { Trigger as Q, TriggerSize as $, InputEmphasis as Y } from "../Trigger/Trigger.es.es.js";
import { useMemoizedId as Z } from "../../hooks/useMemoizedId.es.es.js";
import { useButton as ee } from "../../../../../@react-aria/button/dist/module.es.js";
import { useFocusRing as te, FocusScope as oe } from "../../../../../@react-aria/focus/dist/module.es.js";
import { useOverlay as ae, DismissButton as C } from "../../../../../@react-aria/overlays/dist/module.es.js";
import { useSelect as re, HiddenSelect as se } from "../../../../../@react-aria/select/dist/module.es.js";
import { mergeProps as le } from "../../../../../@react-aria/utils/dist/module.es.js";
import { useSelectState as ie } from "../../../../../@react-stately/select/dist/module.es.js";
import { merge as ne } from "../../utilities/merge.es.es.js";
import { Validation as I } from "../../utilities/validation.es.es.js";
import e, { useRef as u, useEffect as me } from "react";
import { createPortal as de } from "react-dom";
import { usePopper as ce } from "../../../../../react-popper/lib/esm/usePopper.es.js";
import { useDropdownAutoHeight as pe, DEFAULT_DROPDOWN_MAX_HEIGHT as ue } from "./useDropdownAutoHeight.es.es.js";
import { MenuItemTextColorState as f, menuItemTextColorRecord as fe } from "../MenuItem/MenuItem.es.es.js";
import { MenuItemStyle as we, MenuItemContentSize as z } from "../MenuItem/types.es.es.js";
import { MenuItemContent as be } from "../MenuItem/MenuItemContent.es.es.js";
import { LoadingCircle as ge, LoadingCircleSize as Se } from "../LoadingCircle/LoadingCircle.es.es.js";
import { AnimatePresence as he } from "../../../../../framer-motion/dist/es/components/AnimatePresence/index.es.js";
import { motion as xe } from "../../../../../framer-motion/dist/es/render/dom/motion.es.js";
var Ee = /* @__PURE__ */ ((a) => (a.Start = "Start", a.End = "End", a))(Ee || {});
const ve = (a, r) => T(B(a)).has(r) ? null : a.map(({ menuItems: n }) => n).flat().find(({ id: n }) => n.toString() === (r == null ? void 0 : r.toString())) || null, qe = ({
  id: a,
  menuBlocks: r,
  onChange: n,
  activeItemId: l,
  placeholder: M = "Select item",
  size: c = "Small",
  disabled: i = !1,
  clearable: R = !1,
  ariaLabel: F = "Dropdown",
  decorator: w,
  autoResize: p = !0,
  validation: b = I.Default,
  alignment: L = "Start",
  position: O = "Bottom",
  emphasis: A = Y.Default
}) => {
  var g;
  const o = l ? ve(r, l) : null, S = j(F, r), t = ie({
    ...S,
    defaultSelectedKey: l,
    onSelectionChange: (d) => n(d),
    disabledKeys: T(B(r))
  }), s = u(null), { triggerProps: K, valueProps: H, menuProps: N } = re({ ...S, isDisabled: i }, t, s), { buttonProps: h } = ee({ ...K, isDisabled: i }, s), { isOpen: m } = t, { isFocusVisible: k, focusProps: _ } = te(), x = u(null), { overlayProps: V } = ae(
    { isOpen: m, onClose: () => t.close(), shouldCloseOnBlur: !0, isDismissable: !0 },
    x
  );
  me(() => {
    t.disabledKeys.has(l) || t.setSelectedKey(l);
  }, [l, t]);
  const { maxHeight: E } = pe(s, { isOpen: m, autoResize: p }), W = !p || E !== ue, q = o ? f.Active : f.Default, G = i ? f.Disabled : q, U = o ? fe[o.style || we.Primary][G] : "tw-text-text-x-weak", v = R ? () => {
    t.setSelectedKey("");
    const d = t.collection.getFirstKey();
    d && t.selectionManager.setFocusedKey(d);
  } : void 0, y = !!o && !!v, D = u(null), X = {
    ["Top-Start"]: "top-start",
    ["Top-End"]: "top-end",
    ["Bottom-Start"]: "bottom-start",
    ["Bottom-End"]: "bottom-end"
  }, P = ce(s == null ? void 0 : s.current, D.current, {
    placement: X[`${O}-${L}`],
    strategy: "fixed",
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [0, 8]
        }
      },
      {
        name: "flip",
        enabled: !1
      }
    ]
  });
  return /* @__PURE__ */ e.createElement("div", {
    className: "tw-relative tw-w-full tw-font-sans tw-text-s"
  }, /* @__PURE__ */ e.createElement(Q, {
    disabled: i,
    buttonProps: h,
    isFocusVisible: !i && k,
    isOpen: m,
    size: c === "Large" ? $.Large : $.Small,
    emphasis: A,
    onClear: v,
    showClear: y,
    validation: b
  }, /* @__PURE__ */ e.createElement(se, {
    state: t,
    triggerRef: s
  }), /* @__PURE__ */ e.createElement("button", {
    ...le(h, _),
    id: Z(a),
    ref: s,
    "data-test-id": "dropdown-trigger",
    className: ne([
      "tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none",
      c === "Small" ? "tw-py-2 tw-pl-3 tw-min-h-[34px]" : "tw-pl-5 tw-py-4 tw-min-h-[60px]",
      y ? "tw-pr-11" : "tw-pr-7",
      U
    ])
  }, /* @__PURE__ */ e.createElement(be, {
    ariaProps: H,
    title: (o == null ? void 0 : o.title) || M,
    decorator: w != null ? w : o == null ? void 0 : o.decorator,
    subtitle: o == null ? void 0 : o.subtitle,
    size: c === "Small" ? z.Small : z.Large
  }))), de(
    /* @__PURE__ */ e.createElement(he, null, !i && m && W && /* @__PURE__ */ e.createElement(xe.div, {
      ref: D,
      style: {
        ...P.styles.popper,
        width: (g = s.current) == null ? void 0 : g.getBoundingClientRect().width,
        minWidth: "fit-content"
      },
      ...P.attributes.popper,
      className: "tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden",
      key: "content",
      initial: { height: 0 },
      animate: { height: "auto" },
      transition: { ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }
    }, /* @__PURE__ */ e.createElement(oe, {
      restoreFocus: !0
    }, /* @__PURE__ */ e.createElement("div", {
      ...V,
      ref: x,
      style: p ? { maxHeight: E } : {},
      className: "tw-flex tw-flex-col",
      "data-test-id": "dropdown-menu",
      role: "dialog"
    }, /* @__PURE__ */ e.createElement(C, {
      onDismiss: () => close()
    }), /* @__PURE__ */ e.createElement(J, {
      ariaProps: N,
      state: t,
      menuBlocks: r,
      scrollable: !0
    }), /* @__PURE__ */ e.createElement(C, {
      onDismiss: () => close()
    }))))),
    document.body
  ), b === I.Loading && /* @__PURE__ */ e.createElement("span", {
    className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak"
  }, /* @__PURE__ */ e.createElement(ge, {
    size: Se.ExtraSmall
  })));
};
export {
  qe as Dropdown,
  Ee as DropdownAlignment
};
//# sourceMappingURL=Dropdown.es.es.js.map
