@anoki/fse-ui
Version:
FSE UI components library
263 lines (260 loc) • 8.76 kB
JavaScript
import * as s from "react";
import { composeEventHandlers as p } from "./index.es470.js";
import { useComposedRefs as C } from "./index.es471.js";
import { createContextScope as B, createContext as H } from "./index.es472.js";
import { useId as x } from "./index.es476.js";
import { useControllableState as V } from "./index.es473.js";
import { DismissableLayer as q } from "./index.es484.js";
import { FocusScope as K } from "./index.es486.js";
import { Portal as U } from "./index.es488.js";
import { Presence as R } from "./index.es489.js";
import { Primitive as m } from "./index.es474.js";
import { useFocusGuards as Y } from "./index.es485.js";
import Z from "./index.es492.js";
import { hideOthers as z } from "./index.es491.js";
import { createSlot as J } from "./index.es481.js";
import { j as i } from "./index.es244.js";
var _ = "Dialog", [N, he] = B(_), [Q, u] = N(_), P = (e) => {
const {
__scopeDialog: o,
children: n,
open: a,
defaultOpen: r,
onOpenChange: t,
modal: c = !0
} = e, l = s.useRef(null), d = s.useRef(null), [g = !1, v] = V({
prop: a,
defaultProp: r,
onChange: t
});
return /* @__PURE__ */ i.jsx(
Q,
{
scope: o,
triggerRef: l,
contentRef: d,
contentId: x(),
titleId: x(),
descriptionId: x(),
open: g,
onOpenChange: v,
onOpenToggle: s.useCallback(() => v(($) => !$), [v]),
modal: c,
children: n
}
);
};
P.displayName = _;
var O = "DialogTrigger", I = s.forwardRef(
(e, o) => {
const { __scopeDialog: n, ...a } = e, r = u(O, n), t = C(o, r.triggerRef);
return /* @__PURE__ */ i.jsx(
m.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": r.open,
"aria-controls": r.contentId,
"data-state": y(r.open),
...a,
ref: t,
onClick: p(e.onClick, r.onOpenToggle)
}
);
}
);
I.displayName = O;
var h = "DialogPortal", [X, A] = N(h, {
forceMount: void 0
}), j = (e) => {
const { __scopeDialog: o, forceMount: n, children: a, container: r } = e, t = u(h, o);
return /* @__PURE__ */ i.jsx(X, { scope: o, forceMount: n, children: s.Children.map(a, (c) => /* @__PURE__ */ i.jsx(R, { present: n || t.open, children: /* @__PURE__ */ i.jsx(U, { asChild: !0, container: r, children: c }) })) });
};
j.displayName = h;
var D = "DialogOverlay", T = s.forwardRef(
(e, o) => {
const n = A(D, e.__scopeDialog), { forceMount: a = n.forceMount, ...r } = e, t = u(D, e.__scopeDialog);
return t.modal ? /* @__PURE__ */ i.jsx(R, { present: a || t.open, children: /* @__PURE__ */ i.jsx(te, { ...r, ref: o }) }) : null;
}
);
T.displayName = D;
var ee = J("DialogOverlay.RemoveScroll"), te = s.forwardRef(
(e, o) => {
const { __scopeDialog: n, ...a } = e, r = u(D, n);
return (
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
/* @__PURE__ */ i.jsx(Z, { as: ee, allowPinchZoom: !0, shards: [r.contentRef], children: /* @__PURE__ */ i.jsx(
m.div,
{
"data-state": y(r.open),
...a,
ref: o,
style: { pointerEvents: "auto", ...a.style }
}
) })
);
}
), f = "DialogContent", b = s.forwardRef(
(e, o) => {
const n = A(f, e.__scopeDialog), { forceMount: a = n.forceMount, ...r } = e, t = u(f, e.__scopeDialog);
return /* @__PURE__ */ i.jsx(R, { present: a || t.open, children: t.modal ? /* @__PURE__ */ i.jsx(oe, { ...r, ref: o }) : /* @__PURE__ */ i.jsx(re, { ...r, ref: o }) });
}
);
b.displayName = f;
var oe = s.forwardRef(
(e, o) => {
const n = u(f, e.__scopeDialog), a = s.useRef(null), r = C(o, n.contentRef, a);
return s.useEffect(() => {
const t = a.current;
if (t) return z(t);
}, []), /* @__PURE__ */ i.jsx(
M,
{
...e,
ref: r,
trapFocus: n.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: p(e.onCloseAutoFocus, (t) => {
var c;
t.preventDefault(), (c = n.triggerRef.current) == null || c.focus();
}),
onPointerDownOutside: p(e.onPointerDownOutside, (t) => {
const c = t.detail.originalEvent, l = c.button === 0 && c.ctrlKey === !0;
(c.button === 2 || l) && t.preventDefault();
}),
onFocusOutside: p(
e.onFocusOutside,
(t) => t.preventDefault()
)
}
);
}
), re = s.forwardRef(
(e, o) => {
const n = u(f, e.__scopeDialog), a = s.useRef(!1), r = s.useRef(!1);
return /* @__PURE__ */ i.jsx(
M,
{
...e,
ref: o,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (t) => {
var c, l;
(c = e.onCloseAutoFocus) == null || c.call(e, t), t.defaultPrevented || (a.current || (l = n.triggerRef.current) == null || l.focus(), t.preventDefault()), a.current = !1, r.current = !1;
},
onInteractOutside: (t) => {
var d, g;
(d = e.onInteractOutside) == null || d.call(e, t), t.defaultPrevented || (a.current = !0, t.detail.originalEvent.type === "pointerdown" && (r.current = !0));
const c = t.target;
((g = n.triggerRef.current) == null ? void 0 : g.contains(c)) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && r.current && t.preventDefault();
}
}
);
}
), M = s.forwardRef(
(e, o) => {
const { __scopeDialog: n, trapFocus: a, onOpenAutoFocus: r, onCloseAutoFocus: t, ...c } = e, l = u(f, n), d = s.useRef(null), g = C(o, d);
return Y(), /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
/* @__PURE__ */ i.jsx(
K,
{
asChild: !0,
loop: !0,
trapped: a,
onMountAutoFocus: r,
onUnmountAutoFocus: t,
children: /* @__PURE__ */ i.jsx(
q,
{
role: "dialog",
id: l.contentId,
"aria-describedby": l.descriptionId,
"aria-labelledby": l.titleId,
"data-state": y(l.open),
...c,
ref: g,
onDismiss: () => l.onOpenChange(!1)
}
)
}
),
/* @__PURE__ */ i.jsxs(i.Fragment, { children: [
/* @__PURE__ */ i.jsx(ne, { titleId: l.titleId }),
/* @__PURE__ */ i.jsx(ie, { contentRef: d, descriptionId: l.descriptionId })
] })
] });
}
), E = "DialogTitle", w = s.forwardRef(
(e, o) => {
const { __scopeDialog: n, ...a } = e, r = u(E, n);
return /* @__PURE__ */ i.jsx(m.h2, { id: r.titleId, ...a, ref: o });
}
);
w.displayName = E;
var F = "DialogDescription", S = s.forwardRef(
(e, o) => {
const { __scopeDialog: n, ...a } = e, r = u(F, n);
return /* @__PURE__ */ i.jsx(m.p, { id: r.descriptionId, ...a, ref: o });
}
);
S.displayName = F;
var W = "DialogClose", k = s.forwardRef(
(e, o) => {
const { __scopeDialog: n, ...a } = e, r = u(W, n);
return /* @__PURE__ */ i.jsx(
m.button,
{
type: "button",
...a,
ref: o,
onClick: p(e.onClick, () => r.onOpenChange(!1))
}
);
}
);
k.displayName = W;
function y(e) {
return e ? "open" : "closed";
}
var G = "DialogTitleWarning", [Ee, L] = H(G, {
contentName: f,
titleName: E,
docsSlug: "dialog"
}), ne = ({ titleId: e }) => {
const o = L(G), n = `\`${o.contentName}\` requires a \`${o.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${o.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${o.docsSlug}`;
return s.useEffect(() => {
e && (document.getElementById(e) || console.error(n));
}, [n, e]), null;
}, ae = "DialogDescriptionWarning", ie = ({ contentRef: e, descriptionId: o }) => {
const a = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${L(ae).contentName}}.`;
return s.useEffect(() => {
var t;
const r = (t = e.current) == null ? void 0 : t.getAttribute("aria-describedby");
o && r && (document.getElementById(o) || console.warn(a));
}, [a, e, o]), null;
}, ye = P, Ne = I, Pe = j, Oe = T, Ie = b, Ae = w, je = S, Te = k;
export {
Te as Close,
Ie as Content,
je as Description,
P as Dialog,
k as DialogClose,
b as DialogContent,
S as DialogDescription,
T as DialogOverlay,
j as DialogPortal,
w as DialogTitle,
I as DialogTrigger,
Oe as Overlay,
Pe as Portal,
ye as Root,
Ae as Title,
Ne as Trigger,
Ee as WarningProvider,
he as createDialogScope
};
//# sourceMappingURL=index.es324.js.map