@leaflink/stash 51.12.8 → 51.12.9

package/dist/MoreActions.js

@@ -1,463 +1,442 @@
-import { ref as O, onUnmounted as K, onMounted as Z, onUpdated as J, onDeactivated as Q, onBeforeUnmount as Y, watch as R, nextTick as W, defineComponent as tt, useTemplateRef as M, computed as C, createElementBlock as et, openBlock as ot, normalizeStyle as N, createElementVNode as V, withDirectives as it, normalizeClass as H, renderSlot as L, unref as x, createVNode as $, withCtx as k, createTextVNode as lt, toDisplayString as nt, vShow as at } from "vue";
-import st from "lodash-es/uniqueId";
-import { b as U, c as rt, d as ut, e as ct } from "./index-DA_ft08e.js";
-import { t as dt } from "./locale.js";
-import ft from "./Button.js";
-import vt from "./Dropdown.js";
-import ht from "./Icon.js";
-import X from "lodash-es/debounce";
-import { DEBOUNCE as q } from "./constants.js";
-import { _ as pt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-function wt(e = {}) {
-  const { duration: t = 300, initialVisible: l = !1 } = e, [o, s] = U(l), [n, i] = U(l), [a, u] = U(!1), r = O(null);
-  function d() {
-    r.value !== null && (clearTimeout(r.value), r.value = null);
+import { ref as I, onUnmounted as se, nextTick as V, onMounted as ue, onUpdated as re, onDeactivated as ce, onBeforeUnmount as oe, watch as X, defineComponent as de, useSlots as fe, computed as W, useTemplateRef as U, createElementBlock as ve, openBlock as H, normalizeStyle as z, createBlock as Y, createElementVNode as ee, createCommentVNode as me, resolveDynamicComponent as he, normalizeClass as te, unref as C, withCtx as P, renderSlot as G, createVNode as le, createTextVNode as pe, toDisplayString as ge } from "vue";
+import we from "lodash-es/uniqueId";
+import { b as K, c as Ae, d as Ie, e as Te } from "./index-C14LhAwV.js";
+import { DEBOUNCE as k } from "./constants.js";
+import { t as be } from "./locale.js";
+import Oe from "./Button.js";
+import ye from "./Dropdown.js";
+import Ee from "./Icon.js";
+import Z from "lodash-es/debounce";
+import { _ as Se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function _e(e = {}) {
+  const { duration: t = 300, initialVisible: a = !1 } = e, [n, l] = K(a), [o, i] = K(a), [s, d] = K(!1), c = I(null);
+  function g() {
+    c.value !== null && (clearTimeout(c.value), c.value = null);
   }
-  function v(h) {
-    d(), o.value !== h && s(), n.value !== h && i(), a.value && u();
+  function v(r) {
+    g(), n.value !== r && l(), o.value !== r && i(), s.value && d();
   }
-  function p(h) {
-    d(), h ? (o.value || s(), n.value || i(), a.value && u()) : (n.value && i(), a.value || u(), r.value = setTimeout(() => {
-      o.value && s(), a.value && u(), r.value = null;
+  function w(r) {
+    g(), r ? (n.value || l(), o.value || i(), s.value && d()) : (o.value && i(), s.value || d(), c.value = setTimeout(() => {
+      n.value && l(), s.value && d(), c.value = null;
     }, t));
   }
-  function g() {
-    p(!0);
+  function A() {
+    w(!0);
   }
-  function f() {
-    p(!1);
+  function h() {
+    w(!1);
   }
-  function A() {
-    d();
+  function u() {
+    g();
   }
-  return K(() => {
-    A();
+  return se(() => {
+    u();
   }), {
-    isVisible: o,
-    shouldShow: n,
-    shouldHide: a,
-    toggle: p,
-    show: g,
-    hide: f,
+    isVisible: n,
+    shouldShow: o,
+    shouldHide: s,
+    toggle: w,
+    show: A,
+    hide: h,
     setVisible: v,
-    cleanup: A
+    cleanup: u
   };
 }
-const mt = {
+const De = {
   TRACKER: -1,
   DROPDOWN: 1e3
-}, z = {
+}, Q = {
   AUTO_ACTION: "auto-action-",
   INDEX_BASED: "index-",
   MORE_MENU: "more-actions-menu-"
-}, m = {
-  ACTION_ID: "data-action-id"
-}, gt = 300;
+}, p = {
+  ACTION_ID: "data-action-id",
+  PROCESSED: "data-more-actions-processed"
+}, ae = 300, L = /* @__PURE__ */ new WeakMap();
 function j(e) {
   if (!e)
     return;
-  const t = Array.from(e.children), l = /* @__PURE__ */ new Set();
-  t.forEach((s) => {
-    const n = s.getAttribute(m.ACTION_ID);
-    n && l.add(n);
+  const t = Array.from(e.children), a = /* @__PURE__ */ new Set();
+  t.forEach((l) => {
+    const o = l.getAttribute(p.ACTION_ID);
+    o && a.add(o);
   });
-  let o = 0;
-  for (; l.has(`auto-action-${o}`); )
-    o++;
-  t.forEach((s) => {
-    s.hasAttribute(m.ACTION_ID) || (s.setAttribute(m.ACTION_ID, `${z.AUTO_ACTION}${o}`), o++);
+  let n = 0;
+  for (; a.has(`auto-action-${n}`); )
+    n++;
+  t.forEach((l) => {
+    l.hasAttribute(p.ACTION_ID) || (l.setAttribute(p.ACTION_ID, `${Q.AUTO_ACTION}${n}`), n++);
   });
 }
-function G(e) {
+function ie(e) {
   const t = /* @__PURE__ */ new Map();
-  return e.forEach((l, o) => {
-    const s = l.getAttribute(m.ACTION_ID);
-    s ? t.set(l, s) : t.set(l, `${z.INDEX_BASED}${o}`);
+  return e.forEach((a, n) => {
+    const l = a.getAttribute(p.ACTION_ID);
+    l ? t.set(a, l) : t.set(a, `${Q.INDEX_BASED}${n}`);
   }), t;
 }
-function At(e, t) {
-  const l = [];
-  e.forEach((o) => {
-    t.has(o) || l.push(o);
-  }), l.forEach((o) => {
-    e.delete(o);
+function Be(e, t) {
+  const a = [];
+  e.forEach((n) => {
+    t.has(n) || a.push(n);
+  }), a.forEach((n) => {
+    e.delete(n);
   });
 }
-function P(e, t, l) {
-  l.has(t) ? e.classList.add("tw-invisible") : e.classList.remove("tw-invisible");
+function ne(e, t, a) {
+  const n = L.get(e);
+  if (n && (clearTimeout(n), L.delete(e)), a.has(t))
+    e.removeAttribute(p.PROCESSED), e.classList.add("tw-invisible");
+  else {
+    const l = setTimeout(() => {
+      e.isConnected && e.setAttribute(p.PROCESSED, "true"), L.delete(e);
+    }, k.FAST);
+    L.set(e, l), e.classList.remove("tw-invisible");
+  }
 }
-function F(e, t, l, o) {
+function J(e, t) {
   if (!e)
     return;
-  const s = Array.from(e.children);
-  if (t) {
-    const n = Array.from(t.children);
-    s.forEach((i, a) => {
-      if (a < n.length) {
-        const r = n[a].getAttribute(m.ACTION_ID);
-        r && i.setAttribute(m.ACTION_ID, r);
-      }
-    });
-  }
-  s.forEach((n) => {
-    const i = n.getAttribute(m.ACTION_ID);
-    o && (typeof o == "string" ? o.split(" ").filter(Boolean).forEach((r) => {
-      r && n.classList.add(r);
-    }) : typeof o == "object" && Object.entries(o).forEach(([u, r]) => {
-      r ? n.classList.add(u) : n.classList.remove(u);
-    })), i && l.has(i) ? n.classList.remove("tw-hidden") : n.classList.add("tw-hidden");
+  Array.from(
+    e.querySelectorAll(`[${p.ACTION_ID}]`)
+  ).filter((l) => l.querySelectorAll(`[${p.ACTION_ID}]`).length === 0).forEach((l) => {
+    const o = l.getAttribute(p.ACTION_ID);
+    o && t.has(o) ? l.classList.remove("tw-hidden") : l.classList.add("tw-hidden");
   });
 }
-function bt({
+function Ce({
   actionsContainerRef: e,
   overflowIds: t,
-  moreDropdownMenuRef: l,
-  trackerElementRef: o,
-  itemInDropdownClass: s,
-  onOverflowChange: n
+  moreDropdownMenuRef: a,
+  trackerElementRef: n,
+  onOverflowChange: l
 }) {
-  const i = O(!1), a = O(""), u = rt(o);
-  function r(f, A, h) {
-    t.value.clear(), f.forEach((w) => t.value.add(w)), A.forEach((w) => {
-      const I = h.get(w) || w.getAttribute(m.ACTION_ID) || void 0;
-      I && P(w, I, t.value);
+  const o = I(!1), i = I(""), s = Ae(n);
+  function d(h, u, r) {
+    t.value.clear(), h.forEach((f) => t.value.add(f)), u.forEach((f) => {
+      const m = r.get(f) || f.getAttribute(p.ACTION_ID) || void 0;
+      m && ne(f, m, t.value);
     });
   }
-  function d() {
-    if (!e.value || !o.value) {
-      i.value = !1;
+  function c() {
+    if (!e.value || !n.value) {
+      o.value = !1;
       return;
     }
-    const f = Array.from(e.value.children), A = G(f), h = /* @__PURE__ */ new Set(), w = window.getComputedStyle(e.value), I = w.columnGap || w.gap, y = I ? parseFloat(I) : 0;
-    f.forEach((b, E) => {
-      const c = A.get(b) || b.getAttribute(m.ACTION_ID) || void 0, S = b.getBoundingClientRect();
-      (E < f.length - 1 ? S.right + y : S.right) > u.left.value && c && h.add(c);
+    const h = Array.from(e.value.children), u = ie(h), r = /* @__PURE__ */ new Set(), f = window.getComputedStyle(e.value), m = f.columnGap || f.gap, b = m ? parseFloat(m) : 0;
+    h.forEach((_, y) => {
+      const O = u.get(_) || _.getAttribute(p.ACTION_ID) || void 0, E = _.getBoundingClientRect();
+      (y < h.length - 1 ? E.right + b : E.right) > s.left.value && O && r.add(O);
     });
-    const _ = Array.from(t.value).sort().join(","), D = Array.from(h).sort().join(",");
-    _ !== D && (r(h, f, A), F(
-      l.value,
-      e.value,
-      t.value,
-      s
-    ), n && a.value !== D && (a.value = D, n())), i.value = !1;
+    const S = Array.from(t.value).sort().join(","), B = Array.from(r).sort().join(",");
+    S !== B && (d(r, h, u), J(a.value, t.value), l && i.value !== B && (i.value = B, V(() => {
+      l();
+    }))), o.value = !1;
   }
-  const v = X(d, q.FAST);
-  function p() {
-    i.value || !e.value || !o.value || (i.value = !0, v());
+  const g = Z(c, k.FAST);
+  function v() {
+    o.value || !e.value || !n.value || (o.value = !0, g());
   }
-  function g() {
-    v.cancel(), i.value = !1;
+  function w() {
+    s.update();
+  }
+  function A() {
+    g.cancel(), o.value = !1;
   }
   return {
-    calculateOverflow: p,
-    applyElementVisibility: P,
-    updateOverflowState: r,
-    cleanup: g,
-    isProcessing: i
+    calculateOverflow: v,
+    applyElementVisibility: ne,
+    updateOverflowState: d,
+    updateTrackerBounding: w,
+    cleanup: A,
+    isProcessing: o
   };
 }
-function It({
+function Me({
   actionsContainerRef: e,
   overflowIds: t,
-  moreDropdownMenuRef: l,
-  trackerElementRef: o,
-  moreDropdownWidth: s,
-  itemInDropdownClass: n,
-  calculateMoreButtonWidth: i,
-  autoDetectActions: a = !0,
-  onOverflowChange: u
+  moreDropdownMenuRef: a,
+  trackerElementRef: n,
+  moreDropdownWidth: l,
+  calculateMoreButtonWidth: o,
+  hasMoreActionsSlot: i,
+  onOverflowChange: s
 }) {
-  const r = O(!1), {
-    calculateOverflow: d,
-    applyElementVisibility: v,
-    updateOverflowState: p,
-    cleanup: g,
-    isProcessing: f
-  } = bt({
+  const d = I(!1), {
+    calculateOverflow: c,
+    applyElementVisibility: g,
+    updateOverflowState: v,
+    updateTrackerBounding: w,
+    cleanup: A,
+    isProcessing: h
+  } = Ce({
     actionsContainerRef: e,
     overflowIds: t,
-    moreDropdownMenuRef: l,
-    trackerElementRef: o,
-    itemInDropdownClass: n,
-    onOverflowChange: u
+    moreDropdownMenuRef: a,
+    trackerElementRef: n,
+    onOverflowChange: s
   });
-  function A() {
-    t.value.clear(), s.value = 0;
+  let u = null, r = null, f = null;
+  function m() {
+    t.value.clear(), l.value = 0;
   }
-  function h() {
-    if (!e.value)
+  function b() {
+    r && (r(), r = null), f && (f(), f = null);
+  }
+  const S = Z(
+    () => {
+      !e.value || !i.value || (j(e.value), b(), A(), y());
+    },
+    k.FAST,
+    { leading: !1, trailing: !0 }
+  );
+  function B() {
+    if (!e.value || !i.value)
       return;
-    const y = Array.from(e.value.children), _ = G(y), D = new Set(_.values());
-    At(t.value, D), ut(e, d), ct(
-      y,
-      (b) => {
-        if (f.value)
+    const O = Array.from(e.value.children), E = ie(O), $ = new Set(E.values());
+    Be(t.value, $);
+    const { stop: q } = Ie(e, () => {
+      w(), c();
+    });
+    r = q;
+    const { stop: T } = Te(
+      O,
+      (M) => {
+        if (h.value)
           return;
-        let E = !1;
-        const c = new Set(t.value);
-        if (b.forEach((S) => {
-          const T = S.target, B = _.get(T) || T.getAttribute(m.ACTION_ID) || void 0;
-          S.intersectionRatio === 1 ? B && c.has(B) && (c.delete(B), E = !0) : B && !c.has(B) && (c.add(B), E = !0);
-        }), E) {
-          const S = Array.from(t.value).sort().join(","), T = Array.from(c).sort().join(",");
-          S !== T && (p(c, y, _), F(
-            l.value,
-            e.value,
-            t.value,
-            n
-          ), u && u());
+        let D = !1;
+        const N = new Set(t.value);
+        if (M.forEach((R) => {
+          const F = R.target, x = E.get(F) || F.getAttribute(p.ACTION_ID) || void 0;
+          R.intersectionRatio === 1 ? x && N.has(x) && (N.delete(x), D = !0) : x && !N.has(x) && (N.add(x), D = !0);
+        }), D) {
+          const R = Array.from(t.value).sort().join(","), F = Array.from(N).sort().join(",");
+          R !== F && (v(N, O, E), J(a.value, t.value), s && V(() => {
+            s();
+          }));
         }
       },
       {
         root: e.value
       }
-    ), y.forEach((b) => {
-      const E = _.get(b) || b.getAttribute(m.ACTION_ID) || "";
-      v(b, E, t.value);
-    }), d(), F(
-      l.value,
-      e.value,
-      t.value,
-      n
     );
+    f = T, O.forEach((M) => {
+      const D = E.get(M) || M.getAttribute(p.ACTION_ID) || "";
+      g(M, D, t.value);
+    }), c(), J(a.value, t.value);
   }
-  function w() {
-    e.value && (a && j(e.value), h(), s.value === 0 && (s.value = i()));
+  function _() {
+    e.value && i.value && (j(e.value), B(), l.value === 0 && (l.value = o()), !u && e.value && (u = new MutationObserver(S), u.observe(e.value, {
+      childList: !0,
+      // Watch for added/removed children
+      subtree: !1
+      // Only watch direct children
+    })));
   }
-  const I = X(
+  const y = Z(
     () => {
-      r.value || (r.value = !0, w(), r.value = !1);
+      d.value || (d.value = !0, _(), d.value = !1);
     },
-    q.FAST,
+    k.FAST,
     { leading: !0 }
   );
-  Z(() => {
-    a && j(e.value), w();
-  }), J(() => {
-    a && j(e.value), e.value && Array.from(e.value.children).length === 0 && A(), g(), I();
-  }), Q(() => {
-    g();
-  }), Y(() => {
-    g();
+  ue(() => {
+    i.value && (j(e.value), _());
+  }), re(() => {
+    i.value && (j(e.value), e.value && Array.from(e.value.children).length === 0 && m(), b(), A(), y());
+  }), ce(() => {
+    b(), A(), S.cancel(), y.cancel(), u && (u.disconnect(), u = null);
+  }), oe(() => {
+    b(), A(), S.cancel(), y.cancel(), u && (u.disconnect(), u = null);
   });
 }
-function yt({
-  moreDropdownMenuRef: e,
-  overflowIds: t,
-  autoStyleDropdownItems: l,
-  activeItemId: o
-}) {
-  function s() {
-    if (!l || !e.value)
-      return;
-    Array.from(e.value.children).forEach((i) => {
-      var d;
-      if (!(i instanceof HTMLElement))
-        return;
-      const a = i.getAttribute(m.ACTION_ID);
-      if (a && !t.value.has(a)) {
-        i.classList.add("tw-hidden");
-        return;
-      } else
-        i.classList.remove("tw-hidden");
-      (d = i.querySelector(".stash-tabs__dropdown-selected-tab-icon")) == null || d.remove();
-      const u = i.firstElementChild;
-      u && (u.className = ""), i.className = "", i.classList.add(
-        "tw-flex",
-        "tw-items-center",
-        "tw-justify-between",
-        "tw-rounded",
-        "tw-text-sm",
-        "tw-p-1.5",
-        "tw-text-left",
-        "tw-cursor-pointer",
-        "tw-text-ice-700",
-        "hover:!tw-bg-ice-200",
-        "aria-disabled:tw-text-ice-500",
-        "aria-disabled:tw-pointer-events-none",
-        "aria-disabled:hover:tw-text-ice-500",
-        "aria-disabled:hover:tw-bg-inherit",
-        "aria-disabled:hover:tw-cursor-default",
-        "aria-selected:tw-bg-blue-100",
-        "tw-list-none"
-      );
-      const r = i.getAttribute("id");
-      if (r && (o != null && o.value) && r === o.value) {
-        const v = document.createElement("span");
-        v.className = "stash-tabs__dropdown-selected-tab-icon", v.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="tw-text-blue-500 tw-w-6 tw-h-6" viewBox="0 0 24 24" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M20.707 6.854 9 18.561l-5.707-5.707 1.414-1.414L9 15.733 19.293 5.44l1.414 1.414Z" clip-rule="evenodd"/></svg>', i.appendChild(v);
-      }
-    });
-  }
-  return {
-    applyDropdownItemStyling: s
-  };
-}
-function Et({
+function Ne({
   moreDropdownRef: e,
   actionsContainerRef: t,
-  moreButtonAlign: l,
-  hasOverflowActions: o
+  moreButtonAlign: a,
+  hasOverflowActions: n
 }) {
-  const s = () => {
-    var a;
-    if (!((a = e.value) != null && a.$el))
+  const l = () => {
+    var s;
+    if (!((s = e.value) != null && s.$el))
       return 0;
     const i = e.value.$el.getBoundingClientRect().width;
-    if (l === "separate" && t.value) {
-      const u = window.getComputedStyle(t.value), r = parseFloat(u.gap) || 0;
-      return i + r;
+    if (a === "separate" && t.value) {
+      const d = window.getComputedStyle(t.value), c = parseFloat(d.gap) || 0;
+      return i + c;
     }
     return i;
-  }, n = O(0);
-  return R(o, (i) => {
-    i && e.value && W(() => {
-      const a = s();
-      a > 0 && (n.value = a);
+  }, o = I(0);
+  return X(n, (i) => {
+    i && e.value && V(() => {
+      const s = l();
+      s > 0 && (o.value = s);
     });
   }), {
-    calculateMoreButtonWidth: s,
-    moreButtonWidth: n
+    calculateMoreButtonWidth: l,
+    moreButtonWidth: o
   };
 }
-function Ot({ actionsContainerRef: e, overflowIds: t }) {
-  const l = O(0), o = O(!1), s = () => {
+function xe({ actionsContainerRef: e, overflowIds: t }) {
+  const a = I(0), n = I(!1), l = I(!1);
+  let o = null;
+  const i = () => {
     if (!e.value) {
-      l.value = 0;
+      a.value = 0;
       return;
     }
-    let n = 0;
-    const i = Array.from(e.value.children);
-    i.forEach((a, u) => {
-      const r = a.classList.contains("tw-invisible"), d = a.getAttribute(m.ACTION_ID);
-      if (!r && d && !t.value.has(d)) {
-        const v = a.getBoundingClientRect();
-        if (n += v.width, u < i.length - 1 && e.value) {
-          const p = window.getComputedStyle(e.value), g = p.columnGap || p.gap, f = g ? parseFloat(g) : 0;
-          n += f;
+    let c = 0;
+    const g = Array.from(e.value.children);
+    g.forEach((v, w) => {
+      const A = v.getAttribute(p.ACTION_ID), h = !A || !t.value.has(A), u = v.classList.contains("tw-invisible");
+      if (h && !u) {
+        const r = v.getBoundingClientRect();
+        if (c += r.width, w < g.length - 1 && e.value) {
+          const f = window.getComputedStyle(e.value), m = f.columnGap || f.gap, b = m ? parseFloat(m) : 0;
+          c += b;
         }
       }
-    }), l.value = n;
+    }), a.value = c;
+  }, s = () => {
+    l.value = !0, o && clearTimeout(o), o = setTimeout(() => {
+      n.value || (n.value = !0, V(() => {
+        V(() => {
+          i(), n.value = !1, l.value = !1;
+        });
+      }));
+    }, ae + 100);
   };
-  return R(t, () => {
-    o.value || (o.value = !0, W(() => {
-      s(), o.value = !1;
-    }));
+  return X(t, () => {
+    s();
   }), {
-    visibleElementsWidth: l,
-    isRecalculatingWidth: o,
-    calculateVisibleElementsWidth: s
+    visibleElementsWidth: a,
+    isRecalculatingWidth: n,
+    isRecalculatingWithDelay: l,
+    calculateVisibleElementsWidth: i,
+    calculateVisibleElementsWidthDelayed: s,
+    cleanup: () => {
+      o && (clearTimeout(o), o = null), l.value = !1;
+    }
   };
 }
-const _t = ["id"], St = /* @__PURE__ */ tt({
+const We = ["id"], Ve = /* @__PURE__ */ de({
   __name: "MoreActions",
   props: {
-    dropdownContentClass: { default: void 0 },
     actionsContainerClass: { default: void 0 },
-    moreButtonText: { default: () => dt("ll.more") },
+    actionsContainerTag: { default: "div" },
+    moreButtonText: { default: () => be("ll.more") },
     width: { default: void 0 },
     dropdownMode: { default: "default" },
-    disableAutoDetectActions: { type: Boolean, default: !1 },
-    autoStyleDropdownItems: { type: Boolean },
-    activeItemId: { default: void 0 },
-    moreButtonAlign: { default: "separate" },
-    itemInDropdownClass: { default: void 0 }
+    moreButtonAlign: { default: "separate" }
   },
   setup(e) {
-    const t = e, l = M("actionsContainerRef"), o = M("moreDropdownRef"), s = M("moreDropdownMenuRef"), n = M("trackerElementRef"), i = O(/* @__PURE__ */ new Set()), a = O(!1), u = st(z.MORE_MENU), {
-      isVisible: r,
-      shouldShow: d,
-      toggle: v
-    } = wt({
-      duration: gt,
+    const t = e, a = fe(), n = W(() => !!a["more-actions"]), l = U("actionsContainerRef"), o = U("moreDropdownRef"), i = U("moreDropdownMenuRef"), s = U("trackerElementRef"), d = I(/* @__PURE__ */ new Set()), c = I(!1), g = we(Q.MORE_MENU), v = I(null), w = I(!1), {
+      isVisible: A,
+      shouldShow: h,
+      toggle: u
+    } = _e({
+      duration: ae,
       initialVisible: !1
-    }), p = C(() => i.value.size > 0), { calculateMoreButtonWidth: g, moreButtonWidth: f } = Et({
+    }), r = W(() => d.value.size > 0), { calculateMoreButtonWidth: f, moreButtonWidth: m } = Ne({
       moreDropdownRef: o,
       actionsContainerRef: l,
       moreButtonAlign: t.moreButtonAlign,
-      hasOverflowActions: p
-    }), { visibleElementsWidth: A, isRecalculatingWidth: h, calculateVisibleElementsWidth: w } = Ot({
+      hasOverflowActions: r
+    }), {
+      visibleElementsWidth: b,
+      isRecalculatingWithDelay: S,
+      calculateVisibleElementsWidthDelayed: B,
+      cleanup: _
+    } = xe({
       actionsContainerRef: l,
-      overflowIds: i
-    }), I = C(() => p.value), y = C(() => a.value.toString()), _ = C(() => I.value ? `calc(100% - ${f.value}px)` : "100%"), D = C(() => t.moreButtonAlign === "together" ? { left: `${A.value}px`, right: "auto" } : { right: "0", left: "auto" });
-    It({
+      overflowIds: d
+    }), y = W(() => n.value && r.value && !S.value && w.value), O = W(() => c.value.toString()), E = W(() => y.value ? `calc(100% - ${m.value}px)` : "100%"), $ = W(() => t.moreButtonAlign === "together" ? { left: `${b.value}px`, right: "auto" } : { right: "0", left: "auto" });
+    Me({
       actionsContainerRef: l,
-      overflowIds: i,
-      moreDropdownMenuRef: s,
-      trackerElementRef: n,
-      moreDropdownWidth: f,
-      itemInDropdownClass: t.itemInDropdownClass,
-      calculateMoreButtonWidth: g,
-      autoDetectActions: !t.disableAutoDetectActions,
-      onOverflowChange: () => {
-        h.value || W(() => {
-          w();
-        });
+      overflowIds: d,
+      moreDropdownMenuRef: i,
+      trackerElementRef: s,
+      moreDropdownWidth: m,
+      calculateMoreButtonWidth: f,
+      hasMoreActionsSlot: n,
+      onOverflowChange: B
+    }), X(
+      () => n.value && r.value && !S.value,
+      (T) => {
+        v.value && (clearTimeout(v.value), v.value = null), T ? v.value = setTimeout(() => {
+          w.value = !0;
+        }, k.FAST) : w.value = !1;
       }
+    ), X(y, (T) => {
+      u(T);
     });
-    const { applyDropdownItemStyling: b } = yt({
-      moreDropdownMenuRef: s,
-      overflowIds: i,
-      autoStyleDropdownItems: t.autoStyleDropdownItems,
-      activeItemId: C(() => t.activeItemId)
-    });
-    R(I, (c) => {
-      v(c);
-    });
-    function E(c) {
-      a.value = c, c && t.autoStyleDropdownItems && W(() => b());
+    function q(T) {
+      c.value = T;
     }
-    return (c, S) => (ot(), et("div", {
-      class: "stash-more-actions tw-relative",
+    return oe(() => {
+      _(), v.value && clearTimeout(v.value);
+    }), (T, M) => (H(), ve("div", {
+      class: "stash-more-actions tw-relative tw-overflow-x-hidden",
       "data-test": "stash-more-actions",
-      style: N({ width: t.width })
+      style: z({ width: t.width })
     }, [
-      V("div", {
+      (H(), Y(he(t.actionsContainerTag), {
         ref_key: "actionsContainerRef",
         ref: l,
-        style: N({
-          width: _.value
+        "data-test": "stash-more-actions__container",
+        style: z({
+          width: E.value,
+          minWidth: C(m) ? `${C(m)}px` : void 0
         }),
-        class: H(["stash-more-actions__container tw-flex tw-items-center tw-gap-2", t.actionsContainerClass])
-      }, [
-        L(c.$slots, "actions")
-      ], 6),
-      V("div", {
+        class: te(["stash-more-actions__container tw-flex tw-items-center tw-gap-2", t.actionsContainerClass])
+      }, {
+        default: P(() => [
+          G(T.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["style", "class"])),
+      ee("div", {
         ref_key: "trackerElementRef",
-        ref: n,
+        ref: s,
         class: "stash-more-actions__tracker",
-        style: N({
+        style: z({
           position: "absolute",
           right: "0px",
           top: "0",
           visibility: "hidden",
-          width: x(f) + "px",
+          width: C(m) + "px",
           height: "100%",
           pointerEvents: "none",
-          zIndex: x(mt).TRACKER
+          zIndex: C(De).TRACKER
         })
       }, null, 4),
-      it($(vt, {
+      n.value ? (H(), Y(ye, {
+        key: 0,
         ref_key: "moreDropdownRef",
         ref: o,
-        "content-class": t.dropdownContentClass,
-        class: H(["!tw-absolute tw-top-0", x(d) ? "tw-animate-fade-in" : "tw-animate-fade-out"]),
-        style: N(D.value),
-        onToggle: E
+        class: te([
+          "!tw-absolute tw-top-0",
+          C(h) ? "tw-animate-fade-in" : "tw-animate-fade-out",
+          { "tw-invisible": !C(A) }
+        ]),
+        style: z($.value),
+        onToggle: q
       }, {
-        toggle: k(({ toggle: T }) => [
-          L(c.$slots, "toggle", {
-            toggle: T,
-            isOpen: a.value
+        toggle: P(({ toggle: D }) => [
+          G(T.$slots, "toggle", {
+            toggle: D,
+            isOpen: c.value
           }, () => [
-            $(ft, {
+            le(Oe, {
               class: "button tw-border-gray-500 tw-text-gray-500 tw-flex tw-w-full tw-items-center tw-justify-between tw-border",
               secondary: "",
-              "aria-expanded": y.value,
-              onClick: T
+              "aria-expanded": O.value,
+              onClick: D
             }, {
-              default: k(() => [
-                lt(nt(t.moreButtonText) + " ", 1),
-                $(ht, {
+              default: P(() => [
+                pe(ge(t.moreButtonText) + " ", 1),
+                le(Ee, {
                   class: "tw-ml-1.5",
                   name: "action-dots"
                 })
@@ -466,26 +445,25 @@ const _t = ["id"], St = /* @__PURE__ */ tt({
             }, 1032, ["aria-expanded", "onClick"])
           ])
         ]),
-        default: k(() => [
-          V("div", {
-            id: x(u),
+        default: P(() => [
+          ee("div", {
+            id: C(g),
             ref_key: "moreDropdownMenuRef",
-            ref: s,
+            ref: i,
+            "data-test": "stash-more-actions__dropdown",
             class: "tw-flex tw-flex-col tw-gap-1.5 tw-p-1.5"
           }, [
-            L(c.$slots, "actions")
-          ], 8, _t)
+            G(T.$slots, "more-actions")
+          ], 8, We)
         ]),
         _: 3
-      }, 8, ["content-class", "class", "style"]), [
-        [at, x(r)]
-      ])
+      }, 8, ["class", "style"])) : me("", !0)
     ], 4));
   }
-}), Tt = {}, Dt = {
-  $style: Tt
-}, Ut = /* @__PURE__ */ pt(St, [["__cssModules", Dt]]);
+}), ke = {}, $e = {
+  $style: ke
+}, Ge = /* @__PURE__ */ Se(Ve, [["__cssModules", $e]]);
 export {
-  Ut as default
+  Ge as default
 };
 //# sourceMappingURL=MoreActions.js.map