welcome-ui
Version:
Customizable design system with react • styled-components • styled-system and ariakit.
475 lines (474 loc) • 15.4 kB
JavaScript
"use client";
import { t as de, c as Y, s as $, i as fe, g as Z, b as B, d as me } from "./YV4JVR4I-DPC8mMuG.mjs";
import { B as _, A as j, P as ve, C as T, Q as Ie, H as ge, G as Se, c as pe, _ as se, i as Ee, R as ye, S as we, E as ee, T as O, U as be, V as he, b as H, o as z, u as xe, p as ie, D as Pe, d as _e, e as Fe, g as te, m as Ce, W as Ae, f as ke, h as Be } from "./LVA2YJMS-C-kJ1lkr.mjs";
import { b as Re, g as L, s as De, i as Q, a as Ke, f as Le, c as Te } from "./P2CTZE2T-DOT1mNnX.mjs";
import { useRef as ne, useEffect as ue, useState as Me, useCallback as Oe } from "react";
import { j as ze } from "./jsx-runtime-B7I4PJ0H.mjs";
function We(e) {
var s;
const n = e.find((c) => !!c.element), t = [...e].reverse().find((c) => !!c.element);
let i = (s = n == null ? void 0 : n.element) == null ? void 0 : s.parentElement;
for (; i && (t != null && t.element); ) {
if (t && i.contains(t.element))
return i;
i = i.parentElement;
}
return ge(i).body;
}
function Ve(e) {
return e == null ? void 0 : e.__unstablePrivateStore;
}
function He(e = {}) {
var s;
de(e, e.store);
const n = (s = e.store) == null ? void 0 : s.getState(), t = _(
e.items,
n == null ? void 0 : n.items,
e.defaultItems,
[]
), i = new Map(t.map((u) => [u.id, u])), c = {
items: t,
renderedItems: _(n == null ? void 0 : n.renderedItems, [])
}, l = Ve(e.store), a = Y(
{ items: t, renderedItems: c.renderedItems },
l
), r = Y(c, e.store), x = (u) => {
const f = Ie(u, (m) => m.element);
a.setState("renderedItems", f), r.setState("renderedItems", f);
};
$(r, () => fe(a)), $(a, () => Z(a, ["items"], (u) => {
r.setState("items", u.items);
})), $(a, () => Z(a, ["renderedItems"], (u) => {
let f = !0, m = requestAnimationFrame(() => {
const { renderedItems: S } = r.getState();
u.renderedItems !== S && x(u.renderedItems);
});
if (typeof IntersectionObserver != "function")
return () => cancelAnimationFrame(m);
const w = () => {
if (f) {
f = !1;
return;
}
cancelAnimationFrame(m), m = requestAnimationFrame(() => x(u.renderedItems));
}, D = We(u.renderedItems), g = new IntersectionObserver(w, { root: D });
for (const S of u.renderedItems)
S.element && g.observe(S.element);
return () => {
cancelAnimationFrame(m), g.disconnect();
};
}));
const v = (u, f, m = !1) => {
let w;
return f((g) => {
const S = g.findIndex(({ id: b }) => b === u.id), F = g.slice();
if (S !== -1) {
w = g[S];
const b = T(T({}, w), u);
F[S] = b, i.set(u.id, b);
} else
F.push(u), i.set(u.id, u);
return F;
}), () => {
f((g) => {
if (!w)
return m && i.delete(u.id), g.filter(({ id: b }) => b !== u.id);
const S = g.findIndex(({ id: b }) => b === u.id);
if (S === -1) return g;
const F = g.slice();
return F[S] = w, i.set(u.id, w), F;
});
};
}, K = (u) => v(
u,
(f) => a.setState("items", f),
!0
);
return j(T({}, r), {
registerItem: K,
renderItem: (u) => ve(
K(u),
v(
u,
(f) => a.setState("renderedItems", f)
)
),
item: (u) => {
if (!u) return null;
let f = i.get(u);
if (!f) {
const { items: m } = a.getState();
f = m.find((w) => w.id === u), f && i.set(u, f);
}
return f || null;
},
// @ts-expect-error Internal
__unstablePrivateStore: a
});
}
function Ne(e, s, n) {
return Se(s, [n.store]), B(e, n, "items", "setItems"), e;
}
function ae(e) {
const s = [];
for (const n of e)
s.push(...n);
return s;
}
function J(e) {
return e.slice().reverse();
}
var Ue = { id: null };
function R(e, s) {
return e.find((n) => s ? !n.disabled && n.id !== s : !n.disabled);
}
function $e(e, s) {
return e.filter((n) => s ? !n.disabled && n.id !== s : !n.disabled);
}
function re(e, s) {
return e.filter((n) => n.rowId === s);
}
function je(e, s, n = !1) {
const t = e.findIndex((i) => i.id === s);
return [
...e.slice(t + 1),
...n ? [Ue] : [],
...e.slice(0, t)
];
}
function ce(e) {
const s = [];
for (const n of e) {
const t = s.find((i) => {
var c;
return ((c = i[0]) == null ? void 0 : c.rowId) === n.rowId;
});
t ? t.push(n) : s.push([n]);
}
return s;
}
function le(e) {
let s = 0;
for (const { length: n } of e)
n > s && (s = n);
return s;
}
function qe(e) {
return {
id: "__EMPTY_ITEM__",
disabled: !0,
rowId: e
};
}
function Ge(e, s, n) {
const t = le(e);
for (const i of e)
for (let c = 0; c < t; c += 1) {
const l = i[c];
if (!l || n && l.disabled) {
const r = c === 0 && n ? R(i) : i[c - 1];
i[c] = r && s !== r.id && n ? r : qe(r == null ? void 0 : r.rowId);
}
}
return e;
}
function Qe(e) {
const s = ce(e), n = le(s), t = [];
for (let i = 0; i < n; i += 1)
for (const c of s) {
const l = c[i];
l && t.push(j(T({}, l), {
// If there's no rowId, it means that it's not a grid composite, but
// a single row instead. So, instead of verticalizing it, that is,
// assigning a different rowId based on the column index, we keep it
// undefined so they will be part of the same row. This is useful
// when using up/down on one-dimensional composites.
rowId: l.rowId ? `${i}` : void 0
}));
}
return t;
}
function dt(e = {}) {
var s;
const n = (s = e.store) == null ? void 0 : s.getState(), t = He(e), i = _(
e.activeId,
n == null ? void 0 : n.activeId,
e.defaultActiveId
), c = j(T({}, t.getState()), {
id: _(
e.id,
n == null ? void 0 : n.id,
`id-${Math.random().toString(36).slice(2, 8)}`
),
activeId: i,
baseElement: _(n == null ? void 0 : n.baseElement, null),
includesBaseElement: _(
e.includesBaseElement,
n == null ? void 0 : n.includesBaseElement,
i === null
),
moves: _(n == null ? void 0 : n.moves, 0),
orientation: _(
e.orientation,
n == null ? void 0 : n.orientation,
"both"
),
rtl: _(e.rtl, n == null ? void 0 : n.rtl, !1),
virtualFocus: _(
e.virtualFocus,
n == null ? void 0 : n.virtualFocus,
!1
),
focusLoop: _(e.focusLoop, n == null ? void 0 : n.focusLoop, !1),
focusWrap: _(e.focusWrap, n == null ? void 0 : n.focusWrap, !1),
focusShift: _(e.focusShift, n == null ? void 0 : n.focusShift, !1)
}), l = Y(c, t, e.store);
$(
l,
() => me(l, ["renderedItems", "activeId"], (r) => {
l.setState("activeId", (x) => {
var v;
return x !== void 0 ? x : (v = R(r.renderedItems)) == null ? void 0 : v.id;
});
})
);
const a = (r = "next", x = {}) => {
var v, K;
const u = l.getState(), {
skip: f = 0,
activeId: m = u.activeId,
focusShift: w = u.focusShift,
focusLoop: D = u.focusLoop,
focusWrap: g = u.focusWrap,
includesBaseElement: S = u.includesBaseElement,
renderedItems: F = u.renderedItems,
rtl: b = u.rtl
} = x, C = r === "up" || r === "down", W = r === "next" || r === "down", q = W ? b && !C : !b || C, N = w && !f;
let p = C ? ae(
Ge(ce(F), m, N)
) : F;
if (p = q ? J(p) : p, p = C ? Qe(p) : p, m == null)
return (v = R(p)) == null ? void 0 : v.id;
const M = p.find((I) => I.id === m);
if (!M)
return (K = R(p)) == null ? void 0 : K.id;
const U = p.some((I) => I.rowId), G = p.indexOf(M), o = p.slice(G + 1), d = re(o, M.rowId);
if (f) {
const I = $e(d, m), h = I.slice(f)[0] || // If we can't find an item, just return the last one.
I[I.length - 1];
return h == null ? void 0 : h.id;
}
const E = D && (C ? D !== "horizontal" : D !== "vertical"), y = U && g && (C ? g !== "horizontal" : g !== "vertical"), P = W ? (!U || C) && E && S : C ? S : !1;
if (E) {
const I = y && !P ? p : re(p, M.rowId), h = je(I, m, P), k = R(h, m);
return k == null ? void 0 : k.id;
}
if (y) {
const I = R(
// We can use nextItems, which contains all the next items, including
// items from other rows, to wrap between rows. However, if there is a
// null item (the composite container), we'll only use the next items in
// the row. So moving next from the last item will focus on the
// composite container. On grid composites, horizontal navigation never
// focuses on the composite container, only vertical.
P ? d : o,
m
);
return P ? (I == null ? void 0 : I.id) || null : I == null ? void 0 : I.id;
}
const A = R(d, m);
return !A && P ? null : A == null ? void 0 : A.id;
};
return j(T(T({}, t), l), {
setBaseElement: (r) => l.setState("baseElement", r),
setActiveId: (r) => l.setState("activeId", r),
move: (r) => {
r !== void 0 && (l.setState("activeId", r), l.setState("moves", (x) => x + 1));
},
first: () => {
var r;
return (r = R(l.getState().renderedItems)) == null ? void 0 : r.id;
},
last: () => {
var r;
return (r = R(J(l.getState().renderedItems))) == null ? void 0 : r.id;
},
next: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("next", r)),
previous: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("previous", r)),
down: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("down", r)),
up: (r) => (r !== void 0 && typeof r == "number" && (r = { skip: r }), a("up", r))
});
}
function ft(e, s, n) {
return e = Ne(e, s, n), B(e, n, "activeId", "setActiveId"), B(e, n, "includesBaseElement"), B(e, n, "virtualFocus"), B(e, n, "orientation"), B(e, n, "rtl"), B(e, n, "focusLoop"), B(e, n, "focusWrap"), B(e, n, "focusShift"), e;
}
var Ye = "div";
function Je(e) {
return e.some((s) => !!s.rowId);
}
function Xe(e) {
const s = e.target;
return s && !ie(s) ? !1 : e.key.length === 1 && !e.ctrlKey && !e.metaKey;
}
function Ze(e) {
return e.key === "Shift" || e.key === "Control" || e.key === "Alt" || e.key === "Meta";
}
function oe(e, s, n) {
return H((t) => {
var i;
if (s == null || s(t), t.defaultPrevented || t.isPropagationStopped() || !z(t) || Ze(t) || Xe(t)) return;
const c = e.getState(), l = (i = L(e, c.activeId)) == null ? void 0 : i.element;
if (!l) return;
const a = t, { view: r } = a, x = se(a, ["view"]), v = n == null ? void 0 : n.current;
l !== v && l.focus(), Ae(l, t.type, x) || t.preventDefault(), t.currentTarget.contains(l) && t.stopPropagation();
});
}
function et(e) {
return Le(
ae(J(Te(e)))
);
}
function tt(e) {
const [s, n] = Me(!1), t = Oe(() => n(!0), []), i = e.useState(
(c) => L(e, c.activeId)
);
return ue(() => {
const c = i == null ? void 0 : i.element;
s && c && (n(!1), c.focus({ preventScroll: !0 }));
}, [i, s]), t;
}
var nt = pe(
function(s) {
var n = s, {
store: t,
composite: i = !0,
focusOnMove: c = i,
moveOnKeyPress: l = !0
} = n, a = se(n, [
"store",
"composite",
"focusOnMove",
"moveOnKeyPress"
]);
const r = Re();
t = t || r, Ee(
t,
process.env.NODE_ENV !== "production" && "Composite must receive a `store` prop or be wrapped in a CompositeProvider component."
);
const x = ne(null), v = ne(null), K = tt(t), u = t.useState("moves"), [, f] = ye(
i ? t.setBaseElement : null
);
ue(() => {
var o;
if (!t || !u || !i || !c) return;
const { activeId: d } = t.getState(), E = (o = L(t, d)) == null ? void 0 : o.element;
E && we(E);
}, [t, u, i, c]), ee(() => {
if (!t || !u || !i) return;
const { baseElement: o, activeId: d } = t.getState();
if (!(d === null) || !o) return;
const y = v.current;
v.current = null, y && O(y, { relatedTarget: o }), be(o) || o.focus();
}, [t, u, i]);
const m = t.useState("activeId"), w = t.useState("virtualFocus");
ee(() => {
var o;
if (!t || !i || !w) return;
const d = v.current;
if (v.current = null, !d) return;
const y = ((o = L(t, m)) == null ? void 0 : o.element) || he(d);
y !== d && O(d, { relatedTarget: y });
}, [t, m, w, i]);
const D = oe(
t,
a.onKeyDownCapture,
v
), g = oe(
t,
a.onKeyUpCapture,
v
), S = a.onFocusCapture, F = H((o) => {
if (S == null || S(o), o.defaultPrevented || !t) return;
const { virtualFocus: d } = t.getState();
if (!d) return;
const E = o.relatedTarget, y = De(o.currentTarget);
z(o) && y && (o.stopPropagation(), v.current = E);
}), b = a.onFocus, C = H((o) => {
if (b == null || b(o), o.defaultPrevented || !i || !t) return;
const { relatedTarget: d } = o, { virtualFocus: E } = t.getState();
E ? z(o) && !Q(t, d) && queueMicrotask(K) : z(o) && t.setActiveId(null);
}), W = a.onBlurCapture, q = H((o) => {
var d;
if (W == null || W(o), o.defaultPrevented || !t) return;
const { virtualFocus: E, activeId: y } = t.getState();
if (!E) return;
const P = (d = L(t, y)) == null ? void 0 : d.element, A = o.relatedTarget, I = Q(t, A), h = v.current;
v.current = null, z(o) && I ? (A === P ? h && h !== A && O(h, o) : P ? O(P, o) : h && O(h, o), o.stopPropagation()) : !Q(t, o.target) && P && O(P, o);
}), N = a.onKeyDown, p = xe(l), M = H((o) => {
var d;
if (N == null || N(o), o.defaultPrevented || !t || !z(o)) return;
const { orientation: E, renderedItems: y, activeId: P } = t.getState(), A = L(t, P);
if ((d = A == null ? void 0 : A.element) != null && d.isConnected) return;
const I = E !== "horizontal", h = E !== "vertical", k = Je(y);
if ((o.key === "ArrowLeft" || o.key === "ArrowRight" || o.key === "Home" || o.key === "End") && ie(o.currentTarget)) return;
const X = {
ArrowUp: (k || I) && (() => {
if (k) {
const V = et(y);
return V == null ? void 0 : V.id;
}
return t == null ? void 0 : t.last();
}),
ArrowRight: (k || h) && t.first,
ArrowDown: (k || I) && t.first,
ArrowLeft: (k || h) && t.last,
Home: t.first,
End: t.last,
PageUp: t.first,
PageDown: t.last
}[o.key];
if (X) {
const V = X();
if (V !== void 0) {
if (!p(o)) return;
o.preventDefault(), t.move(V);
}
}
});
a = Pe(
a,
(o) => /* @__PURE__ */ ze.jsx(Ke, { value: t, children: o }),
[t]
);
const U = t.useState((o) => {
var d;
if (t && i && o.virtualFocus)
return (d = L(t, o.activeId)) == null ? void 0 : d.id;
});
a = _e(te({
"aria-activedescendant": U
}, a), {
ref: Fe(x, f, a.ref),
onKeyDownCapture: D,
onKeyUpCapture: g,
onFocusCapture: F,
onFocus: C,
onBlurCapture: q,
onKeyDown: M
});
const G = t.useState(
(o) => i && (o.virtualFocus || o.activeId === null)
);
return a = Ce(te({ focusable: G }, a)), a;
}
);
ke(function(s) {
const n = nt(s);
return Be(Ye, n);
});
export {
nt as a,
He as b,
dt as c,
ft as u
};