dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
187 lines (186 loc) • 6.23 kB
JavaScript
import * as i from "react";
import { u as P, c as U } from "./index-ljY4mZHt.js";
import { u as j, a as L } from "./index-C-L1jRHK.js";
import { u as w } from "./index-DLcqcWxM.js";
import { P as O } from "./index-l3y0hILL.js";
import { j as C } from "./jsx-runtime-DS1N_tNq.js";
function F(n, e, { checkForDefaultPrevented: r = !0 } = {}) {
return function(t) {
if (n == null || n(t), r === !1 || !t.defaultPrevented)
return e == null ? void 0 : e(t);
};
}
function W(n, e) {
return i.useReducer((r, o) => e[r][o] ?? r, n);
}
var I = (n) => {
const { present: e, children: r } = n, o = k(e), t = typeof r == "function" ? r({ present: o.isPresent }) : i.Children.only(r), c = w(o.ref, B(t));
return typeof r == "function" || o.isPresent ? i.cloneElement(t, { ref: c }) : null;
};
I.displayName = "Presence";
function k(n) {
const [e, r] = i.useState(), o = i.useRef(null), t = i.useRef(n), c = i.useRef("none"), l = n ? "mounted" : "unmounted", [p, s] = W(l, {
mounted: {
UNMOUNT: "unmounted",
ANIMATION_OUT: "unmountSuspended"
},
unmountSuspended: {
MOUNT: "mounted",
ANIMATION_END: "unmounted"
},
unmounted: {
MOUNT: "mounted"
}
});
return i.useEffect(() => {
const a = A(o.current);
c.current = p === "mounted" ? a : "none";
}, [p]), P(() => {
const a = o.current, f = t.current;
if (f !== n) {
const N = c.current, u = A(a);
n ? s("MOUNT") : u === "none" || (a == null ? void 0 : a.display) === "none" ? s("UNMOUNT") : s(f && N !== u ? "ANIMATION_OUT" : "UNMOUNT"), t.current = n;
}
}, [n, s]), P(() => {
if (e) {
let a;
const f = e.ownerDocument.defaultView ?? window, m = (u) => {
const g = A(o.current).includes(CSS.escape(u.animationName));
if (u.target === e && g && (s("ANIMATION_END"), !t.current)) {
const R = e.style.animationFillMode;
e.style.animationFillMode = "forwards", a = f.setTimeout(() => {
e.style.animationFillMode === "forwards" && (e.style.animationFillMode = R);
});
}
}, N = (u) => {
u.target === e && (c.current = A(o.current));
};
return e.addEventListener("animationstart", N), e.addEventListener("animationcancel", m), e.addEventListener("animationend", m), () => {
f.clearTimeout(a), e.removeEventListener("animationstart", N), e.removeEventListener("animationcancel", m), e.removeEventListener("animationend", m);
};
} else
s("ANIMATION_END");
}, [e, s]), {
isPresent: ["mounted", "unmountSuspended"].includes(p),
ref: i.useCallback((a) => {
o.current = a ? getComputedStyle(a) : null, r(a);
}, [])
};
}
function A(n) {
return (n == null ? void 0 : n.animationName) || "none";
}
function B(n) {
var o, t;
let e = (o = Object.getOwnPropertyDescriptor(n.props, "ref")) == null ? void 0 : o.get, r = e && "isReactWarning" in e && e.isReactWarning;
return r ? n.ref : (e = (t = Object.getOwnPropertyDescriptor(n, "ref")) == null ? void 0 : t.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? n.props.ref : n.props.ref || n.ref);
}
var v = "Collapsible", [G, X] = U(v), [$, M] = G(v), S = i.forwardRef(
(n, e) => {
const {
__scopeCollapsible: r,
open: o,
defaultOpen: t,
disabled: c,
onOpenChange: l,
...p
} = n, [s, a] = j({
prop: o,
defaultProp: t ?? !1,
onChange: l,
caller: v
});
return /* @__PURE__ */ C.jsx(
$,
{
scope: r,
disabled: c,
contentId: L(),
open: s,
onOpenToggle: i.useCallback(() => a((f) => !f), [a]),
children: /* @__PURE__ */ C.jsx(
O.div,
{
"data-state": y(s),
"data-disabled": c ? "" : void 0,
...p,
ref: e
}
)
}
);
}
);
S.displayName = v;
var E = "CollapsibleTrigger", _ = i.forwardRef(
(n, e) => {
const { __scopeCollapsible: r, ...o } = n, t = M(E, r);
return /* @__PURE__ */ C.jsx(
O.button,
{
type: "button",
"aria-controls": t.contentId,
"aria-expanded": t.open || !1,
"data-state": y(t.open),
"data-disabled": t.disabled ? "" : void 0,
disabled: t.disabled,
...o,
ref: e,
onClick: F(n.onClick, t.onOpenToggle)
}
);
}
);
_.displayName = E;
var T = "CollapsibleContent", D = i.forwardRef(
(n, e) => {
const { forceMount: r, ...o } = n, t = M(T, n.__scopeCollapsible);
return /* @__PURE__ */ C.jsx(I, { present: r || t.open, children: ({ present: c }) => /* @__PURE__ */ C.jsx(q, { ...o, ref: e, present: c }) });
}
);
D.displayName = T;
var q = i.forwardRef((n, e) => {
const { __scopeCollapsible: r, present: o, children: t, ...c } = n, l = M(T, r), [p, s] = i.useState(o), a = i.useRef(null), f = w(e, a), m = i.useRef(0), N = m.current, u = i.useRef(0), b = u.current, g = l.open || p, R = i.useRef(g), h = i.useRef(void 0);
return i.useEffect(() => {
const d = requestAnimationFrame(() => R.current = !1);
return () => cancelAnimationFrame(d);
}, []), P(() => {
const d = a.current;
if (d) {
h.current = h.current || {
transitionDuration: d.style.transitionDuration,
animationName: d.style.animationName
}, d.style.transitionDuration = "0s", d.style.animationName = "none";
const x = d.getBoundingClientRect();
m.current = x.height, u.current = x.width, R.current || (d.style.transitionDuration = h.current.transitionDuration, d.style.animationName = h.current.animationName), s(o);
}
}, [l.open, o]), /* @__PURE__ */ C.jsx(
O.div,
{
"data-state": y(l.open),
"data-disabled": l.disabled ? "" : void 0,
id: l.contentId,
hidden: !g,
...c,
ref: f,
style: {
"--radix-collapsible-content-height": N ? `${N}px` : void 0,
"--radix-collapsible-content-width": b ? `${b}px` : void 0,
...n.style
},
children: g && t
}
);
});
function y(n) {
return n ? "open" : "closed";
}
var Y = S, Z = _, H = D;
export {
_ as C,
Y as R,
Z as T,
D as a,
H as b,
X as c
};