welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
304 lines (303 loc) • 9.44 kB
JavaScript
"use client";
import { r as q, f as H } from "./7PRQYBBV-D9IY4qtU.js";
import { x as S, Q as J, s as K, g as X, y as Z } from "./U6HHPQDW-CzxyP5H7.js";
import { t as p, c as W, s as M, i as ee, g as U, a as h, d as te } from "./Q5W46E73-5xQblshY.js";
function ne(t) {
var i;
const e = t.find((a) => !!a.element), o = [...t].reverse().find((a) => !!a.element);
let s = (i = e == null ? void 0 : e.element) == null ? void 0 : i.parentElement;
for (; s && (o != null && o.element); ) {
if (o && s.contains(o.element))
return s;
s = s.parentElement;
}
return X(s).body;
}
function re(t) {
return t == null ? void 0 : t.__unstablePrivateStore;
}
function ie(t = {}) {
var i;
p(t, t.store);
const e = (i = t.store) == null ? void 0 : i.getState(), o = S(
t.items,
e == null ? void 0 : e.items,
t.defaultItems,
[]
), s = new Map(o.map((r) => [r.id, r])), a = {
items: o,
renderedItems: S(e == null ? void 0 : e.renderedItems, [])
}, d = re(t.store), u = W(
{ items: o, renderedItems: a.renderedItems },
d
), n = W(a, t.store), b = (r) => {
const l = K(r, (c) => c.element);
u.setState("renderedItems", l), n.setState("renderedItems", l);
};
M(n, () => ee(u)), M(u, () => U(u, ["items"], (r) => {
n.setState("items", r.items);
})), M(u, () => U(u, ["renderedItems"], (r) => {
let l = !0, c = requestAnimationFrame(() => {
const { renderedItems: m } = n.getState();
r.renderedItems !== m && b(r.renderedItems);
});
if (typeof IntersectionObserver != "function")
return () => cancelAnimationFrame(c);
const g = () => {
if (l) {
l = !1;
return;
}
cancelAnimationFrame(c), c = requestAnimationFrame(() => b(r.renderedItems));
}, L = ne(r.renderedItems), f = new IntersectionObserver(g, { root: L });
for (const m of r.renderedItems)
m.element && f.observe(m.element);
return () => {
cancelAnimationFrame(c), f.disconnect();
};
}));
const _ = (r, l, c = !1) => {
let g;
return l((f) => {
const m = f.findIndex(({ id: x }) => x === r.id), w = f.slice();
if (m !== -1) {
g = f[m];
const x = { ...g, ...r };
w[m] = x, s.set(r.id, x);
} else
w.push(r), s.set(r.id, r);
return w;
}), () => {
l((f) => {
if (!g)
return c && s.delete(r.id), f.filter(({ id: x }) => x !== r.id);
const m = f.findIndex(({ id: x }) => x === r.id);
if (m === -1) return f;
const w = f.slice();
return w[m] = g, s.set(r.id, g), w;
});
};
}, F = (r) => _(
r,
(l) => u.setState("items", l),
!0
);
return {
...n,
registerItem: F,
renderItem: (r) => J(
F(r),
_(
r,
(l) => u.setState("renderedItems", l)
)
),
item: (r) => {
if (!r) return null;
let l = s.get(r);
if (!l) {
const { items: c } = u.getState();
l = c.find((g) => g.id === r), l && s.set(r, l);
}
return l || null;
},
// @ts-expect-error Internal
__unstablePrivateStore: u
};
}
function se(t, i, e) {
return Z(i, [e.store]), h(t, e, "items", "setItems"), t;
}
var oe = { id: null };
function E(t, i) {
return t.find((e) => i ? !e.disabled && e.id !== i : !e.disabled);
}
function le(t, i) {
return t.filter((e) => i ? !e.disabled && e.id !== i : !e.disabled);
}
function V(t, i) {
return t.filter((e) => e.rowId === i);
}
function ae(t, i, e = !1) {
const o = t.findIndex((s) => s.id === i);
return [
...t.slice(o + 1),
...e ? [oe] : [],
...t.slice(0, o)
];
}
function $(t) {
const i = [];
for (const e of t) {
const o = i.find((s) => {
var a;
return ((a = s[0]) == null ? void 0 : a.rowId) === e.rowId;
});
o ? o.push(e) : i.push([e]);
}
return i;
}
function G(t) {
let i = 0;
for (const { length: e } of t)
e > i && (i = e);
return i;
}
function de(t) {
return {
id: "__EMPTY_ITEM__",
disabled: !0,
rowId: t
};
}
function ce(t, i, e) {
const o = G(t);
for (const s of t)
for (let a = 0; a < o; a += 1) {
const d = s[a];
if (!d || e && d.disabled) {
const n = a === 0 && e ? E(s) : s[a - 1];
s[a] = n && i !== n.id && e ? n : de(n == null ? void 0 : n.rowId);
}
}
return t;
}
function ue(t) {
const i = $(t), e = G(i), o = [];
for (let s = 0; s < e; s += 1)
for (const a of i) {
const d = a[s];
d && o.push({
...d,
// 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: d.rowId ? `${s}` : void 0
});
}
return o;
}
function Ie(t = {}) {
var i;
const e = (i = t.store) == null ? void 0 : i.getState(), o = ie(t), s = S(
t.activeId,
e == null ? void 0 : e.activeId,
t.defaultActiveId
), a = {
...o.getState(),
id: S(
t.id,
e == null ? void 0 : e.id,
`id-${Math.random().toString(36).slice(2, 8)}`
),
activeId: s,
baseElement: S(e == null ? void 0 : e.baseElement, null),
includesBaseElement: S(
t.includesBaseElement,
e == null ? void 0 : e.includesBaseElement,
s === null
),
moves: S(e == null ? void 0 : e.moves, 0),
orientation: S(
t.orientation,
e == null ? void 0 : e.orientation,
"both"
),
rtl: S(t.rtl, e == null ? void 0 : e.rtl, !1),
virtualFocus: S(
t.virtualFocus,
e == null ? void 0 : e.virtualFocus,
!1
),
focusLoop: S(t.focusLoop, e == null ? void 0 : e.focusLoop, !1),
focusWrap: S(t.focusWrap, e == null ? void 0 : e.focusWrap, !1),
focusShift: S(t.focusShift, e == null ? void 0 : e.focusShift, !1)
}, d = W(a, o, t.store);
M(
d,
() => te(d, ["renderedItems", "activeId"], (n) => {
d.setState("activeId", (b) => {
var _;
return b !== void 0 ? b : (_ = E(n.renderedItems)) == null ? void 0 : _.id;
});
})
);
const u = (n = "next", b = {}) => {
var _, F;
const r = d.getState(), {
skip: l = 0,
activeId: c = r.activeId,
focusShift: g = r.focusShift,
focusLoop: L = r.focusLoop,
focusWrap: f = r.focusWrap,
includesBaseElement: m = r.includesBaseElement,
renderedItems: w = r.renderedItems,
rtl: x = r.rtl
} = b, y = n === "up" || n === "down", k = n === "next" || n === "down", Q = k ? x && !y : !x || y, Y = g && !l;
let v = y ? H(
ce($(w), c, Y)
) : w;
if (v = Q ? q(v) : v, v = y ? ue(v) : v, c == null)
return (_ = E(v)) == null ? void 0 : _.id;
const B = v.find((I) => I.id === c);
if (!B)
return (F = E(v)) == null ? void 0 : F.id;
const O = v.some((I) => I.rowId), j = v.indexOf(B), z = v.slice(j + 1), R = V(z, B.rowId);
if (l) {
const I = le(R, c), A = I.slice(l)[0] || // If we can't find an item, just return the last one.
I[I.length - 1];
return A == null ? void 0 : A.id;
}
const D = L && (y ? L !== "horizontal" : L !== "vertical"), N = O && f && (y ? f !== "horizontal" : f !== "vertical"), P = k ? (!O || y) && D && m : y ? m : !1;
if (D) {
const I = N && !P ? v : V(v, B.rowId), A = ae(I, c, P), T = E(A, c);
return T == null ? void 0 : T.id;
}
if (N) {
const I = E(
// 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 ? R : z,
c
);
return P ? (I == null ? void 0 : I.id) || null : I == null ? void 0 : I.id;
}
const C = E(R, c);
return !C && P ? null : C == null ? void 0 : C.id;
};
return {
...o,
...d,
setBaseElement: (n) => d.setState("baseElement", n),
setActiveId: (n) => d.setState("activeId", n),
move: (n) => {
n !== void 0 && (d.setState("activeId", n), d.setState("moves", (b) => b + 1));
},
first: () => {
var n;
return (n = E(d.getState().renderedItems)) == null ? void 0 : n.id;
},
last: () => {
var n;
return (n = E(q(d.getState().renderedItems))) == null ? void 0 : n.id;
},
next: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("next", n)),
previous: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("previous", n)),
down: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("down", n)),
up: (n) => (n !== void 0 && typeof n == "number" && (n = { skip: n }), u("up", n))
};
}
function Se(t, i, e) {
return t = se(t, i, e), h(t, e, "activeId", "setActiveId"), h(t, e, "includesBaseElement"), h(t, e, "virtualFocus"), h(t, e, "orientation"), h(t, e, "rtl"), h(t, e, "focusLoop"), h(t, e, "focusWrap"), h(t, e, "focusShift"), t;
}
export {
ie as a,
Ie as c,
Se as u
};