twenty-ui 2.44.0 → 2.46.0

package/dist/Dropdown-CZVEnq0N.js

@@ -0,0 +1,774 @@
+import { t as c } from "./isDefined-fMi6eQ4r.js";
+import { Cn as qe, Dn as Be, En as Me, hl as Ke } from "./icon-Bo3y4NHM.js";
+import { t as Ie } from "./isRenderableSlot-DT_depzM.js";
+import { n as ye, t as Ge } from "./Button-DQUIhQAm.js";
+import { t as Z } from "./mergeClassNames-ClFMR1v0.js";
+import { n as De, r as He } from "./OverflowingTextWithTooltip-wRABzEWd.js";
+import { t as te } from "./ListItem.module-Ar-vZ7Qu.js";
+import { t as de } from "./ListItem-BVJEFywj.js";
+import { t as V } from "./Popover-C-JjVGKl.js";
+import { i as We, t as Ue } from "./Input-D3-FH2Zz.js";
+import { n as ze, r as $e, t as je } from "./MenuSeparator-BdPwyE9f.js";
+import { useRender as Te } from "@base-ui/react/use-render";
+import { isBoolean as Ye, isFunction as Ve, isNonEmptyString as oe, isPositiveInteger as _e } from "@sniptt/guards";
+import { clsx as M } from "clsx";
+import { createContext as Xe, useCallback as J, useContext as ne, useEffect as Je, useId as ue, useLayoutEffect as Ae, useRef as Ce, useState as B } from "react";
+import { Fragment as Qe, jsx as d, jsxs as ae } from "react/jsx-runtime";
+import { Button as ke } from "@base-ui/react/button";
+import { useMergedRefs as se } from "@base-ui/utils/useMergedRefs";
+import { Popover as Pe } from "@base-ui/react/popover";
+import { useDirection as Ne } from "@base-ui/react/direction-provider";
+var Ze = "_content_wgn7f_1", et = "_page_wgn7f_12", tt = "_section_wgn7f_16", rt = "_separator_wgn7f_39", ot = "_back_wgn7f_47", nt = "_backIcon_wgn7f_59", at = "_searchContainer_wgn7f_63", st = "_search_wgn7f_63", it = "_status_wgn7f_80", ct = "_header_wgn7f_86", dt = "_title_wgn7f_99", ut = "_itemWithActions_wgn7f_108", lt = "_itemWithActionsPrimary_wgn7f_114", pt = "_itemActions_wgn7f_129", mt = "_itemDecoration_wgn7f_133", C = {
+  content: Ze,
+  page: et,
+  section: tt,
+  separator: rt,
+  back: ot,
+  backIcon: nt,
+  searchContainer: at,
+  search: st,
+  status: it,
+  header: ct,
+  title: dt,
+  itemWithActions: ut,
+  itemWithActionsPrimary: lt,
+  itemActions: pt,
+  itemDecoration: mt
+}, le = ({ render: e, ref: t, disabled: r, ...o }) => Te({
+  render: e,
+  ref: t,
+  defaultTagName: "button",
+  props: {
+    ...o,
+    disabled: r
+  }
+}), pe = ({ nativeButton: e, renderProps: t }) => e && "disabled" in t && Ye(t.disabled) ? t.disabled : void 0, ft = "[data-dropdown-item]", xe = ({ actions: e, actionsVisibility: t = "hover", color: r = "neutral", selected: o = !1, focused: a = !1, indicator: s = "none", disabled: n = !1, hasSubmenu: u = !1, children: l }) => /* @__PURE__ */ ae("div", {
+  className: M(te.root, C.itemWithActions),
+  role: "none",
+  "data-actions-visibility": t,
+  "data-color": r,
+  "data-selected": o ? "" : void 0,
+  "data-highlighted": a ? "" : void 0,
+  "data-indicator": s,
+  "data-disabled": n ? "" : void 0,
+  onClick: (m) => {
+    m.target === m.currentTarget && m.currentTarget.querySelector(ft)?.click();
+  },
+  children: [
+    l,
+    /* @__PURE__ */ d("span", {
+      className: M(te.actions, C.itemActions),
+      children: e
+    }),
+    s === "check" && o && /* @__PURE__ */ d(qe, {
+      className: M(te.checkIndicator, C.itemDecoration),
+      "aria-hidden": !0
+    }),
+    u && /* @__PURE__ */ d(Be, {
+      className: M(te.submenuIcon, C.itemDecoration),
+      "aria-hidden": !0
+    })
+  ]
+}), me = (e) => e.getAttribute("aria-label") ?? e.textContent ?? "", Q = (e) => Array.from(e.querySelectorAll("[data-dropdown-item]")).filter((t) => t.getAttribute("aria-disabled") !== "true" && !t.hasAttribute("disabled") && t.closest("[data-dropdown-content]") === e), re = Xe(void 0), K = () => {
+  const e = ne(re);
+  if (!c(e)) throw new Error("Dropdown components must be inside Dropdown.Root");
+  return e;
+}, fe = ({ id: e, disabled: t, isSubmenuTrigger: r = !1 }) => {
+  const o = K(), a = r ? o.parentType : o.type, s = r ? o.parentActiveItemId : o.activeItemId, n = r ? o.setParentActiveItemId : o.setActiveItemId;
+  return {
+    tabIndex: t || a === "menu" && s !== e ? -1 : 0,
+    activate: () => n?.(e)
+  };
+}, Ee = ({ color: e, startIcon: t, endIcon: r, description: o, descriptionPlacement: a, shortcut: s, shortcutJoinLabel: n, hasSubmenu: u, actions: l, actionsVisibility: m, children: f, render: g, disabled: v = !1, nativeButton: i = !c(g), closeOnClick: N = !0, onClick: w, onFocus: y, page: p, id: b, ...h }) => {
+  const { type: D, closeTree: E, goToPage: _ } = K(), S = ue(), R = b ?? S, x = fe({
+    id: R,
+    disabled: v
+  }), k = Ie(l), F = u ?? c(p), L = /* @__PURE__ */ d(ke, {
+    ...h,
+    id: R,
+    disabled: v,
+    nativeButton: i,
+    role: h.role ?? (D === "menu" ? "menuitem" : void 0),
+    tabIndex: x.tabIndex,
+    onFocus: (T) => {
+      x.activate(), y?.(T);
+    },
+    "data-dropdown-item": "",
+    "data-dropdown-page": p,
+    onClick: (T) => {
+      if (w?.(T), !T.defaultPrevented) {
+        if (c(p)) {
+          const P = T.currentTarget.closest("[data-dropdown-content]");
+          if (!c(P)) return;
+          _({
+            id: p,
+            trigger: {
+              id: b,
+              index: Q(P).indexOf(T.currentTarget),
+              page: p,
+              label: me(T.currentTarget)
+            }
+          });
+          return;
+        }
+        N && E();
+      }
+    },
+    render: (T) => {
+      const P = pe({
+        nativeButton: i,
+        renderProps: T
+      });
+      return /* @__PURE__ */ d(de, {
+        ...T,
+        render: /* @__PURE__ */ d(le, {
+          render: g,
+          disabled: P
+        }),
+        className: M(T.className, k && C.itemWithActionsPrimary),
+        disabled: v,
+        color: e,
+        startIcon: t,
+        endIcon: r,
+        actionsVisibility: m,
+        description: o,
+        descriptionPlacement: a,
+        shortcut: s,
+        shortcutJoinLabel: n,
+        hasSubmenu: !k && F,
+        children: f
+      });
+    }
+  });
+  return k ? /* @__PURE__ */ d(xe, {
+    actions: l,
+    actionsVisibility: m,
+    color: e,
+    disabled: v,
+    hasSubmenu: F,
+    children: L
+  }) : L;
+}, gt = ({ children: e = "Back", className: t, onClick: r, ...o }) => {
+  const { goBack: a, canGoBack: s } = K();
+  return /* @__PURE__ */ d(Ee, {
+    ...o,
+    className: M(C.back, t),
+    "data-dropdown-back": "",
+    disabled: o.disabled || !s,
+    startIcon: /* @__PURE__ */ d(Me, { className: C.backIcon }),
+    closeOnClick: !1,
+    onClick: (n) => {
+      r?.(n), !n.defaultPrevented && a();
+    },
+    children: e
+  });
+}, wt = "_button_1qwl0_1", ht = "_tooltipAnchor_1qwl0_29", vt = "_icon_1qwl0_33", ce = {
+  button: wt,
+  tooltipAnchor: ht,
+  icon: vt
+}, bt = ({ children: e, size: t, shape: r = "square", className: o, tooltip: a, tooltipPlace: s = "bottom", tooltipDelay: n = 1e3, tooltipOffset: u = 5, disabled: l, loading: m, ...f }) => {
+  const g = ne(ye), v = t ?? g?.size ?? "md", i = oe(a), N = l || m, w = /* @__PURE__ */ d(Ge, {
+    ...f,
+    size: v === "xs" ? "sm" : v,
+    "data-icon-size": v,
+    "data-shape": r,
+    disabled: l,
+    loading: m,
+    startIcon: /* @__PURE__ */ d("span", {
+      className: ce.icon,
+      children: e
+    }),
+    className: Z(ce.button, o)
+  });
+  return i ? /* @__PURE__ */ d(He, {
+    content: a,
+    delay: n,
+    side: s,
+    sideOffset: u,
+    children: N ? /* @__PURE__ */ d("span", {
+      className: ce.tooltipAnchor,
+      children: w
+    }) : w
+  }) : w;
+}, It = "_button_prhtf_1", yt = { button: It }, Dt = ({ className: e, emphasis: t = "standard", size: r, variant: o, ...a }) => {
+  const s = ne(ye), n = r ?? s?.size ?? "sm", u = o ?? s?.variant ?? "ghost";
+  return /* @__PURE__ */ d(bt, {
+    ...a,
+    size: n,
+    variant: u,
+    "data-emphasis": t,
+    className: Z(yt.button, e)
+  });
+}, Tt = ({ render: e, children: t, "aria-label": r, ...o }) => /* @__PURE__ */ d(Pe.Close, {
+  ...o,
+  "aria-label": r,
+  render: e ?? /* @__PURE__ */ d(Dt, {
+    size: "sm",
+    "aria-label": r,
+    children: t ?? /* @__PURE__ */ d(Ke, {})
+  }),
+  children: c(e) ? t : void 0
+}), ge = ({ content: e, target: t, edge: r = "first", type: o }) => {
+  const a = c(t?.id) ? e.ownerDocument.getElementById(t.id) : null;
+  if (c(a) && e.contains(a)) return a;
+  const s = Q(e), n = c(t) ? s.filter((i) => i.dataset.dropdownPage === t.page) : [], [u] = n;
+  if (n.length === 1 && c(u)) return u;
+  const l = oe(t?.label) ? n.filter((i) => me(i) === t?.label) : [], [m] = l;
+  if (l.length === 1 && c(m)) return m;
+  const f = c(t) ? s[t.index] : void 0;
+  if (c(f)) return f;
+  const g = e.querySelector('input:not(:disabled):not([type="hidden"]),button:not(:disabled),textarea:not(:disabled),select:not(:disabled),a[href],[tabindex="0"]');
+  if ((Array.from(e.querySelectorAll("[data-dropdown-page-type]")).find((i) => i.closest("[data-dropdown-content]") === e)?.dataset.dropdownPageType ?? o ?? e.dataset.type) === "panel") return g ?? e;
+  const v = e.querySelector("[data-dropdown-search]:not(:disabled)");
+  return c(v) ? v : r === "last" ? s[s.length - 1] ?? g ?? e : s.find((i) => !i.hasAttribute("data-dropdown-back")) ?? s[0] ?? g ?? e;
+}, _t = ({ contentRef: e }) => {
+  const { open: t, pageId: r, pageFocusRequest: o, setPageFocusRequest: a } = K();
+  return Ae(() => {
+    c(o) && (a(void 0), !(!t || o.pageId !== r || !c(e.current)) && ge({
+      content: e.current,
+      target: o.target
+    }).focus());
+  }, [
+    e,
+    t,
+    r,
+    o,
+    a
+  ]), null;
+}, we = (e) => {
+  if (e.dataset.type === "panel") return;
+  const t = e.querySelector("[data-dropdown-search]:not(:disabled)");
+  if (!(!c(t) || !oe(t.value.trim())))
+    return Q(e).find((r) => r.hasAttribute("data-dropdown-option-item"));
+}, At = ({ content: e }) => {
+  const { setSearchTargetId: t } = K();
+  return Ae(() => {
+    if (!c(e)) return;
+    const r = () => t(we(e)?.id);
+    r();
+    const o = new MutationObserver(r);
+    return o.observe(e, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["disabled", "aria-disabled"]
+    }), () => {
+      o.disconnect(), t(void 0);
+    };
+  }, [e, t]), null;
+}, Ct = (e) => (e.ctrlKey || e.metaKey) && !e.defaultPrevented, kt = (e) => Array.from(e.ownerDocument.querySelectorAll("[data-dropdown-item][aria-controls]")).find((t) => t.getAttribute("aria-controls") === e.id), Pt = ({ rowCells: e, column: t, isEnabledCell: r }) => {
+  const o = Math.min(t, e.length - 1);
+  for (let a = 0; a < e.length; a++) {
+    const s = [e[o - a], e[o + a]].find(r);
+    if (c(s)) return s;
+  }
+}, Oe = ({ key: e, items: t, currentItem: r, search: o, isRightToLeft: a }) => {
+  const s = r?.closest("[data-dropdown-columns]"), n = Number(s?.dataset.dropdownColumns), u = [
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight"
+  ].includes(e);
+  if (!c(s) || !c(r) || !u || !_e(n)) return;
+  const l = Array.from(s.children).filter((p) => p instanceof HTMLElement && !p.hasAttribute("data-dropdown-section-label")), m = l.indexOf(r);
+  if (m < 0) return;
+  const f = Math.floor(m / n), g = m % n, v = e === "ArrowUp" || e === "ArrowDown", i = e === "ArrowDown" || e === (a ? "ArrowLeft" : "ArrowRight") ? 1 : -1, N = Math.ceil(l.length / n), w = new Set(t), y = (p) => c(p) && w.has(p);
+  if (v) {
+    for (let h = f + i; h >= 0 && h < N; h += i) {
+      const D = l[Math.min(h * n + g, l.length - 1)];
+      if (y(D)) return D;
+    }
+    for (let h = f + i; h >= 0 && h < N; h += i) {
+      const D = Pt({
+        rowCells: l.slice(h * n, (h + 1) * n),
+        column: g,
+        isEnabledCell: y
+      });
+      if (c(D)) return D;
+    }
+    const p = l.filter(y), b = i < 0 ? p[0] : p[p.length - 1];
+    return (c(b) ? t[t.indexOf(b) + i] : void 0) ?? (i < 0 ? o : void 0) ?? r;
+  }
+  for (let p = g + i; p >= 0 && p < n; p += i) {
+    const b = l[f * n + p];
+    if (y(b)) return b;
+  }
+  return r;
+}, Nt = ({ key: e, items: t, currentIndex: r, search: o, isSearch: a, isRightToLeft: s = !1 }) => {
+  const n = Oe({
+    key: e,
+    items: t,
+    currentItem: t[r],
+    search: o,
+    isRightToLeft: s
+  });
+  if (c(n)) return n;
+  const u = t.length - 1;
+  if (e === "ArrowDown") return t[r === u ? 0 : r + 1];
+  if (e === "ArrowUp" && r === 0 && c(o)) return o;
+  if (e === "ArrowUp") return t[r <= 0 ? u : r - 1];
+  if (!a && e === "Home") return t[0];
+  if (!a && e === "End") return t[u];
+}, xt = 500, Et = ({ type: e, isSubmenu: t, setOpen: r }) => {
+  const o = Ne(), [a, s] = B({
+    text: "",
+    timestamp: 0
+  });
+  return (n) => {
+    if (n.defaultPrevented) return;
+    const u = n.currentTarget, l = n.target;
+    if (!(l instanceof HTMLElement) || l.closest("[data-dropdown-content]") !== u) return;
+    const m = l.matches('input,textarea,select,[contenteditable="true"]'), f = o === "rtl", g = f ? "ArrowRight" : "ArrowLeft", v = t && !m && n.key === g, i = v && e !== "panel" ? Oe({
+      key: n.key,
+      items: Q(u),
+      currentItem: l,
+      search: null,
+      isRightToLeft: f
+    }) : void 0, N = c(i) && i !== l;
+    if (t && (n.key === "Escape" || v && !N)) {
+      n.preventDefault(), n.stopPropagation(), kt(u)?.focus(), r(!1);
+      return;
+    }
+    if (e === "panel") return;
+    const w = u.querySelector("[data-dropdown-search]:not(:disabled)"), y = l === w;
+    if (m && !y) return;
+    const p = Q(u).filter((x) => !c(w) || !x.hasAttribute("data-dropdown-back")), b = y && n.key === "Enter" && !n.nativeEvent.isComposing ? we(u) : void 0;
+    if (c(b)) {
+      n.preventDefault(), b.click();
+      return;
+    }
+    const h = p.indexOf(l), D = Nt({
+      key: n.key,
+      items: p,
+      currentIndex: h,
+      search: w,
+      isSearch: y,
+      isRightToLeft: f
+    });
+    if (c(D)) {
+      n.preventDefault(), D.focus();
+      return;
+    }
+    if (m || n.key.length !== 1 || n.key === " " || n.altKey || n.ctrlKey || n.metaKey) return;
+    const E = Date.now(), _ = E - a.timestamp > xt ? n.key : a.text + n.key;
+    s({
+      text: _,
+      timestamp: E
+    });
+    const S = ([..._].every((x) => x === _[0]) ? n.key : _).toLocaleLowerCase(), R = [...p.slice(h + 1), ...p.slice(0, h + 1)].find((x) => me(x).trim().toLocaleLowerCase().startsWith(S));
+    c(R) && (n.preventDefault(), R.focus());
+  };
+}, Ot = ({ side: e, align: t = "start", sideOffset: r = 0, alignOffset: o, anchor: a, collisionPadding: s, container: n, keepMounted: u, width: l = 200, className: m, style: f, children: g, initialFocus: v, onKeyDown: i, onInput: N, onClick: w, onMouseDown: y, onPointerDown: p, "aria-label": b, "aria-labelledby": h, ref: D, ...E }) => {
+  const { type: _, isSubmenu: S, setOpen: R, initialFocusEdge: x, focusOnOpen: k, triggerId: F, titleId: L, setSearchTargetId: T } = K(), P = Ce(null), [A, G] = B(null), H = se(P, D, G), z = Et({
+    type: _,
+    isSubmenu: S,
+    setOpen: R
+  }), $ = c(b) ? void 0 : L ?? F;
+  return /* @__PURE__ */ ae(Qe, { children: [
+    /* @__PURE__ */ d(V.Portal, {
+      container: n,
+      keepMounted: u,
+      children: /* @__PURE__ */ d(V.Positioner, {
+        side: e ?? (S ? "inline-end" : "bottom"),
+        align: t,
+        sideOffset: r,
+        alignOffset: o,
+        anchor: a,
+        collisionPadding: s,
+        children: /* @__PURE__ */ d(V.Popup, {
+          ...E,
+          ref: H,
+          role: _ === "menu" ? "menu" : "dialog",
+          "aria-label": b,
+          "aria-labelledby": h ?? $,
+          "data-dropdown-content": "",
+          "data-type": _,
+          className: Z(C.content, m),
+          style: (I) => ({
+            width: l,
+            ...Ve(f) ? f(I) : f
+          }),
+          initialFocus: v ?? (() => k ? c(P.current) ? ge({
+            content: P.current,
+            edge: x,
+            type: _
+          }) : !0 : !1),
+          onKeyDown: (I) => {
+            i?.(I), z(I), Ct(I) || I.stopPropagation();
+          },
+          onInput: (I) => {
+            N?.(I), T(we(I.currentTarget)?.id);
+          },
+          onClick: (I) => {
+            I.stopPropagation(), w?.(I);
+          },
+          onMouseDown: (I) => {
+            I.stopPropagation(), y?.(I);
+          },
+          onPointerDown: (I) => {
+            I.stopPropagation(), p?.(I);
+          },
+          children: g
+        })
+      })
+    }),
+    /* @__PURE__ */ d(_t, { contentRef: P }),
+    /* @__PURE__ */ d(At, { content: A })
+  ] });
+}, St = ({ className: e, ...t }) => /* @__PURE__ */ d(De, {
+  ...t,
+  role: "status",
+  "aria-live": "polite",
+  className: M(C.status, e)
+}), Rt = ({ render: e, ref: t, className: r, ...o }) => Te({
+  render: e,
+  ref: t,
+  props: {
+    ...o,
+    className: M(C.header, r)
+  }
+}), Ft = ({ className: e, ...t }) => /* @__PURE__ */ d(De, {
+  ...t,
+  role: "status",
+  "aria-live": "polite",
+  "aria-busy": "true",
+  className: M(C.status, e)
+}), Lt = ({ selected: e, indicator: t, onSelect: r, closeOnSelect: o, color: a, startIcon: s, endIcon: n, description: u, descriptionPlacement: l, shortcut: m, shortcutJoinLabel: f, hasSubmenu: g, actions: v, actionsVisibility: i, children: N, render: w, disabled: y = !1, nativeButton: p = !c(w), onClick: b, onFocus: h, id: D, ...E }) => {
+  const { type: _, multiple: S, closeTree: R, searchTargetId: x } = K(), k = _ === "menu", F = c(e), L = !k && (p || E.role === "button"), T = !k && !L && F && e, P = F ? S ? "menuitemcheckbox" : "menuitemradio" : "menuitem", A = S ? "checkbox" : "check", G = ue(), H = D ?? G, z = fe({
+    id: H,
+    disabled: y
+  }), $ = Ie(v), I = x === H, j = t ?? (F ? A : "none"), ee = $ && j === "check", Y = /* @__PURE__ */ d(ke, {
+    ...E,
+    id: H,
+    disabled: y,
+    nativeButton: p,
+    role: k ? P : E.role,
+    "aria-checked": k && F ? e : void 0,
+    "aria-pressed": L && F ? e : void 0,
+    "aria-current": T ? "true" : void 0,
+    tabIndex: z.tabIndex,
+    onFocus: (W) => {
+      z.activate(), h?.(W);
+    },
+    "data-dropdown-item": "",
+    "data-dropdown-option-item": "",
+    onClick: (W) => {
+      b?.(W), !W.defaultPrevented && (r?.(), (o ?? !S) && R());
+    },
+    render: (W) => {
+      const ie = pe({
+        nativeButton: p,
+        renderProps: W
+      });
+      return /* @__PURE__ */ d(de, {
+        ...W,
+        render: /* @__PURE__ */ d(le, {
+          render: w,
+          disabled: ie
+        }),
+        className: M(W.className, $ && C.itemWithActionsPrimary),
+        disabled: y,
+        selected: e,
+        focused: I,
+        indicator: ee ? "none" : j,
+        color: a,
+        startIcon: s,
+        endIcon: n,
+        actionsVisibility: i,
+        description: u,
+        descriptionPlacement: l,
+        shortcut: m,
+        shortcutJoinLabel: f,
+        hasSubmenu: !$ && g,
+        children: N
+      });
+    }
+  });
+  return $ ? /* @__PURE__ */ d(xe, {
+    actions: v,
+    actionsVisibility: i,
+    color: a,
+    selected: e,
+    focused: I,
+    indicator: j,
+    disabled: y,
+    hasSubmenu: g,
+    children: Y
+  }) : Y;
+}, qt = ({ id: e, type: t, children: r }) => {
+  const o = K(), { registerPage: a } = o, s = J((n) => {
+    c(n) && a({
+      id: e,
+      type: t
+    });
+  }, [
+    e,
+    t,
+    a
+  ]);
+  return o.pageId !== e ? null : /* @__PURE__ */ d(re.Provider, {
+    value: {
+      ...o,
+      type: t ?? o.rootType
+    },
+    children: /* @__PURE__ */ d("div", {
+      ref: s,
+      className: C.page,
+      "data-dropdown-page-type": t ?? o.rootType,
+      children: r
+    })
+  });
+}, Bt = ({ open: e, registerOpenNestedRoot: t }) => (Je(() => {
+  if (e)
+    return t?.();
+}, [e, t]), null), Mt = (e) => e instanceof FocusEvent ? e.type === "focusout" && e.relatedTarget instanceof Element ? e.relatedTarget : null : e.target instanceof Element ? e.target : null, ve = ({ onDismiss: e, event: t }) => {
+  if (!c(e)) return !1;
+  let r = !1;
+  return e({
+    target: Mt(t),
+    type: t.type,
+    preventDefault: () => {
+      r = !0;
+    }
+  }), r;
+}, be = () => {
+  const [e, t] = B();
+  return [e, J((r) => (t(r), () => t((o) => o === r ? void 0 : o)), [])];
+}, Se = ({ children: e, type: t, open: r, defaultOpen: o = !1, onOpenChange: a, onEscapeKeyDown: s, onInteractOutside: n, multiple: u = !1, defaultPage: l = "root", isSubmenu: m = !1 }) => {
+  const f = ne(re), g = Ce(0), v = J(() => (g.current += 1, () => {
+    g.current -= 1;
+  }), []), [i, N] = B(o), w = r ?? i, [y, p] = B(w), [b, h] = B([{ id: l }]), [D, E] = B(), [_, S] = B(), R = b[b.length - 1]?.id, [x, k] = B(), [F, L] = B("first"), [T, P] = B(!0), [A, G] = B(), [H, z] = be(), [$, I] = be(), j = w && !y, ee = !w && y;
+  (j || ee) && p(w), j && (h([{ id: l }]), E(void 0), k(void 0)), ee && (L("first"), P(!0), G(void 0));
+  const Y = (q) => {
+    c(r) || N(q), a?.(q);
+  }, W = () => {
+    Y(!1), m && f?.closeTree();
+  }, ie = ({ id: q, trigger: O }) => {
+    k({ pageId: q }), h((U) => [...U, {
+      id: q,
+      trigger: O
+    }]);
+  }, Re = () => {
+    const q = b[b.length - 2];
+    if (!c(q)) return;
+    const O = b[b.length - 1]?.trigger;
+    k({
+      pageId: q.id,
+      target: O
+    }), h((U) => U.slice(0, -1));
+  }, Fe = J(({ id: q, type: O }) => {
+    if (!w) return;
+    const U = O ?? t;
+    E((X) => X?.id === q && X.type === U ? X : {
+      id: q,
+      type: U
+    });
+  }, [w, t]);
+  return /* @__PURE__ */ d(V.Root, {
+    open: w,
+    onOpenChange: (q, O) => {
+      const U = O.reason === "outside-press" || O.reason === "focus-out";
+      if (U && g.current > 0) {
+        O.cancel();
+        return;
+      }
+      const X = O.reason === "escape-key" && ve({
+        onDismiss: s,
+        event: O.event
+      }), Le = U && ve({
+        onDismiss: n,
+        event: O.event
+      });
+      if (X || Le) {
+        O.cancel();
+        return;
+      }
+      U && We(O.event), P(O.reason !== "trigger-hover"), Y(q);
+    },
+    children: /* @__PURE__ */ ae(re.Provider, {
+      value: {
+        type: c(D) && D.id === R ? D.type : t,
+        rootType: t,
+        open: w,
+        multiple: u,
+        isSubmenu: m,
+        parentType: f?.type,
+        activeItemId: _,
+        parentActiveItemId: f?.activeItemId,
+        setActiveItemId: S,
+        setParentActiveItemId: f?.setActiveItemId,
+        pageId: R,
+        pageFocusRequest: x,
+        setPageFocusRequest: k,
+        canGoBack: b.length > 1,
+        initialFocusEdge: F,
+        setInitialFocusEdge: L,
+        focusOnOpen: T,
+        setFocusOnOpen: P,
+        setOpen: Y,
+        closeTree: W,
+        goToPage: ie,
+        goBack: Re,
+        registerPage: Fe,
+        registerOpenNestedRoot: v,
+        searchTargetId: A,
+        setSearchTargetId: G,
+        triggerId: H,
+        registerTrigger: z,
+        titleId: $,
+        registerTitle: I
+      },
+      children: [/* @__PURE__ */ d(Bt, {
+        open: w,
+        registerOpenNestedRoot: m ? void 0 : f?.registerOpenNestedRoot
+      }), e]
+    })
+  });
+}, Kt = ({ onValueChange: e, className: t, ...r }) => {
+  const { searchTargetId: o } = K();
+  return /* @__PURE__ */ d("div", {
+    className: C.searchContainer,
+    children: /* @__PURE__ */ d(Ue, {
+      type: "search",
+      autoComplete: "off",
+      "aria-activedescendant": o,
+      ...r,
+      "data-dropdown-search": "",
+      className: Z(C.search, t),
+      onValueChange: (a) => e?.(a)
+    })
+  });
+}, Gt = ({ label: e, scrollable: t, columns: r, style: o, className: a, children: s, ...n }) => {
+  const u = _e(r) ? r : void 0;
+  return /* @__PURE__ */ ae($e, {
+    ...n,
+    "data-scrollable": t || void 0,
+    "data-dropdown-columns": u,
+    style: {
+      ...o,
+      ...c(u) && { gridTemplateColumns: `repeat(${u}, minmax(0, 1fr))` }
+    },
+    className: M(C.section, a),
+    children: [c(e) && /* @__PURE__ */ d(ze, {
+      "data-dropdown-section-label": "",
+      children: e
+    }), s]
+  });
+}, Ht = ({ className: e, ...t }) => /* @__PURE__ */ d(je, {
+  ...t,
+  role: "separator",
+  "data-dropdown-separator": "",
+  className: M(C.separator, e)
+}), Wt = ({ type: e = "menu", ...t }) => /* @__PURE__ */ d(Se, {
+  ...t,
+  type: e,
+  isSubmenu: !0
+}), he = (e) => J((t) => {
+  if (!(!c(t) || !oe(t.id)))
+    return e(t.id);
+}, [e]), Ut = ({ color: e, startIcon: t, endIcon: r, description: o, descriptionPlacement: a, shortcut: s, shortcutJoinLabel: n, hasSubmenu: u = !0, children: l, render: m, disabled: f = !1, nativeButton: g = !c(m), openOnHover: v = !0, onKeyDown: i, onFocus: N, id: w, ref: y, ...p }) => {
+  const b = Ne(), { type: h, rootType: D, parentType: E, open: _, setOpen: S, setFocusOnOpen: R, registerTrigger: x } = K(), k = _ ? h : D, F = ue(), L = w ?? F, T = fe({
+    id: L,
+    disabled: f,
+    isSubmenuTrigger: !0
+  }), P = se(y, he(x));
+  return /* @__PURE__ */ d(V.Trigger, {
+    ...p,
+    ref: P,
+    id: L,
+    disabled: f,
+    nativeButton: g,
+    openOnHover: v,
+    role: E === "menu" ? "menuitem" : void 0,
+    "aria-haspopup": k === "menu" ? "menu" : "dialog",
+    tabIndex: T.tabIndex,
+    onFocus: (A) => {
+      T.activate(), N?.(A);
+    },
+    "data-dropdown-item": "",
+    onKeyDown: (A) => {
+      if (i?.(A), A.defaultPrevented || f) return;
+      const G = b === "rtl" ? "ArrowLeft" : "ArrowRight";
+      if (A.key === G) {
+        A.preventDefault(), A.stopPropagation(), R(!0);
+        const H = A.currentTarget.getAttribute("aria-controls"), z = c(H) ? A.currentTarget.ownerDocument.getElementById(H) : null;
+        if (_ && c(z)) {
+          ge({
+            content: z,
+            type: h
+          }).focus();
+          return;
+        }
+        S(!0);
+      }
+    },
+    render: (A) => {
+      const G = pe({
+        nativeButton: g,
+        renderProps: A
+      });
+      return /* @__PURE__ */ d(de, {
+        ...A,
+        render: /* @__PURE__ */ d(le, {
+          render: m,
+          disabled: G
+        }),
+        disabled: f,
+        color: e,
+        startIcon: t,
+        endIcon: r,
+        description: o,
+        descriptionPlacement: a,
+        shortcut: s,
+        shortcutJoinLabel: n,
+        hasSubmenu: u,
+        children: l
+      });
+    }
+  });
+}, zt = ({ className: e, render: t, ref: r, ...o }) => {
+  const { registerTitle: a } = K(), s = se(r, he(a));
+  return /* @__PURE__ */ d(Pe.Title, {
+    ...o,
+    ref: s,
+    render: t ?? /* @__PURE__ */ d("div", {}),
+    className: Z(C.title, e)
+  });
+}, $t = ({ onKeyDown: e, onClick: t, ref: r, ...o }) => {
+  const { type: a, rootType: s, open: n, setOpen: u, setInitialFocusEdge: l, setFocusOnOpen: m, registerTrigger: f } = K(), g = n ? a : s, v = se(r, he(f));
+  return /* @__PURE__ */ d(V.Trigger, {
+    ...o,
+    ref: v,
+    "aria-haspopup": g === "menu" ? "menu" : "dialog",
+    onClick: (i) => {
+      i.stopPropagation(), i.preventDefault(), t?.(i);
+    },
+    onKeyDown: (i) => {
+      e?.(i), !(i.defaultPrevented || i.baseUIHandlerPrevented || o.disabled || g === "panel") && (i.key !== "ArrowDown" && i.key !== "ArrowUp" || (i.preventDefault(), m(!0), l(i.key === "ArrowUp" ? "last" : "first"), u(!0)));
+    }
+  });
+}, jt = Se, fr = {
+  Root: jt,
+  Trigger: $t,
+  Content: Ot,
+  ActionItem: Ee,
+  OptionItem: Lt,
+  Search: Kt,
+  Header: Rt,
+  Title: zt,
+  Close: Tt,
+  Page: qt,
+  Back: gt,
+  Submenu: Wt,
+  SubmenuTrigger: Ut,
+  Section: Gt,
+  Separator: Ht,
+  Loading: Ft,
+  Empty: St
+};
+export {
+  K as i,
+  Dt as n,
+  bt as r,
+  fr as t
+};