dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
243 lines (242 loc) • 8.23 kB
JavaScript
import { j as c } from "./jsx-runtime-C5mzlN2N.js";
import * as p from "react";
import { c as P, P as A } from "./index-D_OzDH1f.js";
import { u as O, c as $ } from "./index-l1ZGtt0d.js";
import { c as L } from "./index-Dmh__Tgi.js";
import { D as z } from "./index-DqTIeHVj.js";
import { P as G, h as H, R as K, u as U, F as V } from "./index-By7yjsdy.js";
import { u as W, a as Z } from "./index-rSIGk0ww.js";
import { c as _, R as q, A as w, C as B, a as J } from "./index-VIo8j85K.js";
import { P as b } from "./index-Do92jweN.js";
import { c as Q } from "./utils-B6fNqzRf.js";
var C = "Popover", [j, Ae] = L(C, [
_
]), m = _(), [X, d] = j(C), E = (e) => {
const {
__scopePopover: n,
children: t,
open: a,
defaultOpen: o,
onOpenChange: r,
modal: s = !1
} = e, i = m(n), l = p.useRef(null), [u, g] = p.useState(!1), [h, f] = W({
prop: a,
defaultProp: o ?? !1,
onChange: r,
caller: C
});
return /* @__PURE__ */ c.jsx(q, { ...i, children: /* @__PURE__ */ c.jsx(
X,
{
scope: n,
contentId: Z(),
triggerRef: l,
open: h,
onOpenChange: f,
onOpenToggle: p.useCallback(() => f((x) => !x), [f]),
hasCustomAnchor: u,
onCustomAnchorAdd: p.useCallback(() => g(!0), []),
onCustomAnchorRemove: p.useCallback(() => g(!1), []),
modal: s,
children: t
}
) });
};
E.displayName = C;
var N = "PopoverAnchor", Y = p.forwardRef(
(e, n) => {
const { __scopePopover: t, ...a } = e, o = d(N, t), r = m(t), { onCustomAnchorAdd: s, onCustomAnchorRemove: i } = o;
return p.useEffect(() => (s(), () => i()), [s, i]), /* @__PURE__ */ c.jsx(w, { ...r, ...a, ref: n });
}
);
Y.displayName = N;
var F = "PopoverTrigger", y = p.forwardRef(
(e, n) => {
const { __scopePopover: t, ...a } = e, o = d(F, t), r = m(t), s = O(n, o.triggerRef), i = /* @__PURE__ */ c.jsx(
b.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": o.open,
"aria-controls": o.contentId,
"data-state": k(o.open),
...a,
ref: s,
onClick: P(e.onClick, o.onOpenToggle)
}
);
return o.hasCustomAnchor ? i : /* @__PURE__ */ c.jsx(w, { asChild: !0, ...r, children: i });
}
);
y.displayName = F;
var R = "PopoverPortal", [ee, oe] = j(R, {
forceMount: void 0
}), S = (e) => {
const { __scopePopover: n, forceMount: t, children: a, container: o } = e, r = d(R, n);
return /* @__PURE__ */ c.jsx(ee, { scope: n, forceMount: t, children: /* @__PURE__ */ c.jsx(A, { present: t || r.open, children: /* @__PURE__ */ c.jsx(G, { asChild: !0, container: o, children: a }) }) });
};
S.displayName = R;
var v = "PopoverContent", D = p.forwardRef(
(e, n) => {
const t = oe(v, e.__scopePopover), { forceMount: a = t.forceMount, ...o } = e, r = d(v, e.__scopePopover);
return /* @__PURE__ */ c.jsx(A, { present: a || r.open, children: r.modal ? /* @__PURE__ */ c.jsx(re, { ...o, ref: n }) : /* @__PURE__ */ c.jsx(ne, { ...o, ref: n }) });
}
);
D.displayName = v;
var te = $("PopoverContent.RemoveScroll"), re = p.forwardRef(
(e, n) => {
const t = d(v, e.__scopePopover), a = p.useRef(null), o = O(n, a), r = p.useRef(!1);
return p.useEffect(() => {
const s = a.current;
if (s) return H(s);
}, []), /* @__PURE__ */ c.jsx(K, { as: te, allowPinchZoom: !0, children: /* @__PURE__ */ c.jsx(
M,
{
...e,
ref: o,
trapFocus: t.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: P(e.onCloseAutoFocus, (s) => {
var i;
s.preventDefault(), r.current || (i = t.triggerRef.current) == null || i.focus();
}),
onPointerDownOutside: P(
e.onPointerDownOutside,
(s) => {
const i = s.detail.originalEvent, l = i.button === 0 && i.ctrlKey === !0, u = i.button === 2 || l;
r.current = u;
},
{ checkForDefaultPrevented: !1 }
),
onFocusOutside: P(
e.onFocusOutside,
(s) => s.preventDefault(),
{ checkForDefaultPrevented: !1 }
)
}
) });
}
), ne = p.forwardRef(
(e, n) => {
const t = d(v, e.__scopePopover), a = p.useRef(!1), o = p.useRef(!1);
return /* @__PURE__ */ c.jsx(
M,
{
...e,
ref: n,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (r) => {
var s, i;
(s = e.onCloseAutoFocus) == null || s.call(e, r), r.defaultPrevented || (a.current || (i = t.triggerRef.current) == null || i.focus(), r.preventDefault()), a.current = !1, o.current = !1;
},
onInteractOutside: (r) => {
var l, u;
(l = e.onInteractOutside) == null || l.call(e, r), r.defaultPrevented || (a.current = !0, r.detail.originalEvent.type === "pointerdown" && (o.current = !0));
const s = r.target;
((u = t.triggerRef.current) == null ? void 0 : u.contains(s)) && r.preventDefault(), r.detail.originalEvent.type === "focusin" && o.current && r.preventDefault();
}
}
);
}
), M = p.forwardRef(
(e, n) => {
const {
__scopePopover: t,
trapFocus: a,
onOpenAutoFocus: o,
onCloseAutoFocus: r,
disableOutsidePointerEvents: s,
onEscapeKeyDown: i,
onPointerDownOutside: l,
onFocusOutside: u,
onInteractOutside: g,
...h
} = e, f = d(v, t), x = m(t);
return U(), /* @__PURE__ */ c.jsx(
V,
{
asChild: !0,
loop: !0,
trapped: a,
onMountAutoFocus: o,
onUnmountAutoFocus: r,
children: /* @__PURE__ */ c.jsx(
z,
{
asChild: !0,
disableOutsidePointerEvents: s,
onInteractOutside: g,
onEscapeKeyDown: i,
onPointerDownOutside: l,
onFocusOutside: u,
onDismiss: () => f.onOpenChange(!1),
children: /* @__PURE__ */ c.jsx(
B,
{
"data-state": k(f.open),
role: "dialog",
id: f.contentId,
...x,
...h,
ref: n,
style: {
...h.style,
"--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-popover-content-available-width": "var(--radix-popper-available-width)",
"--radix-popover-content-available-height": "var(--radix-popper-available-height)",
"--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
}
}
)
}
)
}
);
}
), T = "PopoverClose", ae = p.forwardRef(
(e, n) => {
const { __scopePopover: t, ...a } = e, o = d(T, t);
return /* @__PURE__ */ c.jsx(
b.button,
{
type: "button",
...a,
ref: n,
onClick: P(e.onClick, () => o.onOpenChange(!1))
}
);
}
);
ae.displayName = T;
var se = "PopoverArrow", ce = p.forwardRef(
(e, n) => {
const { __scopePopover: t, ...a } = e, o = m(t);
return /* @__PURE__ */ c.jsx(J, { ...o, ...a, ref: n });
}
);
ce.displayName = se;
function k(e) {
return e ? "open" : "closed";
}
var ie = E, pe = y, le = S, I = D;
const Oe = ie, _e = pe, ue = p.forwardRef(({ className: e, align: n = "center", sideOffset: t = 4, ...a }, o) => /* @__PURE__ */ c.jsx(le, { children: /* @__PURE__ */ c.jsx(
I,
{
ref: o,
align: n,
sideOffset: t,
className: Q(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
e
),
...a
}
) }));
ue.displayName = I.displayName;
export {
Oe as P,
_e as a,
ue as b
};