import { ref as y, onUnmounted as de, computed as B, nextTick as U, onMounted as fe, onUpdated as ve, onDeactivated as me, onBeforeUnmount as re, watch as K, defineComponent as he, useSlots as pe, useTemplateRef as j, openBlock as Z, createElementBlock as ge, normalizeStyle as H, createBlock as ne, resolveDynamicComponent as Ae, normalizeClass as oe, unref as R, withCtx as X, renderSlot as J, createElementVNode as ie, createVNode as ae, createTextVNode as Ie, toDisplayString as Te, createCommentVNode as be } from "vue";
import { debounce as le, uniqueId as Ee } from "es-toolkit/compat";
import { i as Q, j as Oe, e as ye, f as we } from "./index-CLv1CFWG.js";
import { DEBOUNCE as z } from "./constants.js";
import { t as Ce } from "./locale.js";
import Se from "./Button.js";
import _e from "./Dropdown.js";
import De from "./Icon.js";
import { t as p, i as Be } from "./templateRefNarrowing-CeANDylX.js";
import { debounce as Me } from "es-toolkit";
import { getOwnerDomContext as ee } from "./utils/helpers.js";
import { _ as Re } from "./_plugin-vue_export-helper-CHgC5LLL.js";
function We(t = {}) {
  const { duration: e = 300, initialVisible: a = !1 } = t, [o, n] = Q(a), [i, l] = Q(a), [s, c] = Q(!1), r = y(null);
  function g() {
    r.value !== null && (clearTimeout(r.value), r.value = null);
  }
  function v(f) {
    g(), o.value !== f && n(), i.value !== f && l(), s.value && c();
  }
  function A(f) {
    g(), f ? (o.value || n(), i.value || l(), s.value && c()) : (i.value && l(), s.value || c(), r.value = setTimeout(() => {
      o.value && n(), s.value && c(), r.value = null;
    }, e));
  }
  function O() {
    A(!0);
  }
  function w() {
    A(!1);
  }
  function u() {
    g();
  }
  return de(() => {
    u();
  }), {
    isVisible: o,
    shouldShow: i,
    shouldHide: s,
    toggle: A,
    show: O,
    hide: w,
    setVisible: v,
    cleanup: u
  };
}
const Ne = {
  TRACKER: -1,
  DROPDOWN: 1e3
}, te = {
  AUTO_ACTION: "auto-action-",
  INDEX_BASED: "index-",
  MORE_MENU: "more-actions-menu-"
}, b = {
  ACTION_ID: "data-action-id",
  PROCESSED: "data-more-actions-processed"
}, ue = 300, q = /* @__PURE__ */ new WeakMap();
function G(t) {
  if (!t)
    return;
  const e = Array.from(t.children), a = /* @__PURE__ */ new Set();
  e.forEach((n) => {
    const i = n.getAttribute(b.ACTION_ID);
    i && a.add(i);
  });
  let o = 0;
  for (; a.has(`auto-action-${o}`); )
    o++;
  e.forEach((n) => {
    n.hasAttribute(b.ACTION_ID) || (n.setAttribute(b.ACTION_ID, `${te.AUTO_ACTION}${o}`), o++);
  });
}
function ce(t) {
  const e = /* @__PURE__ */ new Map();
  return t.forEach((a, o) => {
    const n = a.getAttribute(b.ACTION_ID);
    n ? e.set(a, n) : e.set(a, `${te.INDEX_BASED}${o}`);
  }), e;
}
function xe(t, e) {
  const a = [];
  t.forEach((o) => {
    e.has(o) || a.push(o);
  }), a.forEach((o) => {
    t.delete(o);
  });
}
function se(t, e, a) {
  const o = q.get(t);
  if (o && (clearTimeout(o), q.delete(t)), a.has(e))
    t.removeAttribute(b.PROCESSED), t.classList.add("invisible");
  else {
    const n = setTimeout(() => {
      t.isConnected && t.setAttribute(b.PROCESSED, "true"), q.delete(t);
    }, z.FAST);
    q.set(t, n), t.classList.remove("invisible");
  }
}
function Y(t, e) {
  if (!t)
    return;
  Array.from(
    t.querySelectorAll(`[${b.ACTION_ID}]`)
  ).filter((n) => n.querySelectorAll(`[${b.ACTION_ID}]`).length === 0).forEach((n) => {
    const i = n.getAttribute(b.ACTION_ID);
    i && e.has(i) ? n.classList.remove("hidden") : n.classList.add("hidden");
  });
}
function Ve({
  actionsContainerRef: t,
  overflowIds: e,
  moreDropdownMenuRef: a,
  trackerElementRef: o,
  onOverflowChange: n
}) {
  const i = y(!1), l = y(""), s = B(() => p(o.value)), c = Oe(s);
  function r(u, f, I) {
    e.value.clear(), u.forEach((m) => e.value.add(m)), f.forEach((m) => {
      const h = I.get(m) || m.getAttribute(b.ACTION_ID) || void 0;
      h && se(m, h, e.value);
    });
  }
  function g() {
    const u = p(t.value), f = p(o.value);
    if (!u || !f) {
      i.value = !1;
      return;
    }
    const I = Array.from(u.children).filter((E) => E instanceof HTMLElement), m = ce(I), h = /* @__PURE__ */ new Set(), { ownerWin: S } = ee(u), C = S.getComputedStyle(u), W = C.columnGap || C.gap, M = W ? parseFloat(W) : 0;
    I.forEach((E, D) => {
      const T = m.get(E) || E.getAttribute(b.ACTION_ID) || void 0, V = E.getBoundingClientRect();
      (D < I.length - 1 ? V.right + M : V.right) > c.left.value && T && h.add(T);
    });
    const _ = Array.from(e.value).sort().join(","), d = Array.from(h).sort().join(",");
    _ !== d && (r(h, I, m), Y(p(a.value), e.value), n && l.value !== d && (l.value = d, U(() => {
      n();
    }))), i.value = !1;
  }
  const v = Me(g, z.FAST);
  function A() {
    i.value || !p(t.value) || !p(o.value) || (i.value = !0, v());
  }
  function O() {
    c.update();
  }
  function w() {
    v.cancel(), i.value = !1;
  }
  return {
    calculateOverflow: A,
    applyElementVisibility: se,
    updateOverflowState: r,
    updateTrackerBounding: O,
    cleanup: w,
    isProcessing: i
  };
}
function ke({
  actionsContainerRef: t,
  overflowIds: e,
  moreDropdownMenuRef: a,
  trackerElementRef: o,
  moreDropdownWidth: n,
  calculateMoreButtonWidth: i,
  hasMoreActionsSlot: l,
  onOverflowChange: s
}) {
  const c = y(!1), {
    calculateOverflow: r,
    applyElementVisibility: g,
    updateOverflowState: v,
    updateTrackerBounding: A,
    cleanup: O,
    isProcessing: w
  } = Ve({
    actionsContainerRef: t,
    overflowIds: e,
    moreDropdownMenuRef: a,
    trackerElementRef: o,
    onOverflowChange: s
  });
  let u = null, f = null, I = null;
  function m() {
    e.value.clear(), n.value = 0;
  }
  function h() {
    f && (f(), f = null), I && (I(), I = null);
  }
  const S = B(() => p(t.value)), C = le(
    () => {
      const d = p(t.value);
      !d || !l.value || (G(d), h(), O(), _());
    },
    z.FAST,
    { leading: !1, trailing: !0 }
  );
  function W() {
    const d = p(t.value);
    if (!d || !l.value) return;
    const E = Array.from(d.children), D = ce(E), T = new Set(D.values());
    xe(e.value, T);
    const { stop: V } = ye(S, () => {
      A(), r();
    });
    f = V;
    const { stop: k } = we(
      E,
      ($) => {
        if (w.value)
          return;
        let F = !1;
        const N = new Set(e.value);
        if ($.forEach((L) => {
          const P = L.target, x = D.get(P) || P.getAttribute(b.ACTION_ID) || void 0;
          L.intersectionRatio === 1 ? x && N.has(x) && (N.delete(x), F = !0) : x && !N.has(x) && (N.add(x), F = !0);
        }), F) {
          const L = Array.from(e.value).sort().join(","), P = Array.from(N).sort().join(",");
          L !== P && (v(N, E, D), Y(p(a.value), e.value), s && U(() => {
            s();
          }));
        }
      },
      { root: d }
    );
    I = k, E.forEach(($) => {
      const F = D.get($) || $.getAttribute(b.ACTION_ID) || "";
      g($, F, e.value);
    }), r(), Y(p(a.value), e.value);
  }
  function M() {
    const d = p(t.value);
    d && l.value && (G(d), W(), n.value === 0 && (n.value = i()), u || (u = new MutationObserver(C), u.observe(d, {
      childList: !0,
      // Watch for added/removed children
      subtree: !1
      // Only watch direct children
    })));
  }
  const _ = le(
    () => {
      c.value || (c.value = !0, M(), c.value = !1);
    },
    z.FAST,
    { leading: !0 }
  );
  fe(() => {
    l.value && (G(p(t.value)), M());
  }), ve(() => {
    if (!l.value) return;
    const d = p(t.value);
    G(d), d && Array.from(d.children).length === 0 && m(), h(), O(), _();
  }), me(() => {
    h(), O(), C.cancel(), _.cancel(), u && (u.disconnect(), u = null);
  }), re(() => {
    h(), O(), C.cancel(), _.cancel(), u && (u.disconnect(), u = null);
  });
}
function $e({
  moreDropdownRef: t,
  actionsContainerRef: e,
  moreButtonAlign: a,
  hasOverflowActions: o
}) {
  const n = () => {
    const l = t.value;
    if (!Be(l)) return 0;
    const s = l.$el.getBoundingClientRect().width;
    if (a === "separate") {
      const c = p(e.value);
      if (!c) return s;
      const { ownerWin: r } = ee(c), g = r.getComputedStyle(c), v = parseFloat(g.gap) || 0;
      return s + v;
    }
    return s;
  }, i = y(0);
  return K(o, (l) => {
    l && t.value && U(() => {
      const s = n();
      s > 0 && (i.value = s);
    });
  }), {
    calculateMoreButtonWidth: n,
    moreButtonWidth: i
  };
}
function Fe({ actionsContainerRef: t, overflowIds: e }) {
  const a = y(0), o = y(!1), n = y(!1);
  let i = null;
  const l = () => {
    const r = p(t.value);
    if (!r) {
      a.value = 0;
      return;
    }
    let g = 0;
    const v = Array.from(r.children);
    v.forEach((A, O) => {
      const w = A.getAttribute(b.ACTION_ID), u = !w || !e.value.has(w), f = A.classList.contains("invisible");
      if (u && !f) {
        const I = A.getBoundingClientRect();
        if (g += I.width, O < v.length - 1 && r) {
          const { ownerWin: m } = ee(r), h = m.getComputedStyle(r), S = h.columnGap || h.gap, C = S ? parseFloat(S) : 0;
          g += C;
        }
      }
    }), a.value = g;
  }, s = () => {
    n.value = !0, i && clearTimeout(i), i = setTimeout(() => {
      o.value || (o.value = !0, U(() => {
        U(() => {
          l(), o.value = !1, n.value = !1;
        });
      }));
    }, ue + 100);
  };
  return K(e, () => {
    s();
  }), {
    visibleElementsWidth: a,
    isRecalculatingWidth: o,
    isRecalculatingWithDelay: n,
    calculateVisibleElementsWidth: l,
    calculateVisibleElementsWidthDelayed: s,
    cleanup: () => {
      i && (clearTimeout(i), i = null), n.value = !1;
    }
  };
}
const Ue = ["id"], ze = /* @__PURE__ */ he({
  __name: "MoreActions",
  props: {
    actionsContainerClass: { default: void 0 },
    actionsContainerTag: { default: "div" },
    moreButtonText: { default: () => Ce("ll.more") },
    width: { default: void 0 },
    dropdownMode: { default: "default" },
    moreButtonAlign: { default: "separate" }
  },
  setup(t) {
    const e = t, a = pe(), o = B(() => !!a["more-actions"]), n = j("actionsContainerRef"), i = j("moreDropdownRef"), l = j("moreDropdownMenuRef"), s = j("trackerElementRef"), c = y(/* @__PURE__ */ new Set()), r = y(!1), g = Ee(te.MORE_MENU), v = y(null), A = y(!1), {
      isVisible: O,
      shouldShow: w,
      toggle: u
    } = We({
      duration: ue,
      initialVisible: !1
    }), f = B(() => c.value.size > 0), { calculateMoreButtonWidth: I, moreButtonWidth: m } = $e({
      moreDropdownRef: i,
      actionsContainerRef: n,
      moreButtonAlign: e.moreButtonAlign,
      hasOverflowActions: f
    }), {
      visibleElementsWidth: h,
      isRecalculatingWithDelay: S,
      calculateVisibleElementsWidthDelayed: C,
      cleanup: W
    } = Fe({
      actionsContainerRef: n,
      overflowIds: c
    }), M = B(() => o.value && f.value && !S.value && A.value), _ = B(() => r.value.toString()), d = B(() => M.value ? `calc(100% - ${m.value}px)` : "100%"), E = B(() => e.moreButtonAlign === "together" ? { left: `${h.value}px`, right: "auto" } : { right: "0", left: "auto" });
    ke({
      actionsContainerRef: n,
      overflowIds: c,
      moreDropdownMenuRef: l,
      trackerElementRef: s,
      moreDropdownWidth: m,
      calculateMoreButtonWidth: I,
      hasMoreActionsSlot: o,
      onOverflowChange: C
    }), K(
      () => o.value && f.value && !S.value,
      (T) => {
        v.value && (clearTimeout(v.value), v.value = null), T ? v.value = setTimeout(() => {
          A.value = !0;
        }, z.FAST) : A.value = !1;
      }
    ), K(M, (T) => {
      u(T);
    });
    function D(T) {
      r.value = T;
    }
    return re(() => {
      W(), v.value && clearTimeout(v.value);
    }), (T, V) => (Z(), ge("div", {
      class: "stash-more-actions relative overflow-x-hidden",
      "data-test": "stash-more-actions",
      style: H({ width: e.width })
    }, [
      (Z(), ne(Ae(e.actionsContainerTag), {
        ref_key: "actionsContainerRef",
        ref: n,
        "data-test": "stash-more-actions__container",
        style: H({
          width: d.value,
          minWidth: R(m) ? `${R(m)}px` : void 0
        }),
        class: oe(["stash-more-actions__container flex items-center gap-2 overflow-x-hidden", e.actionsContainerClass])
      }, {
        default: X(() => [
          J(T.$slots, "default")
        ]),
        _: 3
      }, 8, ["style", "class"])),
      ie("div", {
        ref_key: "trackerElementRef",
        ref: s,
        class: "stash-more-actions__tracker",
        style: H({
          position: "absolute",
          right: "0px",
          top: "0",
          visibility: "hidden",
          width: R(m) + "px",
          height: "100%",
          pointerEvents: "none",
          zIndex: R(Ne).TRACKER
        })
      }, null, 4),
      o.value ? (Z(), ne(_e, {
        key: 0,
        ref_key: "moreDropdownRef",
        ref: i,
        class: oe([
          "!absolute top-0",
          R(w) ? "animate-fade-in" : "animate-fade-out",
          { invisible: !R(O) }
        ]),
        style: H(E.value),
        onToggle: D
      }, {
        toggle: X(({ toggle: k }) => [
          J(T.$slots, "toggle", {
            toggle: k,
            isOpen: r.value
          }, () => [
            ae(Se, {
              class: "button -border-gray-500 text-gray-500 flex w-full items-center justify-between -border",
              secondary: "",
              "aria-expanded": _.value,
              onClick: k
            }, {
              default: X(() => [
                Ie(Te(e.moreButtonText) + " ", 1),
                ae(De, {
                  class: "-ml-1.5",
                  name: "action-dots"
                })
              ]),
              _: 1
            }, 8, ["aria-expanded", "onClick"])
          ])
        ]),
        default: X(() => [
          ie("div", {
            id: R(g),
            ref_key: "moreDropdownMenuRef",
            ref: l,
            "data-test": "stash-more-actions__dropdown",
            class: "flex flex-col gap-1.5 p-1.5"
          }, [
            J(T.$slots, "more-actions")
          ], 8, Ue)
        ]),
        _: 3
      }, 8, ["class", "style"])) : be("", !0)
    ], 4));
  }
}), Le = {}, Pe = {
  $style: Le
}, nt = /* @__PURE__ */ Re(ze, [["__cssModules", Pe]]);
export {
  nt as default
};
//# sourceMappingURL=MoreActions.js.map
