import { jsx as i, jsxs as h } from "react/jsx-runtime";
import { forwardRef as lo, useState as c, useEffect as ao } from "react";
import po from "react-dom";
import { usePopper as io } from "react-popper";
import { noop as u } from "es-toolkit/function";
import { isNil as co } from "es-toolkit/predicate";
import P from "../../utils/classNames.js";
import { getOrCreatePortalRoot as fo } from "../../utils/portalRoot.js";
import mo, { DEFAULT_EVENT_TYPES as uo } from "../../hooks/useClickOutside.js";
import go from "../menuItems/MenuItems.js";
import wo from "../menuItems/MenuItemList.js";
import Co from "./DropdownToggleButton.js";
import bo from "./SplitCaretButton.js";
import Bo from "./Caret.js";
const Do = (r, s) => r && s ? "top-end" : !r && s ? "top-start" : r && !s ? "bottom-end" : "bottom-start", No = () => lo((r, s) => {
  const {
    id: g = Math.random().toString(36).slice(2, 16),
    "aria-label": R,
    items: T = [],
    bsSize: w = "md",
    bsStyle: C = "default",
    variant: k,
    disabled: b = !1,
    iconName: y,
    iconOnly: B = !1,
    title: E,
    splitButton: e = !1,
    customDropdown: D,
    open: t,
    dropup: L = !1,
    pullRight: f = !1,
    noCaret: x = !1,
    onOpen: I = u,
    onClose: j = u,
    onLabelButtonClick: U = u,
    usePortal: l = !1,
    popperConfig: _,
    toggleButtonType: v = "button",
    toggleClassName: N = "",
    dropdownClassName: z,
    className: A = "",
    ...F
  } = r, [O, m] = c(t), [V, Y] = c(null), [S, q] = c(null), [G, H] = c(null), J = {
    placement: Do(f, L),
    modifiers: []
  }, K = e && f ? G : V, { styles: Q, attributes: W } = io(K, S, _ || J), n = co(t), a = n ? O : t, X = mo(
    (o) => {
      l && S?.contains(o.target) || p();
    },
    uo,
    !!a
    // only listen to clicks outside when the dropdown is open
  ), Z = fo(), $ = !x && !e && !B;
  ao(() => {
    n || m(t);
  }, [n, t]);
  const d = (o) => {
    (n ? O : t) ? p() : oo(o);
  }, oo = (o) => {
    n && m(!0), o && I(o);
  }, p = () => {
    n && m(!1), j();
  }, eo = () => {
    p(), U();
  }, to = (o) => {
    d(o);
  }, no = (o) => {
    e ? eo() : d(o);
  }, ro = P("dropdown", "btn-group", a && "open", A), so = P(
    l && "dropdown-portal",
    e && f && "pull-right",
    z
  ), M = /* @__PURE__ */ i(
    wo,
    {
      className: so,
      ref: q,
      style: Q.popper,
      ...W.popper,
      children: D || /* @__PURE__ */ i(go, { items: T, closeMenu: d })
    }
  );
  return /* @__PURE__ */ h("div", { ...F, className: ro, ref: X, children: [
    /* @__PURE__ */ h(
      Co,
      {
        id: g,
        "aria-label": R,
        splitButton: e,
        bsStyle: C,
        bsSize: w,
        variant: k,
        iconOnly: B,
        iconName: y,
        disabled: b,
        ref: Y,
        onClick: no,
        outerRef: s,
        toggleButtonType: v,
        className: N,
        children: [
          E,
          $ && /* @__PURE__ */ i(Bo, {})
        ]
      }
    ),
    e && /* @__PURE__ */ i(
      bo,
      {
        id: g,
        bsStyle: C,
        bsSize: w,
        disabled: b,
        className: N,
        onClick: to,
        ref: H
      }
    ),
    a && l && po.createPortal(M, Z),
    a && !l && M
  ] });
}), _o = No();
export {
  _o as default
};
//# sourceMappingURL=ButtonDropdown.js.map
