welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
1,161 lines (1,160 loc) • 33.2 kB
JavaScript
"use client";
import './DropdownMenu.css';
import { jsx as l, jsxs as G } from "react/jsx-runtime";
import { t as Te, c as De, u as Le, a as Oe, b as A, m as Mt, o as Ct, p as wt, s as Pe, d as Ne } from "./Q5W46E73-5xQblshY.js";
import { H as xt, a as St, u as yt, b as pt, c as kt, d as _t } from "./ECBEZ4YM-o09xUuV6.js";
import { u as fe, C as Fe, a as $e, f as It, b as Pt } from "./WZWDIE3S-CGqoM1Fy.js";
import { c as w, f as x, a as S, i as L, b as Re, u as O, g as Ge, s as Nt, r as Z, d as Et, e as At, n as Tt, h as te, j as he, k as Dt, l as Lt, m as se, o as K, p as Ot, q as ne, t as Ft, v as $t, w as re, x as R, y as He, z as Rt, A as Gt, B as Ht, C as Ve, D as Vt, E as zt, F as Bt, G as ze, H as Kt, I as jt } from "./U6HHPQDW-CzxyP5H7.js";
import { createContext as ve, useRef as be, useState as ge, useContext as Me, useCallback as Ut, useEffect as j, createRef as Wt, useMemo as qt, forwardRef as P, createElement as Zt } from "react";
import { i as Jt } from "./WLZ6H5FH-CuTcX7sR.js";
import { u as Qt } from "./ZMWF7ASR-Jc8y_k3t.js";
import { c as Xt, R as Yt } from "./Z32PU2LQ-DMjfxuT9.js";
import { c as H } from "./index-B6iGEm-i.js";
import { f as U } from "./forwardRefWithAs-8eP3ZN15.js";
import { u as en, a as tn } from "./RFRKSHIZ-C_FLl4qI.js";
import { C as nn, u as rn } from "./I7KWAPMF-DQWZpGyL.js";
import { u as on } from "./5TKKKQCL-rs260p95.js";
import { c as un, u as an } from "./IQYAUKXT-Cltvp3KN.js";
import { u as cn } from "./CVCFNOHX-Ck0bUDvo.js";
import { Checkbox as sn } from "./Checkbox.js";
import { Radio as ln } from "./Radio.js";
import { Toggle as dn } from "./Toggle.js";
import { Icon as Be } from "./Icon.js";
import { InputText as mn } from "./InputText.js";
var fn = "hr", Ke = w(
function({ orientation: e = "horizontal", ...t }) {
return t = {
role: "separator",
"aria-orientation": e,
...t
}, t;
}
);
x(function(e) {
const t = Ke(e);
return S(fn, t);
});
var hn = "hr", je = w(function({ store: e, ...t }) {
const r = fe();
e = e || r, L(
e,
process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
);
const o = e.useState(
(u) => u.orientation === "horizontal" ? "vertical" : "horizontal"
);
return t = Ke({ ...t, orientation: o }), t;
});
x(function(e) {
const t = je(e);
return S(hn, t);
});
var Ue = Re(
[$e],
[Fe]
), vn = Ue.useContext, bn = Ue.useScopedContext;
ve(
void 0
);
var gn = "div", D = "";
function ae() {
D = "";
}
function Mn(n) {
const e = n.target;
return e && Et(e) ? !1 : n.key === " " && D.length ? !0 : n.key.length === 1 && !n.ctrlKey && !n.altKey && !n.metaKey && /^[\p{Letter}\p{Number}]$/u.test(n.key);
}
function Cn(n, e) {
if (At(n)) return !0;
const t = n.target;
return t ? e.some((o) => o.element === t) : !1;
}
function wn(n) {
return n.filter((e) => !e.disabled);
}
function Y(n, e) {
var t;
const r = ((t = n.element) == null ? void 0 : t.textContent) || n.children || // The composite item object itself doesn't include a value property, but
// other components like Select do. Since CompositeTypeahead is a generic
// component that can be used with those as well, we also consider the value
// property as a fallback for the typeahead text content.
"value" in n && n.value;
return r ? Tt(r).trim().toLowerCase().startsWith(e.toLowerCase()) : !1;
}
function xn(n, e, t) {
if (!t) return n;
const r = n.find((o) => o.id === t);
return !r || !Y(r, e) || D !== e && Y(r, D) ? n : (D = e, It(
n.filter((o) => Y(o, D)),
t
).filter((o) => o.id !== t));
}
var Ce = w(function({ store: e, typeahead: t = !0, ...r }) {
const o = fe();
e = e || o, L(
e,
process.env.NODE_ENV !== "production" && "CompositeTypeahead must be a Composite component"
);
const u = r.onKeyDownCapture, c = be(0), i = O((s) => {
if (u == null || u(s), s.defaultPrevented || !t || !e) return;
if (!Mn(s))
return ae();
const { renderedItems: f, items: d, activeId: a, id: g } = e.getState();
let m = wn(
d.length > f.length ? d : f
);
const h = Ge(s.currentTarget), y = `[data-offscreen-id="${g}"]`, v = h.querySelectorAll(y);
for (const C of v) {
const T = C.ariaDisabled === "true" || "disabled" in C && !!C.disabled;
m.push({ id: C.id, element: C, disabled: T });
}
if (v.length && (m = Nt(m, (C) => C.element)), !Cn(s, m)) return ae();
s.preventDefault(), window.clearTimeout(c.current), c.current = window.setTimeout(() => {
D = "";
}, 500);
const p = s.key.toLowerCase();
D += p, m = xn(m, p, a);
const N = m.find((C) => Y(C, D));
N ? e.move(N.id) : ae();
});
return r = {
...r,
onKeyDownCapture: i
}, Z(r);
});
x(function(e) {
const t = Ce(e);
return S(gn, t);
});
var We = ve(void 0), Sn = "div", qe = w(
function(e) {
const [t, r] = ge();
return e = te(
e,
(o) => /* @__PURE__ */ l(We.Provider, { value: r, children: o }),
[]
), e = {
role: "group",
"aria-labelledby": t,
...e
}, Z(e);
}
);
x(function(e) {
const t = qe(e);
return S(Sn, t);
});
var yn = "div", Ze = w(
function({ store: e, ...t }) {
return t = qe(t), t;
}
);
x(function(e) {
const t = Ze(e);
return S(yn, t);
});
var pn = "div", Je = w(
function(e) {
const t = Me(We), r = he(e.id);
return Dt(() => (t == null || t(r), () => t == null ? void 0 : t(void 0)), [t, r]), e = {
id: r,
"aria-hidden": !0,
...e
}, Z(e);
}
);
x(function(e) {
const t = Je(e);
return S(pn, t);
});
var kn = "div", Qe = w(function({ store: e, ...t }) {
return t = Je(t), t;
});
x(function(e) {
const t = Qe(e);
return S(kn, t);
});
var _n = "div";
function Xe(n) {
const e = n.relatedTarget;
return (e == null ? void 0 : e.nodeType) === Node.ELEMENT_NODE ? e : null;
}
function In(n) {
const e = Xe(n);
return e ? Ft(n.currentTarget, e) : !1;
}
var le = Symbol("composite-hover");
function Pn(n) {
let e = Xe(n);
if (!e) return !1;
do {
if ($t(e, le) && e[le]) return !0;
e = e.parentElement;
} while (e);
return !1;
}
var Ye = w(
function({
store: e,
focusOnHover: t = !0,
blurOnHoverEnd: r = !!t,
...o
}) {
const u = fe();
e = e || u, L(
e,
process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component."
);
const c = Lt(), i = o.onMouseMove, s = se(t), f = O((h) => {
if (i == null || i(h), !h.defaultPrevented && c() && s(h)) {
if (!K(h.currentTarget)) {
const y = e == null ? void 0 : e.getState().baseElement;
y && !Ot(y) && y.focus();
}
e == null || e.setActiveId(h.currentTarget.id);
}
}), d = o.onMouseLeave, a = se(r), g = O((h) => {
var y;
d == null || d(h), !h.defaultPrevented && c() && (In(h) || Pn(h) || s(h) && a(h) && (e == null || e.setActiveId(null), (y = e == null ? void 0 : e.getState().baseElement) == null || y.focus()));
}), m = Ut((h) => {
h && (h[le] = !0);
}, []);
return o = {
...o,
ref: ne(m, o.ref),
onMouseMove: f,
onMouseLeave: g
}, Z(o);
}
);
re(
x(function(e) {
const t = Ye(e);
return S(_n, t);
})
);
var Nn = "span", En = /* @__PURE__ */ l(
"svg",
{
display: "block",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1.5,
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
children: /* @__PURE__ */ l("polyline", { points: "4,8 7,12 12,4" })
}
);
function An(n) {
return n.checked ? n.children || En : typeof n.children == "function" ? n.children : null;
}
var et = w(
function({ store: e, checked: t, ...r }) {
const o = Me(nn);
t = t ?? o;
const u = An({ checked: t, children: r.children });
return r = {
"aria-hidden": !0,
...r,
children: u,
style: {
width: "1em",
height: "1em",
pointerEvents: "none",
...r.style
}
}, Z(r);
}
);
x(function(e) {
const t = et(e);
return S(Nn, t);
});
function Tn(n = {}) {
var e;
Te(n, n.store);
const t = (e = n.store) == null ? void 0 : e.getState(), r = {
value: R(
n.value,
t == null ? void 0 : t.value,
n.defaultValue,
!1
)
}, o = De(r, n.store);
return {
...o,
setValue: (u) => o.setState("value", u)
};
}
function Dn(n, e, t) {
return He(e, [t.store]), Oe(n, t, "value", "setValue"), n;
}
function Ln(n = {}) {
const [e, t] = Le(Tn, n);
return Dn(e, t, n);
}
var J = Re(
[$e, St],
[Fe, xt]
), oe = J.useContext, we = J.useScopedContext, ue = J.useProviderContext, tt = J.ContextProvider, On = J.ScopedContextProvider, nt = ve(
void 0
), Fn = "div";
function $n({ store: n, ...e }) {
const [t, r] = ge(void 0), o = e["aria-label"], u = A(n, "disclosureElement"), c = A(n, "contentElement");
return j(() => {
const i = u;
if (!i) return;
const s = c;
if (!s) return;
o || s.hasAttribute("aria-label") ? r(void 0) : i.id && r(i.id);
}, [o, u, c]), t;
}
var rt = w(
function({ store: e, alwaysVisible: t, composite: r, ...o }) {
const u = ue();
e = e || u, L(
e,
process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
);
const c = e.parent, i = e.menubar, s = !!c, f = he(o.id), d = o.onKeyDown, a = e.useState(
(M) => M.placement.split("-")[0]
), g = e.useState(
(M) => M.orientation === "both" ? void 0 : M.orientation
), m = g !== "vertical", h = A(
i,
(M) => !!M && M.orientation !== "vertical"
), y = O((M) => {
if (d == null || d(M), !M.defaultPrevented) {
if (s || i && !m) {
const E = {
ArrowRight: () => a === "left" && !m,
ArrowLeft: () => a === "right" && !m,
ArrowUp: () => a === "bottom" && m,
ArrowDown: () => a === "top" && m
}[M.key];
if (E != null && E())
return M.stopPropagation(), M.preventDefault(), e == null ? void 0 : e.hide();
}
if (i) {
const E = {
ArrowRight: () => {
if (h)
return i.next();
},
ArrowLeft: () => {
if (h)
return i.previous();
},
ArrowDown: () => {
if (!h)
return i.next();
},
ArrowUp: () => {
if (!h)
return i.previous();
}
}[M.key], B = E == null ? void 0 : E();
B !== void 0 && (M.stopPropagation(), M.preventDefault(), i.move(B));
}
}
});
o = te(
o,
(M) => /* @__PURE__ */ l(On, { value: e, children: M }),
[e]
);
const v = $n({ store: e, ...o }), p = e.useState("mounted"), N = Jt(p, o.hidden, t), C = N ? { ...o.style, display: "none" } : o.style;
o = {
id: f,
"aria-labelledby": v,
hidden: N,
...o,
ref: ne(f ? e.setContentElement : null, o.ref),
style: C,
onKeyDown: y
};
const T = !!e.combobox;
return r = r ?? !T, r && (o = {
role: "menu",
"aria-orientation": g,
...o
}), o = Qt({ store: e, composite: r, ...o }), o = Ce({ store: e, typeahead: !T, ...o }), o;
}
);
x(function(e) {
const t = rt(e);
return S(Fn, t);
});
var Rn = "div", Gn = w(function({
store: e,
modal: t = !1,
portal: r = !!t,
hideOnEscape: o = !0,
autoFocusOnShow: u = !0,
hideOnHoverOutside: c,
alwaysVisible: i,
...s
}) {
const f = ue();
e = e || f, L(
e,
process.env.NODE_ENV !== "production" && "Menu must receive a `store` prop or be wrapped in a MenuProvider component."
);
const d = be(null), a = e.parent, g = e.menubar, m = !!a, h = !!g && !m;
s = {
...s,
ref: ne(d, s.ref)
};
const { "aria-labelledby": y, ...v } = rt({
store: e,
alwaysVisible: i,
...s
});
s = v;
const [p, N] = ge(), C = e.useState("autoFocusOnShow"), T = e.useState("initialFocus"), M = e.useState("baseElement"), F = e.useState("renderedItems");
j(() => {
let I = !1;
return N((_) => {
var Q, _e, Ie;
if (I || !C) return;
if ((Q = _ == null ? void 0 : _.current) != null && Q.isConnected) return _;
const X = Wt();
switch (T) {
// TODO: Refactor
case "first":
X.current = ((_e = F.find((q) => !q.disabled && q.element)) == null ? void 0 : _e.element) || null;
break;
case "last":
X.current = ((Ie = [...F].reverse().find((q) => !q.disabled && q.element)) == null ? void 0 : Ie.element) || null;
break;
default:
X.current = M;
}
return X;
}), () => {
I = !0;
};
}, [e, C, T, F, M]);
const E = m ? !1 : t, B = !!u, b = !!p || !!s.initialFocus || !!E, k = A(
e.combobox || e,
"contentElement"
), $ = A(
(a == null ? void 0 : a.combobox) || a,
"contentElement"
), W = qt(() => {
if (!$ || !k) return;
const I = k.getAttribute("role"), _ = $.getAttribute("role");
if (!((_ === "menu" || _ === "menubar") && I === "menu"))
return $;
}, [k, $]);
return W !== void 0 && (s = {
preserveTabOrderAnchor: W,
...s
}), s = yt({
store: e,
alwaysVisible: i,
initialFocus: p,
autoFocusOnShow: B ? b && u : C || !!E,
...s,
hideOnEscape(I) {
return Gt(o, I) ? !1 : (e == null || e.hideAll(), !0);
},
hideOnHoverOutside(I) {
const _ = e == null ? void 0 : e.getState().disclosureElement;
return (typeof c == "function" ? c(I) : c ?? (m ? !0 : h ? _ ? !K(_) : !0 : !1)) ? I.defaultPrevented || !m || !_ || (Rt(_, "mouseout", I), !K(_)) ? !0 : (requestAnimationFrame(() => {
K(_) || e == null || e.hide();
}), !1) : !1;
},
modal: E,
portal: r,
backdrop: m ? !1 : s.backdrop
}), s = {
"aria-labelledby": y,
...s
}, s;
}), Hn = Xt(
x(function(e) {
const t = Gn(e);
return S(Rn, t);
}),
ue
), Vn = "div", zn = w(
function({ store: e, ...t }) {
const r = oe();
return e = e || r, en({ store: e, ...t });
}
), Bn = x(function(e) {
const t = zn(e);
return S(Vn, t);
}), Kn = "button";
function jn(n, e) {
return {
ArrowDown: e === "bottom" || e === "top" ? "first" : !1,
ArrowUp: e === "bottom" || e === "top" ? "last" : !1,
ArrowRight: e === "right" ? "first" : !1,
ArrowLeft: e === "left" ? "first" : !1
}[n.key];
}
function Ee(n, e) {
return !!(n != null && n.some((t) => !t.element || t.element === e ? !1 : t.element.getAttribute("aria-expanded") === "true"));
}
var Un = w(
function({
store: e,
focusable: t,
accessibleWhenDisabled: r,
showOnHover: o,
...u
}) {
const c = ue();
e = e || c, L(
e,
process.env.NODE_ENV !== "production" && "MenuButton must receive a `store` prop or be wrapped in a MenuProvider component."
);
const i = be(null), s = e.parent, f = e.menubar, d = !!s, a = !!f && !d, g = Ht(u), m = () => {
const b = i.current;
b && (e == null || e.setDisclosureElement(b), e == null || e.setAnchorElement(b), e == null || e.show());
}, h = u.onFocus, y = O((b) => {
if (h == null || h(b), g || b.defaultPrevented || (e == null || e.setAutoFocusOnShow(!1), e == null || e.setActiveId(null), !f) || !a) return;
const { items: k } = f.getState();
Ee(k, b.currentTarget) && m();
}), v = A(
e,
(b) => b.placement.split("-")[0]
), p = u.onKeyDown, N = O((b) => {
if (p == null || p(b), g || b.defaultPrevented) return;
const k = jn(b, v);
k && (b.preventDefault(), m(), e == null || e.setAutoFocusOnShow(!0), e == null || e.setInitialFocus(k));
}), C = u.onClick, T = O((b) => {
if (C == null || C(b), b.defaultPrevented || !e) return;
const k = !b.detail, { open: $ } = e.getState();
(!$ || k) && ((!d || k) && e.setAutoFocusOnShow(!0), e.setInitialFocus(k ? "first" : "container")), d && m();
});
u = te(
u,
(b) => /* @__PURE__ */ l(tt, { value: e, children: b }),
[e]
), d && (u = {
...u,
render: /* @__PURE__ */ l(Yt.div, { render: u.render })
});
const M = he(u.id), F = A(
(s == null ? void 0 : s.combobox) || s,
"contentElement"
), E = d || a ? Ve(F, "menuitem") : void 0, B = e.useState("contentElement");
return u = {
id: M,
role: E,
"aria-haspopup": Vt(B, "menu"),
...u,
ref: ne(i, u.ref),
onFocus: y,
onKeyDown: N,
onClick: T
}, u = pt({
store: e,
focusable: t,
accessibleWhenDisabled: r,
...u,
showOnHover: (b) => {
if (!(() => {
if (typeof o == "function") return o(b);
if (o != null) return o;
if (d) return !0;
if (!f) return !1;
const { items: I } = f.getState();
return a && Ee(I);
})()) return !1;
const W = a ? f : s;
return W && W.setActiveId(b.currentTarget.id), !0;
}
}), u = tn({
store: e,
toggleOnClick: !d,
focusable: t,
accessibleWhenDisabled: r,
...u
}), u = Ce({
store: e,
typeahead: a,
...u
}), u;
}
), ot = x(function(e) {
const t = Un(e);
return S(Kn, t);
}), Wn = "div", qn = w(
function(e) {
return e = Ze(e), e;
}
), Zn = x(function(e) {
const t = qn(e);
return S(Wn, t);
}), Jn = "div", Qn = w(
function(e) {
return e = Qe(e), e;
}
), Xn = x(function(e) {
const t = Qn(e);
return S(Jn, t);
}), Yn = "div";
function er(n, e, t) {
var r;
if (!n) return !1;
if (K(n)) return !0;
const o = e == null ? void 0 : e.find((s) => {
var f;
return s.element === t ? !1 : ((f = s.element) == null ? void 0 : f.getAttribute("aria-expanded")) === "true";
}), u = (r = o == null ? void 0 : o.element) == null ? void 0 : r.getAttribute("aria-controls");
if (!u) return !1;
const i = Ge(n).getElementById(u);
return i ? K(i) ? !0 : !!i.querySelector("[role=menuitem][aria-expanded=true]") : !1;
}
var xe = w(
function({
store: e,
hideOnClick: t = !0,
preventScrollOnKeyDown: r = !0,
focusOnHover: o,
blurOnHoverEnd: u,
...c
}) {
const i = we(!0), s = bn();
e = e || i || s, L(
e,
process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, Menu or Menubar component"
);
const f = c.onClick, d = se(t), a = "hideAll" in e ? e.hideAll : void 0, g = !!a, m = O((v) => {
f == null || f(v), !(v.defaultPrevented || zt(v) || Bt(v) || !a || v.currentTarget.getAttribute("aria-haspopup") === "menu") && d(v) && a();
}), h = A(
e,
(v) => "contentElement" in v ? v.contentElement : null
);
return c = {
role: Ve(h, "menuitem"),
...c,
onClick: m
}, c = Pt({
store: e,
preventScrollOnKeyDown: r,
...c
}), c = Ye({
store: e,
...c,
focusOnHover(v) {
const p = () => typeof o == "function" ? o(v) : o ?? !0;
if (!e || !p()) return !1;
const { baseElement: N, items: C } = e.getState();
return g ? (v.currentTarget.hasAttribute("aria-expanded") && v.currentTarget.focus(), !0) : er(N, C, v.currentTarget) ? (v.currentTarget.focus(), !0) : !1;
},
blurOnHoverEnd(v) {
return typeof u == "function" ? u(v) : u ?? g;
}
}), c;
}
), Se = re(
x(function(e) {
const t = xe(e);
return S(Yn, t);
})
), tr = "span", nr = w(
function({ store: e, checked: t, ...r }) {
const o = Me(nt);
return t = t ?? o, r = et({ ...r, checked: t }), r;
}
), rr = x(function(e) {
const t = nr(e);
return S(tr, t);
}), or = "div";
function ur(n) {
return Array.isArray(n) ? n.toString() : n;
}
function ie(n, e, t) {
if (e === void 0)
return Array.isArray(n) ? n : !!t;
const r = ur(e);
return Array.isArray(n) ? t ? n.includes(r) ? n : [...n, r] : n.filter((o) => o !== r) : t ? r : n === r ? !1 : n;
}
var ar = w(
function({
store: e,
name: t,
value: r,
checked: o,
defaultChecked: u,
hideOnClick: c = !1,
...i
}) {
const s = we();
e = e || s, L(
e,
process.env.NODE_ENV !== "production" && "MenuItemCheckbox must be wrapped in a MenuList or Menu component"
);
const f = ze(u);
j(() => {
e == null || e.setValue(t, (a = []) => f ? ie(a, r, !0) : a);
}, [e, t, r, f]), j(() => {
o !== void 0 && (e == null || e.setValue(t, (a) => ie(a, r, o)));
}, [e, t, r, o]);
const d = Ln({
value: e.useState((a) => a.values[t]),
setValue(a) {
e == null || e.setValue(t, () => {
if (o === void 0) return a;
const g = ie(a, r, o);
return !Array.isArray(g) || !Array.isArray(a) ? g : Kt(a, g) ? a : g;
});
}
});
return i = {
role: "menuitemcheckbox",
...i
}, i = rn({
store: d,
name: t,
value: r,
checked: o,
...i
}), i = xe({ store: e, hideOnClick: c, ...i }), i;
}
), ir = re(
x(function(e) {
const t = ar(e);
return S(or, t);
})
), cr = "div";
function ce(n, e, t) {
return t === void 0 ? n : t ? e : n === e ? !1 : n;
}
var sr = w(
function({
store: e,
name: t,
value: r,
checked: o,
onChange: u,
hideOnClick: c = !1,
...i
}) {
const s = we();
e = e || s, L(
e,
process.env.NODE_ENV !== "production" && "MenuItemRadio must be wrapped in a MenuList or Menu component"
);
const f = ze(i.defaultChecked);
j(() => {
e == null || e.setValue(t, (a = !1) => ce(a, r, f));
}, [e, t, r, f]), j(() => {
o !== void 0 && (e == null || e.setValue(t, (a) => ce(a, r, o)));
}, [e, t, r, o]);
const d = e.useState((a) => a.values[t] === r);
return i = te(
i,
(a) => /* @__PURE__ */ l(nt.Provider, { value: !!d, children: a }),
[d]
), i = {
role: "menuitemradio",
...i
}, i = on({
name: t,
value: r,
checked: d,
onChange(a) {
if (u == null || u(a), a.defaultPrevented) return;
const g = a.currentTarget;
e == null || e.setValue(t, (m) => ce(m, r, o ?? g.checked));
},
...i
}), i = xe({ store: e, hideOnClick: c, ...i }), i;
}
), lr = re(
x(function(e) {
const t = sr(e);
return S(cr, t);
})
);
function dr({
combobox: n,
parent: e,
menubar: t,
...r
} = {}) {
const o = !!t && !e, u = Mt(
r.store,
wt(e, ["values"]),
Ct(n, [
"arrowElement",
"anchorElement",
"contentElement",
"popoverElement",
"disclosureElement"
])
);
Te(r, u);
const c = u.getState(), i = un({
...r,
store: u,
orientation: R(
r.orientation,
c.orientation,
"vertical"
)
}), s = kt({
...r,
store: u,
placement: R(
r.placement,
c.placement,
"bottom-start"
),
timeout: R(
r.timeout,
c.timeout,
o ? 0 : 150
),
hideTimeout: R(r.hideTimeout, c.hideTimeout, 0)
}), f = {
...i.getState(),
...s.getState(),
initialFocus: R(c.initialFocus, "container"),
values: R(
r.values,
c.values,
r.defaultValues,
{}
)
}, d = De(f, i, s, u);
return Pe(
d,
() => Ne(d, ["mounted"], (a) => {
a.mounted || d.setState("activeId", null);
})
), Pe(
d,
() => Ne(e, ["orientation"], (a) => {
d.setState(
"placement",
a.orientation === "vertical" ? "right-start" : "bottom-start"
);
})
), {
...i,
...s,
...d,
combobox: n,
parent: e,
menubar: t,
hideAll: () => {
s.hide(), e == null || e.hideAll();
},
setInitialFocus: (a) => d.setState("initialFocus", a),
setValues: (a) => d.setState("values", a),
setValue: (a, g) => {
a !== "__proto__" && a !== "constructor" && (Array.isArray(a) || d.setState("values", (m) => {
const h = m[a], y = jt(g, h);
return y === h ? m : {
...m,
[a]: y !== void 0 && y
};
}));
}
};
}
function mr(n, e, t) {
return He(e, [t.combobox, t.parent, t.menubar]), Oe(n, t, "values", "setValues"), Object.assign(
_t(
an(n, e, t),
e,
t
),
{
combobox: t.combobox,
parent: t.parent,
menubar: t.menubar
}
);
}
function ye(n = {}) {
const e = oe(), t = vn(), r = cn();
n = {
...n,
parent: n.parent !== void 0 ? n.parent : e,
menubar: n.menubar !== void 0 ? n.menubar : t,
combobox: n.combobox !== void 0 ? n.combobox : r
};
const [o, u] = Le(dr, n);
return mr(o, u, n);
}
function fr(n = {}) {
const e = ye(n);
return /* @__PURE__ */ l(tt, { value: e, children: n.children });
}
var hr = "hr", vr = w(
function({ store: e, ...t }) {
const r = oe();
return e = e || r, t = je({ store: e, ...t }), t;
}
), br = x(function(e) {
const t = vr(e);
return S(hr, t);
});
const gr = "_root_1u58t_2", Mr = "_arrow_1u58t_29", Cr = "_stroke_1u58t_1", wr = "_item_1u58t_55", xr = "_action_1u58t_94", Sr = "_search_1u58t_103", yr = "_separator_1u58t_146", V = {
root: gr,
arrow: Mr,
stroke: Cr,
"arrow-item": "_arrow-item_1u58t_38",
"arrow-placement-bottom": "_arrow-placement-bottom_1u58t_43",
"arrow-placement-left": "_arrow-placement-left_1u58t_46",
"arrow-placement-right": "_arrow-placement-right_1u58t_49",
"arrow-placement-top": "_arrow-placement-top_1u58t_52",
item: wr,
action: xr,
"group-label": "_group-label_1u58t_98",
search: Sr,
"item-content": "_item-content_1u58t_106",
"item-description": "_item-description_1u58t_111",
"item-default-check": "_item-default-check_1u58t_122",
"item-toggle-check": "_item-toggle-check_1u58t_127",
"item-checkbox": "_item-checkbox_1u58t_130",
"item-radio": "_item-radio_1u58t_131",
separator: yr,
"size-md": "_size-md_1u58t_155",
"size-lg": "_size-lg_1u58t_162"
}, pr = H(V), ut = U(
({ as: n = "button", className: e, ...t }, r) => /* @__PURE__ */ l(
Se,
{
...t,
render: /* @__PURE__ */ l(n, { className: pr("item", "action", e), ref: r })
}
)
);
ut.displayName = "DropdownMenu.Action";
const Ae = H(V), at = P(
({ className: n, store: e, ...t }, r) => {
const o = oe(), u = e ?? o, c = A(u, "currentPlacement"), [i] = c.split("-");
return /* @__PURE__ */ l(
Bn,
{
...t,
ref: r,
render: /* @__PURE__ */ l("div", { className: Ae("arrow", n), children: /* @__PURE__ */ G(
"svg",
{
className: Ae("arrow-item", i && `arrow-placement-${i}`),
viewBox: "0 0 30 30",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ l("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }),
/* @__PURE__ */ l("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" })
]
}
) }),
size: 32,
store: u
}
);
}
);
at.displayName = "DropdownMenu.Arrow";
const kr = H(V), it = U(
({ as: n = "div", ...e }, t) => /* @__PURE__ */ l(Zn, { ref: t, render: /* @__PURE__ */ l(n, {}), ...e })
);
it.displayName = "DropdownMenu.Group";
const ct = U(
({ as: n = "div", className: e, ...t }, r) => /* @__PURE__ */ l(
Xn,
{
...t,
ref: r,
render: /* @__PURE__ */ l(n, { className: kr("item", "group-label", e) })
}
)
);
ct.displayName = "DropdownMenu.GroupLabel";
const z = H(V), pe = U(
({ as: n = "button", children: e, className: t, name: r, onClick: o, value: u, variant: c, ...i }, s) => /* @__PURE__ */ l(
Se,
{
hideOnClick: !c || c === "radio" || c === "radio-mark",
...i,
onClick: (a) => {
a.stopPropagation(), o == null || o(a);
},
ref: s,
render: /* @__PURE__ */ l(n, { className: z("item", t), children: (() => {
switch (c) {
case "checkbox":
return /* @__PURE__ */ G(ee, { name: r, value: u, children: [
/* @__PURE__ */ l(dt, { name: r, value: u }),
e
] });
case "checkbox-mark":
return /* @__PURE__ */ G(ee, { name: r, value: u, children: [
e,
/* @__PURE__ */ l(me, {})
] });
case "radio":
return /* @__PURE__ */ G(de, { name: r, value: u, children: [
/* @__PURE__ */ l(mt, { name: r, value: u }),
e
] });
case "radio-mark":
return /* @__PURE__ */ G(de, { name: r, value: u, children: [
e,
/* @__PURE__ */ l(me, {})
] });
case "toggle":
return /* @__PURE__ */ G(ee, { name: r, value: u, children: [
/* @__PURE__ */ l(ft, { name: r, value: u }),
e
] });
default:
return e;
}
})() })
}
)
);
pe.displayName = "DropdownMenu.Item";
const st = P(
({ className: n, ...e }, t) => /* @__PURE__ */ l("div", { ...e, className: z("item-content", n), ref: t })
);
st.displayName = "DropdownMenu.ItemContent";
const lt = P(
({ className: n, ...e }, t) => /* @__PURE__ */ l("div", { ...e, className: z("item-description", n), ref: t })
);
lt.displayName = "DropdownMenu.ItemDescription";
const ee = P(
({ className: n, ...e }, t) => /* @__PURE__ */ l(ir, { ...e, className: z("item-checkbox", n), ref: t })
);
ee.displayName = "DropdownMenu.ItemCheckbox";
const de = P(({ className: n, ...e }, t) => /* @__PURE__ */ l(lr, { ...e, className: z("item-radio", n), ref: t }));
de.displayName = "DropdownMenu.ItemRadio";
const me = P(
({ className: n, ...e }, t) => /* @__PURE__ */ l(rr, { ...e, className: z("item-default-check", n), ref: t, children: /* @__PURE__ */ l(Be, { name: "check", size: "md" }) })
);
me.displayName = "DropdownMenu.ItemDefaultCheck";
const dt = P(
({ name: n, value: e = !0, ...t }, r) => {
const o = ke(n, e);
return /* @__PURE__ */ Zt(
sn,
{
"aria-hidden": "true",
...t,
checked: o,
key: o.toString(),
ref: r
}
);
}
);
dt.displayName = "DropdownMenu.ItemCheckboxCheck";
const mt = P(
({ name: n, value: e, ...t }, r) => {
const o = ke(n, e);
return /* @__PURE__ */ l(ln, { "aria-hidden": "true", ...t, checked: o, ref: r });
}
);
mt.displayName = "DropdownMenu.ItemRadioCheck";
const ft = P(
({ className: n, name: e, value: t = !0, ...r }, o) => {
const u = ke(e, t);
return /* @__PURE__ */ l(
dn,
{
"aria-hidden": "true",
...r,
checked: u,
className: z("item-toggle-check", n),
ref: o,
size: "sm"
}
);
}
);
ft.displayName = "DropdownMenu.ItemToggleCheck";
const ke = (n, e) => {
const t = ye(), o = A(t).values[n];
return Array.isArray(o) ? o.includes(e) : o === e;
}, _r = H(V), ht = U(
({ as: n = mn, className: e, ...t }, r) => /* @__PURE__ */ l(
Se,
{
...t,
hideOnClick: !1,
ref: r,
render: /* @__PURE__ */ l(n, { className: _r("item", "search", e), icon: /* @__PURE__ */ l(Be, { name: "search" }) })
}
)
);
ht.displayName = "DropdownMenu.Search";
const Ir = H(V), vt = P(
({ className: n, ...e }, t) => /* @__PURE__ */ l(br, { ...e, ref: t, render: /* @__PURE__ */ l("hr", { className: Ir("separator", n) }) })
);
vt.displayName = "DropdownMenu.Separator";
const bt = U(
({ as: n, onClick: e, store: t, ...r }, o) => /* @__PURE__ */ l(
ot,
{
onClick: (c) => {
c.preventDefault(), e == null || e(c), t.toggle();
},
ref: o,
render: n ? (c) => /* @__PURE__ */ l(n, { ...c }) : void 0,
store: t,
...r
}
)
);
bt.displayName = "DropdownMenu.Trigger";
const gt = P(
({ children: n, item: e, size: t = "lg", ...r }, o) => {
const u = ye();
return /* @__PURE__ */ G(fr, { store: u, children: [
/* @__PURE__ */ l(ot, { ...r, ref: o, render: /* @__PURE__ */ l(pe, { children: e }) }),
/* @__PURE__ */ l(Ar, { size: t, withGutter: !0, children: n })
] });
}
);
gt.displayName = "DropdownMenu.Submenu";
const Pr = H(V), Nr = 8, Er = P(
({ className: n, size: e = "lg", store: t, withGutter: r = !0, ...o }, u) => {
const c = A(t, "arrowElement");
return /* @__PURE__ */ l(
Hn,
{
...o,
"aria-label": "dropdown-menu",
className: n,
gutter: r && !c ? Nr : 0,
ref: u,
render: /* @__PURE__ */ l("div", { className: Pr("root", `size-${e}`, n) }),
store: t,
tabIndex: 0
}
);
}
), Ar = Object.assign(Er, {
Action: ut,
Arrow: at,
Content: st,
Description: lt,
Group: it,
GroupLabel: ct,
Item: pe,
Search: ht,
Separator: vt,
Submenu: gt,
Trigger: bt
});
export {
Ar as DropdownMenu,
V as dropdownMenuClasses,
ye as useDropdownMenu,
A as useStoreState
};