@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
323 lines (322 loc) • 9.32 kB
JavaScript
import * as s from "react";
import { c as K, P as C, b as I, a as L } from "./index-DKfEnhKr.js";
import { c as ce } from "./index-BG8O18ZY.js";
import { u as ie } from "./index-DLcqcWxM.js";
import { u as O } from "./index-Dy59FQl5.js";
import { u as ue } from "./index-0ioNhtNM.js";
import { u as k } from "./index-BdMNhZnh.js";
import { jsx as l } from "react/jsx-runtime";
import { P as le } from "./index-AV6ZtGhy.js";
var N = "rovingFocusGroup.onEntryFocus", de = { bubbles: !1, cancelable: !0 }, h = "RovingFocusGroup", [D, V, fe] = ce(h), [ve, U] = K(
h,
[fe]
), [me, pe] = ve(h), B = s.forwardRef(
(e, o) => /* @__PURE__ */ l(D.Provider, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ l(D.Slot, { scope: e.__scopeRovingFocusGroup, children: /* @__PURE__ */ l(be, { ...e, ref: o }) }) })
);
B.displayName = h;
var be = s.forwardRef((e, o) => {
const {
__scopeRovingFocusGroup: n,
orientation: t,
loop: u = !1,
dir: d,
currentTabStopId: a,
defaultCurrentTabStopId: v,
onCurrentTabStopIdChange: g,
onEntryFocus: m,
preventScrollOnEntryFocus: r = !1,
...c
} = e, p = s.useRef(null), E = ie(o, p), w = k(d), [S, i] = L({
prop: a,
defaultProp: v ?? null,
onChange: g,
caller: h
}), [T, A] = s.useState(!1), b = ue(m), F = V(n), y = s.useRef(!1), [oe, M] = s.useState(0);
return s.useEffect(() => {
const f = p.current;
if (f)
return f.addEventListener(N, b), () => f.removeEventListener(N, b);
}, [b]), /* @__PURE__ */ l(
me,
{
scope: n,
orientation: t,
dir: w,
loop: u,
currentTabStopId: S,
onItemFocus: s.useCallback(
(f) => i(f),
[i]
),
onItemShiftTab: s.useCallback(() => A(!0), []),
onFocusableItemAdd: s.useCallback(
() => M((f) => f + 1),
[]
),
onFocusableItemRemove: s.useCallback(
() => M((f) => f - 1),
[]
),
children: /* @__PURE__ */ l(
C.div,
{
tabIndex: T || oe === 0 ? -1 : 0,
"data-orientation": t,
...c,
ref: E,
style: { outline: "none", ...e.style },
onMouseDown: I(e.onMouseDown, () => {
y.current = !0;
}),
onFocus: I(e.onFocus, (f) => {
const re = !y.current;
if (f.target === f.currentTarget && re && !T) {
const G = new CustomEvent(N, de);
if (f.currentTarget.dispatchEvent(G), !G.defaultPrevented) {
const P = F().filter((R) => R.focusable), ne = P.find((R) => R.active), ae = P.find((R) => R.id === S), se = [ne, ae, ...P].filter(
Boolean
).map((R) => R.ref.current);
z(se, r);
}
}
y.current = !1;
}),
onBlur: I(e.onBlur, () => A(!1))
}
)
}
);
}), $ = "RovingFocusGroupItem", Y = s.forwardRef(
(e, o) => {
const {
__scopeRovingFocusGroup: n,
focusable: t = !0,
active: u = !1,
tabStopId: d,
children: a,
...v
} = e, g = O(), m = d || g, r = pe($, n), c = r.currentTabStopId === m, p = V(n), { onFocusableItemAdd: E, onFocusableItemRemove: w, currentTabStopId: S } = r;
return s.useEffect(() => {
if (t)
return E(), () => w();
}, [t, E, w]), /* @__PURE__ */ l(
D.ItemSlot,
{
scope: n,
id: m,
focusable: t,
active: u,
children: /* @__PURE__ */ l(
C.span,
{
tabIndex: c ? 0 : -1,
"data-orientation": r.orientation,
...v,
ref: o,
onMouseDown: I(e.onMouseDown, (i) => {
t ? r.onItemFocus(m) : i.preventDefault();
}),
onFocus: I(e.onFocus, () => r.onItemFocus(m)),
onKeyDown: I(e.onKeyDown, (i) => {
if (i.key === "Tab" && i.shiftKey) {
r.onItemShiftTab();
return;
}
if (i.target !== i.currentTarget) return;
const T = Te(i, r.orientation, r.dir);
if (T !== void 0) {
if (i.metaKey || i.ctrlKey || i.altKey || i.shiftKey) return;
i.preventDefault();
let b = p().filter((F) => F.focusable).map((F) => F.ref.current);
if (T === "last") b.reverse();
else if (T === "prev" || T === "next") {
T === "prev" && b.reverse();
const F = b.indexOf(i.currentTarget);
b = r.loop ? Fe(b, F + 1) : b.slice(F + 1);
}
setTimeout(() => z(b));
}
}),
children: typeof a == "function" ? a({ isCurrentTabStop: c, hasTabStop: S != null }) : a
}
)
}
);
}
);
Y.displayName = $;
var ge = {
ArrowLeft: "prev",
ArrowUp: "prev",
ArrowRight: "next",
ArrowDown: "next",
PageUp: "first",
Home: "first",
PageDown: "last",
End: "last"
};
function Ie(e, o) {
return o !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
}
function Te(e, o, n) {
const t = Ie(e.key, n);
if (!(o === "vertical" && ["ArrowLeft", "ArrowRight"].includes(t)) && !(o === "horizontal" && ["ArrowUp", "ArrowDown"].includes(t)))
return ge[t];
}
function z(e, o = !1) {
const n = document.activeElement;
for (const t of e)
if (t === n || (t.focus({ preventScroll: o }), document.activeElement !== n)) return;
}
function Fe(e, o) {
return e.map((n, t) => e[(o + t) % e.length]);
}
var Re = B, Ce = Y, _ = "Tabs", [he, Me] = K(_, [
U
]), H = U(), [Ee, x] = he(_), j = s.forwardRef(
(e, o) => {
const {
__scopeTabs: n,
value: t,
onValueChange: u,
defaultValue: d,
orientation: a = "horizontal",
dir: v,
activationMode: g = "automatic",
...m
} = e, r = k(v), [c, p] = L({
prop: t,
onChange: u,
defaultProp: d ?? "",
caller: _
});
return /* @__PURE__ */ l(
Ee,
{
scope: n,
baseId: O(),
value: c,
onValueChange: p,
orientation: a,
dir: r,
activationMode: g,
children: /* @__PURE__ */ l(
C.div,
{
dir: r,
"data-orientation": a,
...m,
ref: o
}
)
}
);
}
);
j.displayName = _;
var q = "TabsList", J = s.forwardRef(
(e, o) => {
const { __scopeTabs: n, loop: t = !0, ...u } = e, d = x(q, n), a = H(n);
return /* @__PURE__ */ l(
Re,
{
asChild: !0,
...a,
orientation: d.orientation,
dir: d.dir,
loop: t,
children: /* @__PURE__ */ l(
C.div,
{
role: "tablist",
"aria-orientation": d.orientation,
...u,
ref: o
}
)
}
);
}
);
J.displayName = q;
var Q = "TabsTrigger", W = s.forwardRef(
(e, o) => {
const { __scopeTabs: n, value: t, disabled: u = !1, ...d } = e, a = x(Q, n), v = H(n), g = ee(a.baseId, t), m = te(a.baseId, t), r = t === a.value;
return /* @__PURE__ */ l(
Ce,
{
asChild: !0,
...v,
focusable: !u,
active: r,
children: /* @__PURE__ */ l(
C.button,
{
type: "button",
role: "tab",
"aria-selected": r,
"aria-controls": m,
"data-state": r ? "active" : "inactive",
"data-disabled": u ? "" : void 0,
disabled: u,
id: g,
...d,
ref: o,
onMouseDown: I(e.onMouseDown, (c) => {
!u && c.button === 0 && c.ctrlKey === !1 ? a.onValueChange(t) : c.preventDefault();
}),
onKeyDown: I(e.onKeyDown, (c) => {
[" ", "Enter"].includes(c.key) && a.onValueChange(t);
}),
onFocus: I(e.onFocus, () => {
const c = a.activationMode !== "manual";
!r && !u && c && a.onValueChange(t);
})
}
)
}
);
}
);
W.displayName = Q;
var X = "TabsContent", Z = s.forwardRef(
(e, o) => {
const { __scopeTabs: n, value: t, forceMount: u, children: d, ...a } = e, v = x(X, n), g = ee(v.baseId, t), m = te(v.baseId, t), r = t === v.value, c = s.useRef(r);
return s.useEffect(() => {
const p = requestAnimationFrame(() => c.current = !1);
return () => cancelAnimationFrame(p);
}, []), /* @__PURE__ */ l(le, { present: u || r, children: ({ present: p }) => /* @__PURE__ */ l(
C.div,
{
"data-state": r ? "active" : "inactive",
"data-orientation": v.orientation,
role: "tabpanel",
"aria-labelledby": g,
hidden: !p,
id: m,
tabIndex: 0,
...a,
ref: o,
style: {
...e.style,
animationDuration: c.current ? "0s" : void 0
},
children: p && d
}
) });
}
);
Z.displayName = X;
function ee(e, o) {
return `${e}-trigger-${o}`;
}
function te(e, o) {
return `${e}-content-${o}`;
}
var Ge = j, Ke = J, Le = W, Oe = Z;
export {
Oe as C,
Ke as L,
Ge as R,
Le as T
};