UNPKG

welcome-ui

Version:

Customizable design system with react, typescript, tailwindcss and ariakit.

741 lines (740 loc) 22.7 kB
"use client"; import { jsx as _, jsxs as Le } from "react/jsx-runtime"; import { u as D, m as Ve, o as Re, p as $e, t as Ke, c as Be, s as pe, a as ve, b as ze, d as We } from "./RTNCFSKZ-P4icqVD0.js"; import { H as je, a as Ue, u as qe, b as Ge, c as Ze, d as Je, e as Qe } from "./GVVKDT6A-BnYN-H7C.js"; import { u as ue, C as we, a as ge, f as Xe, b as Ye } from "./SBSPVDDI-CW8jwL0u.js"; import { c as N, _ as P, a as b, f as k, b as F, i as B, d as y, e as Me, u as $, g as Se, s as et, r as Ce, h as tt, j as rt, n as nt, k as ot, l as se, m as U, o as st, p as ee, q as at, t as ut, v as _e, w as xe, x as ye, y as it, z as ct, A as lt, B as Ee, C as dt, D as ft, E as mt, F as pt, G, H as j, I as R, J as vt, K as bt } from "./OE2EFRVA-C3721cM3.js"; import { createContext as Pe, useRef as ie, useCallback as ht, useState as Oe, useEffect as Ae, createRef as wt, useMemo as gt, forwardRef as ce } from "react"; import { i as Mt } from "./T22PY7TE-BxbmImwX.js"; import { u as St, a as Ct } from "./OLVWQA7U-CQsIDzlF.js"; import { c as _t, R as xt } from "./NI3IVY7K-DxnarnKs.js"; import { c as te } from "./index-PAaZGbyz.js"; import { f as Te } from "./forwardRefWithAs-8eP3ZN15.js"; import { u as yt } from "./4I4MLMKD-DgPx2VDC.js"; import { c as Et, u as Pt } from "./B7UTNDHN-C-gORHYH.js"; var Ot = "hr", He = N( function(t) { var r = t, { orientation: e = "horizontal" } = r, o = P(r, ["orientation"]); return o = b({ role: "separator", "aria-orientation": e }, o), o; } ); k(function(t) { const r = He(t); return F(Ot, r); }); var At = "hr", Ie = N(function(t) { var r = t, { store: e } = r, o = P(r, ["store"]); const u = ue(); e = e || u, B( e, process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component." ); const a = e.useState( (s) => s.orientation === "horizontal" ? "vertical" : "horizontal" ); return o = He(y(b({}, o), { orientation: a })), o; }); k(function(t) { const r = Ie(t); return F(At, r); }); var De = Me( [ge], [we] ), Tt = De.useContext, Ht = De.useScopedContext; Pe( void 0 ); var It = "div", L = ""; function oe() { L = ""; } function Dt(n) { const t = n.target; return t && tt(t) ? !1 : n.key === " " && L.length ? !0 : n.key.length === 1 && !n.ctrlKey && !n.altKey && !n.metaKey && /^[\p{Letter}\p{Number}]$/u.test(n.key); } function Nt(n, t) { if (rt(n)) return !0; const r = n.target; return r ? t.some((o) => o.element === r) : !1; } function kt(n) { return n.filter((t) => !t.disabled); } function Y(n, t) { var r; const e = ((r = n.element) == null ? void 0 : r.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 e ? nt(e).trim().toLowerCase().startsWith(t.toLowerCase()) : !1; } function Ft(n, t, r) { if (!r) return n; const e = n.find((o) => o.id === r); return !e || !Y(e, t) || L !== t && Y(e, L) ? n : (L = t, Xe( n.filter((o) => Y(o, L)), r ).filter((o) => o.id !== r)); } var le = N(function(t) { var r = t, { store: e, typeahead: o = !0 } = r, u = P(r, ["store", "typeahead"]); const a = ue(); e = e || a, B( e, process.env.NODE_ENV !== "production" && "CompositeTypeahead must be a Composite component" ); const s = u.onKeyDownCapture, c = ie(0), d = $((i) => { if (s == null || s(i), i.defaultPrevented || !o || !e) return; if (!Dt(i)) return oe(); const { renderedItems: w, items: p, activeId: l, id: C } = e.getState(); let m = kt( p.length > w.length ? p : w ); const f = Se(i.currentTarget), M = `[data-offscreen-id="${C}"]`, v = f.querySelectorAll(M); for (const S of v) { const H = S.ariaDisabled === "true" || "disabled" in S && !!S.disabled; m.push({ id: S.id, element: S, disabled: H }); } if (v.length && (m = et(m, (S) => S.element)), !Nt(i, m)) return oe(); i.preventDefault(), window.clearTimeout(c.current), c.current = window.setTimeout(() => { L = ""; }, 500); const O = i.key.toLowerCase(); L += O, m = Ft(m, O, l); const E = m.find((S) => Y(S, L)); E ? e.move(E.id) : oe(); }); return u = y(b({}, u), { onKeyDownCapture: d }), Ce(u); }); k(function(t) { const r = le(t); return F(It, r); }); var Lt = "div"; function Ne(n) { const t = n.relatedTarget; return (t == null ? void 0 : t.nodeType) === Node.ELEMENT_NODE ? t : null; } function Vt(n) { const t = Ne(n); return t ? at(n.currentTarget, t) : !1; } var ae = Symbol("composite-hover"); function Rt(n) { let t = Ne(n); if (!t) return !1; do { if (ut(t, ae) && t[ae]) return !0; t = t.parentElement; } while (t); return !1; } var ke = N( function(t) { var r = t, { store: e, focusOnHover: o = !0, blurOnHoverEnd: u = !!o } = r, a = P(r, [ "store", "focusOnHover", "blurOnHoverEnd" ]); const s = ue(); e = e || s, B( e, process.env.NODE_ENV !== "production" && "CompositeHover must be wrapped in a Composite component." ); const c = ot(), d = a.onMouseMove, i = se(o), w = $((f) => { if (d == null || d(f), !f.defaultPrevented && c() && i(f)) { if (!U(f.currentTarget)) { const M = e == null ? void 0 : e.getState().baseElement; M && !st(M) && M.focus(); } e == null || e.setActiveId(f.currentTarget.id); } }), p = a.onMouseLeave, l = se(u), C = $((f) => { var M; p == null || p(f), !f.defaultPrevented && c() && (Vt(f) || Rt(f) || i(f) && l(f) && (e == null || e.setActiveId(null), (M = e == null ? void 0 : e.getState().baseElement) == null || M.focus())); }), m = ht((f) => { f && (f[ae] = !0); }, []); return a = y(b({}, a), { ref: ee(m, a.ref), onMouseMove: w, onMouseLeave: C }), Ce(a); } ); _e( k(function(t) { const r = ke(t); return F(Lt, r); }) ); var Z = Me( [ge, Ue], [we, je] ), de = Z.useContext, $t = Z.useScopedContext, re = Z.useProviderContext, Kt = Z.ContextProvider, Bt = Z.ScopedContextProvider; Pe( void 0 ); var zt = "div"; function Wt(n) { var t = n, { store: r } = t, e = P(t, ["store"]); const [o, u] = Oe(void 0), a = e["aria-label"], s = D(r, "disclosureElement"), c = D(r, "contentElement"); return Ae(() => { const d = s; if (!d) return; const i = c; if (!i) return; a || i.hasAttribute("aria-label") ? u(void 0) : d.id && u(d.id); }, [a, s, c]), o; } var Fe = N( function(t) { var r = t, { store: e, alwaysVisible: o, composite: u } = r, a = P(r, ["store", "alwaysVisible", "composite"]); const s = re(); e = e || s, B( e, process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component." ); const c = e.parent, d = e.menubar, i = !!c, w = xe(a.id), p = a.onKeyDown, l = e.useState( (g) => g.placement.split("-")[0] ), C = e.useState( (g) => g.orientation === "both" ? void 0 : g.orientation ), m = C !== "vertical", f = D( d, (g) => !!g && g.orientation !== "vertical" ), M = $((g) => { if (p == null || p(g), !g.defaultPrevented) { if (i || d && !m) { const A = { ArrowRight: () => l === "left" && !m, ArrowLeft: () => l === "right" && !m, ArrowUp: () => l === "bottom" && m, ArrowDown: () => l === "top" && m }[g.key]; if (A != null && A()) return g.stopPropagation(), g.preventDefault(), e == null ? void 0 : e.hide(); } if (d) { const A = { ArrowRight: () => { if (f) return d.next(); }, ArrowLeft: () => { if (f) return d.previous(); }, ArrowDown: () => { if (!f) return d.next(); }, ArrowUp: () => { if (!f) return d.previous(); } }[g.key], V = A == null ? void 0 : A(); V !== void 0 && (g.stopPropagation(), g.preventDefault(), d.move(V)); } } }); a = ye( a, (g) => /* @__PURE__ */ _(Bt, { value: e, children: g }), [e] ); const v = Wt(b({ store: e }, a)), O = e.useState("mounted"), E = Mt(O, a.hidden, o), S = E ? y(b({}, a.style), { display: "none" }) : a.style; a = y(b({ id: w, "aria-labelledby": v, hidden: E }, a), { ref: ee(w ? e.setContentElement : null, a.ref), style: S, onKeyDown: M }); const H = !!e.combobox; return u = u ?? !H, u && (a = b({ role: "menu", "aria-orientation": C }, a)), a = St(b({ store: e, composite: u }, a)), a = le(b({ store: e, typeahead: !H }, a)), a; } ); k(function(t) { const r = Fe(t); return F(zt, r); }); var jt = "div", Ut = N(function(t) { var r = t, { store: e, modal: o = !1, portal: u = !!o, hideOnEscape: a = !0, autoFocusOnShow: s = !0, hideOnHoverOutside: c, alwaysVisible: d } = r, i = P(r, [ "store", "modal", "portal", "hideOnEscape", "autoFocusOnShow", "hideOnHoverOutside", "alwaysVisible" ]); const w = re(); e = e || w, B( e, process.env.NODE_ENV !== "production" && "Menu must receive a `store` prop or be wrapped in a MenuProvider component." ); const p = ie(null), l = e.parent, C = e.menubar, m = !!l, f = !!C && !m; i = y(b({}, i), { ref: ee(p, i.ref) }); const M = Fe(b({ store: e, alwaysVisible: d }, i)), { "aria-labelledby": v } = M; i = P(M, ["aria-labelledby"]); const [E, S] = Oe(), H = e.useState("autoFocusOnShow"), g = e.useState("initialFocus"), z = e.useState("baseElement"), A = e.useState("renderedItems"); Ae(() => { let I = !1; return S((x) => { var Q, fe, me; if (I || !H) return; if ((Q = x == null ? void 0 : x.current) != null && Q.isConnected) return x; const X = wt(); switch (g) { // TODO: Refactor case "first": X.current = ((fe = A.find((q) => !q.disabled && q.element)) == null ? void 0 : fe.element) || null; break; case "last": X.current = ((me = [...A].reverse().find((q) => !q.disabled && q.element)) == null ? void 0 : me.element) || null; break; default: X.current = z; } return X; }), () => { I = !0; }; }, [e, H, g, A, z]); const V = m ? !1 : o, h = !!s, T = !!E || !!i.initialFocus || !!V, W = D( e.combobox || e, "contentElement" ), K = D( (l == null ? void 0 : l.combobox) || l, "contentElement" ), J = gt(() => { if (!K || !W) return; const I = W.getAttribute("role"), x = K.getAttribute("role"); if (!((x === "menu" || x === "menubar") && I === "menu")) return K; }, [W, K]); return J !== void 0 && (i = b({ preserveTabOrderAnchor: J }, i)), i = qe(y(b({ store: e, alwaysVisible: d, initialFocus: E, autoFocusOnShow: h ? T && s : H || !!V }, i), { hideOnEscape(I) { return ct(a, I) ? !1 : (e == null || e.hideAll(), !0); }, hideOnHoverOutside(I) { const x = e == null ? void 0 : e.getState().disclosureElement; return (typeof c == "function" ? c(I) : c ?? (m ? !0 : f ? x ? !U(x) : !0 : !1)) ? I.defaultPrevented || !m || !x || (it(x, "mouseout", I), !U(x)) ? !0 : (requestAnimationFrame(() => { U(x) || e == null || e.hide(); }), !1) : !1; }, modal: V, portal: u, backdrop: m ? !1 : i.backdrop })), i = b({ "aria-labelledby": v }, i), i; }), qt = _t( k(function(t) { const r = Ut(t); return F(jt, r); }), re ), Gt = "div", Zt = N( function(t) { var r = t, { store: e } = r, o = P(r, ["store"]); const u = de(); return e = e || u, Ge(b({ store: e }, o)); } ), Jt = k(function(t) { const r = Zt(t); return F(Gt, r); }), Qt = "button"; function Xt(n, t) { return { ArrowDown: t === "bottom" || t === "top" ? "first" : !1, ArrowUp: t === "bottom" || t === "top" ? "last" : !1, ArrowRight: t === "right" ? "first" : !1, ArrowLeft: t === "left" ? "first" : !1 }[n.key]; } function be(n, t) { return !!(n != null && n.some((r) => !r.element || r.element === t ? !1 : r.element.getAttribute("aria-expanded") === "true")); } var Yt = N( function(t) { var r = t, { store: e, focusable: o, accessibleWhenDisabled: u, showOnHover: a } = r, s = P(r, [ "store", "focusable", "accessibleWhenDisabled", "showOnHover" ]); const c = re(); e = e || c, B( e, process.env.NODE_ENV !== "production" && "MenuButton must receive a `store` prop or be wrapped in a MenuProvider component." ); const d = ie(null), i = e.parent, w = e.menubar, p = !!i, l = !!w && !p, C = lt(s), m = () => { const h = d.current; h && (e == null || e.setDisclosureElement(h), e == null || e.setAnchorElement(h), e == null || e.show()); }, f = s.onFocus, M = $((h) => { if (f == null || f(h), C || h.defaultPrevented || (e == null || e.setAutoFocusOnShow(!1), e == null || e.setActiveId(null), !w) || !l) return; const { items: T } = w.getState(); be(T, h.currentTarget) && m(); }), v = D( e, (h) => h.placement.split("-")[0] ), O = s.onKeyDown, E = $((h) => { if (O == null || O(h), C || h.defaultPrevented) return; const T = Xt(h, v); T && (h.preventDefault(), m(), e == null || e.setAutoFocusOnShow(!0), e == null || e.setInitialFocus(T)); }), S = s.onClick, H = $((h) => { if (S == null || S(h), h.defaultPrevented || !e) return; const T = !h.detail, { open: W } = e.getState(); (!W || T) && ((!p || T) && e.setAutoFocusOnShow(!0), e.setInitialFocus(T ? "first" : "container")), p && m(); }); s = ye( s, (h) => /* @__PURE__ */ _(Kt, { value: e, children: h }), [e] ), p && (s = y(b({}, s), { render: /* @__PURE__ */ _(xt.div, { render: s.render }) })); const g = xe(s.id), z = D( (i == null ? void 0 : i.combobox) || i, "contentElement" ), A = p || l ? Ee(z, "menuitem") : void 0, V = e.useState("contentElement"); return s = y(b({ id: g, role: A, "aria-haspopup": dt(V, "menu") }, s), { ref: ee(d, s.ref), onFocus: M, onKeyDown: E, onClick: H }), s = Ze(y(b({ store: e, focusable: o, accessibleWhenDisabled: u }, s), { showOnHover: (h) => { if (!(() => { if (typeof a == "function") return a(h); if (a != null) return a; if (p) return !0; if (!w) return !1; const { items: J } = w.getState(); return l && be(J); })()) return !1; const K = l ? w : i; return K && K.setActiveId(h.currentTarget.id), !0; } })), s = yt(b({ store: e, toggleOnClick: !p, focusable: o, accessibleWhenDisabled: u }, s)), s = le(b({ store: e, typeahead: l }, s)), s; } ), er = k(function(t) { const r = Yt(t); return F(Qt, r); }), tr = "div"; function rr(n, t, r) { var e; if (!n) return !1; if (U(n)) return !0; const o = t == null ? void 0 : t.find((c) => { var d; return c.element === r ? !1 : ((d = c.element) == null ? void 0 : d.getAttribute("aria-expanded")) === "true"; }), u = (e = o == null ? void 0 : o.element) == null ? void 0 : e.getAttribute("aria-controls"); if (!u) return !1; const s = Se(n).getElementById(u); return s ? U(s) ? !0 : !!s.querySelector("[role=menuitem][aria-expanded=true]") : !1; } var nr = N( function(t) { var r = t, { store: e, hideOnClick: o = !0, preventScrollOnKeyDown: u = !0, focusOnHover: a, blurOnHoverEnd: s } = r, c = P(r, [ "store", "hideOnClick", "preventScrollOnKeyDown", "focusOnHover", "blurOnHoverEnd" ]); const d = $t(!0), i = Ht(); e = e || d || i, B( e, process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, Menu or Menubar component" ); const w = c.onClick, p = se(o), l = "hideAll" in e ? e.hideAll : void 0, C = !!l, m = $((v) => { w == null || w(v), !(v.defaultPrevented || ft(v) || mt(v) || !l || v.currentTarget.getAttribute("aria-haspopup") === "menu") && p(v) && l(); }), f = D( e, (v) => "contentElement" in v ? v.contentElement : null ), M = Ee(f, "menuitem"); return c = y(b({ role: M }, c), { onClick: m }), c = Ye(b({ store: e, preventScrollOnKeyDown: u }, c)), c = ke(y(b({ store: e }, c), { focusOnHover(v) { const O = () => typeof a == "function" ? a(v) : a ?? !0; if (!e || !O()) return !1; const { baseElement: E, items: S } = e.getState(); return C ? (v.currentTarget.hasAttribute("aria-expanded") && v.currentTarget.focus(), !0) : rr(E, S, v.currentTarget) ? (v.currentTarget.focus(), !0) : !1; }, blurOnHoverEnd(v) { return typeof s == "function" ? s(v) : s ?? C; } })), c; } ), or = _e( k(function(t) { const r = nr(t); return F(tr, r); }) ); function sr(n = {}) { var t = n, { combobox: r, parent: e, menubar: o } = t, u = pt(t, [ "combobox", "parent", "menubar" ]); const a = !!o && !e, s = Ve( u.store, $e(e, ["values"]), Re(r, [ "arrowElement", "anchorElement", "contentElement", "popoverElement", "disclosureElement" ]) ); Ke(u, s); const c = s.getState(), d = Et(G(R({}, u), { store: s, orientation: j( u.orientation, c.orientation, "vertical" ) })), i = Je(G(R({}, u), { store: s, placement: j( u.placement, c.placement, "bottom-start" ), timeout: j( u.timeout, c.timeout, a ? 0 : 150 ), hideTimeout: j(u.hideTimeout, c.hideTimeout, 0) })), w = G(R(R({}, d.getState()), i.getState()), { initialFocus: j(c.initialFocus, "container"), values: j( u.values, c.values, u.defaultValues, {} ) }), p = Be(w, d, i, s); return pe( p, () => ve(p, ["mounted"], (l) => { l.mounted || p.setState("activeId", null); }) ), pe( p, () => ve(e, ["orientation"], (l) => { p.setState( "placement", l.orientation === "vertical" ? "right-start" : "bottom-start" ); }) ), G(R(R(R({}, d), i), p), { combobox: r, parent: e, menubar: o, hideAll: () => { i.hide(), e == null || e.hideAll(); }, setInitialFocus: (l) => p.setState("initialFocus", l), setValues: (l) => p.setState("values", l), setValue: (l, C) => { l !== "__proto__" && l !== "constructor" && (Array.isArray(l) || p.setState("values", (m) => { const f = m[l], M = vt(C, f); return M === f ? m : G(R({}, m), { [l]: M !== void 0 && M }); })); } }); } function ar(n, t, r) { return bt(t, [r.combobox, r.parent, r.menubar]), We(n, r, "values", "setValues"), Object.assign( Qe( Pt(n, t, r), t, r ), { combobox: r.combobox, parent: r.parent, menubar: r.menubar } ); } function Lr(n = {}) { const t = de(), r = Tt(), e = Ct(); n = y(b({}, n), { parent: n.parent !== void 0 ? n.parent : t, menubar: n.menubar !== void 0 ? n.menubar : r, combobox: n.combobox !== void 0 ? n.combobox : e }); const [o, u] = ze(sr, n); return ar(o, u, n); } var ur = "hr", ir = N( function(t) { var r = t, { store: e } = r, o = P(r, ["store"]); const u = de(); return e = e || u, o = Ie(b({ store: e }, o)), o; } ), cr = k(function(t) { const r = ir(t); return F(ur, r); }); const lr = "_inner_1nesm_2", dr = "_arrow_1nesm_17", fr = "_stroke_1nesm_1", mr = "_item_1nesm_43", pr = "_separator_1nesm_70", ne = { inner: lr, arrow: dr, stroke: fr, "arrow-item": "_arrow-item_1nesm_26", "arrow-placement-bottom": "_arrow-placement-bottom_1nesm_31", "arrow-placement-left": "_arrow-placement-left_1nesm_34", "arrow-placement-right": "_arrow-placement-right_1nesm_37", "arrow-placement-top": "_arrow-placement-top_1nesm_40", item: mr, separator: pr }, he = te(ne), vr = ce(({ className: n, store: t }, r) => { const e = D(t, "currentPlacement"), [o] = e.split("-"); return /* @__PURE__ */ _(Jt, { ref: r, render: /* @__PURE__ */ _("div", { className: he("arrow", n) }), children: /* @__PURE__ */ Le( "svg", { className: he("arrow-item", o && `arrow-placement-${o}`), viewBox: "0 0 30 30", xmlns: "http://www.w3.org/2000/svg", children: [ /* @__PURE__ */ _("path", { d: "M7 30L15 22L23 30H7Z", fill: "currentColor", fillRule: "nonzero", id: "stroke" }), /* @__PURE__ */ _("path", { d: "M8 30L15 23L22 30H8Z", fill: "currentColor", fillRule: "nonzero" }) ] } ) }); }), br = te(ne), hr = Te( ({ as: n = "button", className: t, ...r }, e) => /* @__PURE__ */ _( or, { render: /* @__PURE__ */ _(n, { className: br("item", t), ref: e }), type: "button", ...r } ) ), wr = te(ne), gr = ce( ({ className: n, ...t }, r) => /* @__PURE__ */ _(cr, { ref: r, render: /* @__PURE__ */ _("hr", { className: wr("separator", n) }), ...t }) ), Mr = Te( ({ as: n, store: t, ...r }, e) => /* @__PURE__ */ _( er, { ref: e, render: n ? (o) => /* @__PURE__ */ _(n, { ...o }) : void 0, store: t, ...r } ) ), Sr = te(ne), Cr = 4, _r = ce( ({ children: n, className: t, dataTestId: r, innerProps: e = {}, store: o, withGutter: u = !0, ...a }, s) => { const c = D(o, "arrowElement"), d = u && !c ? Cr : 0, { className: i, ...w } = e; return /* @__PURE__ */ _( qt, { "aria-label": "dropdown-menu", className: t, "data-testid": r, gutter: d, ref: s, render: /* @__PURE__ */ _("div", { className: Sr("inner", i), ...w }), store: o, tabIndex: 0, ...a, children: n } ); } ), Vr = Object.assign(_r, { Arrow: vr, Item: hr, Separator: gr, Trigger: Mr }); export { Vr as DropdownMenu, Lr as useDropdownMenu };