dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
242 lines (239 loc) • 7.91 kB
JavaScript
import * as l from "react";
import { j as G, y as H, a as s, g as R, x, h as g, b as p, d as K, R as y, c as L, M as Q } from "./index-DqTIeHVj-CYOpXZHK.js";
import { M as U, R as V, d as X, C as Z, S as z } from "./createLucideIcon-B950nf2d-WasJb88J.js";
var D = "Dialog", [b, ce] = G(D), [J, u] = b(D), I = (e) => {
const {
__scopeDialog: n,
children: t,
open: a,
defaultOpen: r,
onOpenChange: o,
modal: i = !0
} = e, c = l.useRef(null), f = l.useRef(null), [v, h] = H({
prop: a,
defaultProp: r ?? !1,
onChange: o,
caller: D
});
return /* @__PURE__ */ s.jsx(
J,
{
scope: n,
triggerRef: c,
contentRef: f,
contentId: R(),
titleId: R(),
descriptionId: R(),
open: v,
onOpenChange: h,
onOpenToggle: l.useCallback(() => h((q) => !q), [h]),
modal: i,
children: t
}
);
};
I.displayName = D;
var w = "DialogTrigger", O = l.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...a } = e, r = u(w, t), o = x(n, r.triggerRef);
return /* @__PURE__ */ s.jsx(
g.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": r.open,
"aria-controls": r.contentId,
"data-state": C(r.open),
...a,
ref: o,
onClick: p(e.onClick, r.onOpenToggle)
}
);
}
);
O.displayName = w;
var _ = "DialogPortal", [Y, F] = b(_, {
forceMount: void 0
}), $ = (e) => {
const { __scopeDialog: n, forceMount: t, children: a, container: r } = e, o = u(_, n);
return /* @__PURE__ */ s.jsx(Y, { scope: n, forceMount: t, children: l.Children.map(a, (i) => /* @__PURE__ */ s.jsx(y, { present: t || o.open, children: /* @__PURE__ */ s.jsx(U, { asChild: !0, container: r, children: i }) })) });
};
$.displayName = _;
var m = "DialogOverlay", N = l.forwardRef(
(e, n) => {
const t = F(m, e.__scopeDialog), { forceMount: a = t.forceMount, ...r } = e, o = u(m, e.__scopeDialog);
return o.modal ? /* @__PURE__ */ s.jsx(y, { present: a || o.open, children: /* @__PURE__ */ s.jsx(oe, { ...r, ref: n }) }) : null;
}
);
N.displayName = m;
var ee = L("DialogOverlay.RemoveScroll"), oe = l.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...a } = e, r = u(m, t);
return (
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
/* @__PURE__ */ s.jsx(X, { as: ee, allowPinchZoom: !0, shards: [r.contentRef], children: /* @__PURE__ */ s.jsx(
g.div,
{
"data-state": C(r.open),
...a,
ref: n,
style: { pointerEvents: "auto", ...a.style }
}
) })
);
}
), d = "DialogContent", E = l.forwardRef(
(e, n) => {
const t = F(d, e.__scopeDialog), { forceMount: a = t.forceMount, ...r } = e, o = u(d, e.__scopeDialog);
return /* @__PURE__ */ s.jsx(y, { present: a || o.open, children: o.modal ? /* @__PURE__ */ s.jsx(ne, { ...r, ref: n }) : /* @__PURE__ */ s.jsx(te, { ...r, ref: n }) });
}
);
E.displayName = d;
var ne = l.forwardRef(
(e, n) => {
const t = u(d, e.__scopeDialog), a = l.useRef(null), r = x(n, t.contentRef, a);
return l.useEffect(() => {
const o = a.current;
if (o) return V(o);
}, []), /* @__PURE__ */ s.jsx(
M,
{
...e,
ref: r,
trapFocus: t.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: p(e.onCloseAutoFocus, (o) => {
var i;
o.preventDefault(), (i = t.triggerRef.current) == null || i.focus();
}),
onPointerDownOutside: p(e.onPointerDownOutside, (o) => {
const i = o.detail.originalEvent, c = i.button === 0 && i.ctrlKey === !0;
(i.button === 2 || c) && o.preventDefault();
}),
onFocusOutside: p(
e.onFocusOutside,
(o) => o.preventDefault()
)
}
);
}
), te = l.forwardRef(
(e, n) => {
const t = u(d, e.__scopeDialog), a = l.useRef(!1), r = l.useRef(!1);
return /* @__PURE__ */ s.jsx(
M,
{
...e,
ref: n,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (o) => {
var i, c;
(i = e.onCloseAutoFocus) == null || i.call(e, o), o.defaultPrevented || (a.current || (c = t.triggerRef.current) == null || c.focus(), o.preventDefault()), a.current = !1, r.current = !1;
},
onInteractOutside: (o) => {
var i, c;
(i = e.onInteractOutside) == null || i.call(e, o), o.defaultPrevented || (a.current = !0, o.detail.originalEvent.type === "pointerdown" && (r.current = !0));
const f = o.target;
(c = t.triggerRef.current) != null && c.contains(f) && o.preventDefault(), o.detail.originalEvent.type === "focusin" && r.current && o.preventDefault();
}
}
);
}
), M = l.forwardRef(
(e, n) => {
const { __scopeDialog: t, trapFocus: a, onOpenAutoFocus: r, onCloseAutoFocus: o, ...i } = e, c = u(d, t), f = l.useRef(null), v = x(n, f);
return Z(), /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
/* @__PURE__ */ s.jsx(
z,
{
asChild: !0,
loop: !0,
trapped: a,
onMountAutoFocus: r,
onUnmountAutoFocus: o,
children: /* @__PURE__ */ s.jsx(
Q,
{
role: "dialog",
id: c.contentId,
"aria-describedby": c.descriptionId,
"aria-labelledby": c.titleId,
"data-state": C(c.open),
...i,
ref: v,
onDismiss: () => c.onOpenChange(!1)
}
)
}
),
/* @__PURE__ */ s.jsxs(s.Fragment, { children: [
/* @__PURE__ */ s.jsx(re, { titleId: c.titleId }),
/* @__PURE__ */ s.jsx(se, { contentRef: f, descriptionId: c.descriptionId })
] })
] });
}
), j = "DialogTitle", P = l.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...a } = e, r = u(j, t);
return /* @__PURE__ */ s.jsx(g.h2, { id: r.titleId, ...a, ref: n });
}
);
P.displayName = j;
var A = "DialogDescription", k = l.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...a } = e, r = u(A, t);
return /* @__PURE__ */ s.jsx(g.p, { id: r.descriptionId, ...a, ref: n });
}
);
k.displayName = A;
var S = "DialogClose", T = l.forwardRef(
(e, n) => {
const { __scopeDialog: t, ...a } = e, r = u(S, t);
return /* @__PURE__ */ s.jsx(
g.button,
{
type: "button",
...a,
ref: n,
onClick: p(e.onClick, () => r.onOpenChange(!1))
}
);
}
);
T.displayName = S;
function C(e) {
return e ? "open" : "closed";
}
var W = "DialogTitleWarning", [ue, B] = K(W, {
contentName: d,
titleName: j,
docsSlug: "dialog"
}), re = ({ titleId: e }) => {
const n = B(W), t = `\`${n.contentName}\` requires a \`${n.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${n.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${n.docsSlug}`;
return l.useEffect(() => {
e && (document.getElementById(e) || console.error(t));
}, [t, e]), null;
}, ae = "DialogDescriptionWarning", se = ({ contentRef: e, descriptionId: n }) => {
const t = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${B(ae).contentName}}.`;
return l.useEffect(() => {
var a;
const r = (a = e.current) == null ? void 0 : a.getAttribute("aria-describedby");
n && r && (document.getElementById(n) || console.warn(t));
}, [t, e, n]), null;
}, de = I, fe = O, pe = $, ge = N, me = E, De = P, ve = k, he = T;
export {
pe as C,
ce as D,
ve as E,
he as P,
ge as R,
me as _,
De as h,
ue as m,
de as v,
fe as x
};