dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
222 lines (221 loc) • 7.28 kB
JavaScript
import * as l from "react";
import g from "react";
import { c as w } from "./index-D_OzDH1f.js";
import { c as j } from "./index-Dmh__Tgi.js";
import { u as P, c as G } from "./index-l1ZGtt0d.js";
import { j as m } from "./jsx-runtime-C5mzlN2N.js";
import { a as $, u as J } from "./index-rSIGk0ww.js";
import { P as L } from "./index-Do92jweN.js";
import { u as Q } from "./index-DwYXX2sM.js";
import { u as W } from "./index-Dz-GVg5i.js";
function X(e) {
const r = e + "CollectionProvider", [a, n] = j(r), [A, v] = a(
r,
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
), I = (f) => {
const { scope: o, children: i } = f, d = g.useRef(null), t = g.useRef(/* @__PURE__ */ new Map()).current;
return /* @__PURE__ */ m.jsx(A, { scope: o, itemMap: t, collectionRef: d, children: i });
};
I.displayName = r;
const R = e + "CollectionSlot", _ = G(R), p = g.forwardRef(
(f, o) => {
const { scope: i, children: d } = f, t = v(R, i), c = P(o, t.collectionRef);
return /* @__PURE__ */ m.jsx(_, { ref: c, children: d });
}
);
p.displayName = R;
const s = e + "CollectionItemSlot", C = "data-radix-collection-item", F = G(s), b = g.forwardRef(
(f, o) => {
const { scope: i, children: d, ...t } = f, c = g.useRef(null), T = P(o, c), x = v(s, i);
return g.useEffect(() => (x.itemMap.set(c, { ref: c, ...t }), () => void x.itemMap.delete(c))), /* @__PURE__ */ m.jsx(F, { [C]: "", ref: T, children: d });
}
);
b.displayName = s;
function E(f) {
const o = v(e + "CollectionConsumer", f);
return g.useCallback(() => {
const d = o.collectionRef.current;
if (!d) return [];
const t = Array.from(d.querySelectorAll(`[${C}]`));
return Array.from(o.itemMap.values()).sort(
(x, y) => t.indexOf(x.ref.current) - t.indexOf(y.ref.current)
);
}, [o.collectionRef, o.itemMap]);
}
return [
{ Provider: I, Slot: p, ItemSlot: b },
E,
n
];
}
var N = "rovingFocusGroup.onEntryFocus", Z = { bubbles: !1, cancelable: !0 }, h = "RovingFocusGroup", [O, K, ee] = X(h), [oe, be] = j(
h,
[ee]
), [te, re] = oe(h), k = l.forwardRef(
(e, r) => /* @__PURE__ */ m.jsx(O.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m.jsx(O.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ m.jsx(ne, { ...e, ref: r }) }) })
);
k.displayName = h;
var ne = l.forwardRef((e, r) => {
const {
__scopeRovingFocusGroup: a,
orientation: n,
loop: A = !1,
dir: v,
currentTabStopId: I,
defaultCurrentTabStopId: R,
onCurrentTabStopIdChange: _,
onEntryFocus: p,
preventScrollOnEntryFocus: s = !1,
...C
} = e, F = l.useRef(null), b = P(r, F), E = W(v), [f, o] = J({
prop: I,
defaultProp: R ?? null,
onChange: _,
caller: h
}), [i, d] = l.useState(!1), t = Q(p), c = K(a), T = l.useRef(!1), [x, y] = l.useState(0);
return l.useEffect(() => {
const u = F.current;
if (u)
return u.addEventListener(N, t), () => u.removeEventListener(N, t);
}, [t]), /* @__PURE__ */ m.jsx(
te,
{
scope: a,
orientation: n,
dir: E,
loop: A,
currentTabStopId: f,
onItemFocus: l.useCallback(
(u) => o(u),
[o]
),
onItemShiftTab: l.useCallback(() => d(!0), []),
onFocusableItemAdd: l.useCallback(
() => y((u) => u + 1),
[]
),
onFocusableItemRemove: l.useCallback(
() => y((u) => u - 1),
[]
),
children: /* @__PURE__ */ m.jsx(
L.div,
{
tabIndex: i || x === 0 ? -1 : 0,
"data-orientation": n,
...C,
ref: b,
style: { outline: "none", ...e.style },
onMouseDown: w(e.onMouseDown, () => {
T.current = !0;
}),
onFocus: w(e.onFocus, (u) => {
const Y = !T.current;
if (u.target === u.currentTarget && Y && !i) {
const D = new CustomEvent(N, Z);
if (u.currentTarget.dispatchEvent(D), !D.defaultPrevented) {
const M = c().filter((S) => S.focusable), H = M.find((S) => S.active), q = M.find((S) => S.id === f), z = [H, q, ...M].filter(
Boolean
).map((S) => S.ref.current);
V(z, s);
}
}
T.current = !1;
}),
onBlur: w(e.onBlur, () => d(!1))
}
)
}
);
}), U = "RovingFocusGroupItem", B = l.forwardRef(
(e, r) => {
const {
__scopeRovingFocusGroup: a,
focusable: n = !0,
active: A = !1,
tabStopId: v,
children: I,
...R
} = e, _ = $(), p = v || _, s = re(U, a), C = s.currentTabStopId === p, F = K(a), { onFocusableItemAdd: b, onFocusableItemRemove: E, currentTabStopId: f } = s;
return l.useEffect(() => {
if (n)
return b(), () => E();
}, [n, b, E]), /* @__PURE__ */ m.jsx(
O.ItemSlot,
{
scope: a,
id: p,
focusable: n,
active: A,
children: /* @__PURE__ */ m.jsx(
L.span,
{
tabIndex: C ? 0 : -1,
"data-orientation": s.orientation,
...R,
ref: r,
onMouseDown: w(e.onMouseDown, (o) => {
n ? s.onItemFocus(p) : o.preventDefault();
}),
onFocus: w(e.onFocus, () => s.onItemFocus(p)),
onKeyDown: w(e.onKeyDown, (o) => {
if (o.key === "Tab" && o.shiftKey) {
s.onItemShiftTab();
return;
}
if (o.target !== o.currentTarget) return;
const i = ie(o, s.orientation, s.dir);
if (i !== void 0) {
if (o.metaKey || o.ctrlKey || o.altKey || o.shiftKey) return;
o.preventDefault();
let t = F().filter((c) => c.focusable).map((c) => c.ref.current);
if (i === "last") t.reverse();
else if (i === "prev" || i === "next") {
i === "prev" && t.reverse();
const c = t.indexOf(o.currentTarget);
t = s.loop ? ae(t, c + 1) : t.slice(c + 1);
}
setTimeout(() => V(t));
}
}),
children: typeof I == "function" ? I({ isCurrentTabStop: C, hasTabStop: f != null }) : I
}
)
}
);
}
);
B.displayName = U;
var ce = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
function se(e, r) {
return r !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
}
function ie(e, r, a) {
const n = se(e.key, a);
if (!(r === "vertical" && ["ArrowLeft", "ArrowRight"].includes(n)) && !(r === "horizontal" && ["ArrowUp", "ArrowDown"].includes(n)))
return ce[n];
}
function V(e, r = !1) {
const a = document.activeElement;
for (const n of e)
if (n === a || (n.focus({ preventScroll: r }), document.activeElement !== a)) return;
}
function ae(e, r) {
return e.map((a, n) => e[(r + n) % e.length]);
}
var Se = k, ge = B;
export {
ge as I,
Se as R,
X as a,
be as c
};