dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
135 lines (134 loc) • 5.34 kB
JavaScript
import * as o from "react";
import { c as y } from "./index-DljuG5oz.js";
import { P as w, d as _ } from "./index-l3y0hILL.js";
import { u as R } from "./index-DLcqcWxM.js";
import { u as m } from "./index-DwYXX2sM.js";
import { j as x } from "./jsx-runtime-DS1N_tNq.js";
function U(r, e = globalThis == null ? void 0 : globalThis.document) {
const s = m(r);
o.useEffect(() => {
const n = (t) => {
t.key === "Escape" && s(t);
};
return e.addEventListener("keydown", n, { capture: !0 }), () => e.removeEventListener("keydown", n, { capture: !0 });
}, [s, e]);
}
var j = "DismissableLayer", p = "dismissableLayer.update", z = "dismissableLayer.pointerDownOutside", H = "dismissableLayer.focusOutside", O, T = o.createContext({
layers: /* @__PURE__ */ new Set(),
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
branches: /* @__PURE__ */ new Set()
}), M = o.forwardRef(
(r, e) => {
const {
disableOutsidePointerEvents: s = !1,
onEscapeKeyDown: n,
onPointerDownOutside: t,
onFocusOutside: a,
onInteractOutside: l,
onDismiss: d,
...E
} = r, c = o.useContext(T), [u, S] = o.useState(null), f = (u == null ? void 0 : u.ownerDocument) ?? (globalThis == null ? void 0 : globalThis.document), [, F] = o.useState({}), W = R(e, (i) => S(i)), b = Array.from(c.layers), [k] = [...c.layersWithOutsidePointerEventsDisabled].slice(-1), A = b.indexOf(k), P = u ? b.indexOf(u) : -1, N = c.layersWithOutsidePointerEventsDisabled.size > 0, D = P >= A, I = Y((i) => {
const v = i.target, C = [...c.branches].some((h) => h.contains(v));
!D || C || (t == null || t(i), l == null || l(i), i.defaultPrevented || d == null || d());
}, f), L = q((i) => {
const v = i.target;
[...c.branches].some((h) => h.contains(v)) || (a == null || a(i), l == null || l(i), i.defaultPrevented || d == null || d());
}, f);
return U((i) => {
P === c.layers.size - 1 && (n == null || n(i), !i.defaultPrevented && d && (i.preventDefault(), d()));
}, f), o.useEffect(() => {
if (u)
return s && (c.layersWithOutsidePointerEventsDisabled.size === 0 && (O = f.body.style.pointerEvents, f.body.style.pointerEvents = "none"), c.layersWithOutsidePointerEventsDisabled.add(u)), c.layers.add(u), g(), () => {
s && c.layersWithOutsidePointerEventsDisabled.size === 1 && (f.body.style.pointerEvents = O);
};
}, [u, f, s, c]), o.useEffect(() => () => {
u && (c.layers.delete(u), c.layersWithOutsidePointerEventsDisabled.delete(u), g());
}, [u, c]), o.useEffect(() => {
const i = () => F({});
return document.addEventListener(p, i), () => document.removeEventListener(p, i);
}, []), /* @__PURE__ */ x.jsx(
w.div,
{
...E,
ref: W,
style: {
pointerEvents: N ? D ? "auto" : "none" : void 0,
...r.style
},
onFocusCapture: y(r.onFocusCapture, L.onFocusCapture),
onBlurCapture: y(r.onBlurCapture, L.onBlurCapture),
onPointerDownCapture: y(
r.onPointerDownCapture,
I.onPointerDownCapture
)
}
);
}
);
M.displayName = j;
var K = "DismissableLayerBranch", X = o.forwardRef((r, e) => {
const s = o.useContext(T), n = o.useRef(null), t = R(e, n);
return o.useEffect(() => {
const a = n.current;
if (a)
return s.branches.add(a), () => {
s.branches.delete(a);
};
}, [s.branches]), /* @__PURE__ */ x.jsx(w.div, { ...r, ref: t });
});
X.displayName = K;
function Y(r, e = globalThis == null ? void 0 : globalThis.document) {
const s = m(r), n = o.useRef(!1), t = o.useRef(() => {
});
return o.useEffect(() => {
const a = (d) => {
if (d.target && !n.current) {
let E = function() {
B(
z,
s,
c,
{ discrete: !0 }
);
};
const c = { originalEvent: d };
d.pointerType === "touch" ? (e.removeEventListener("click", t.current), t.current = E, e.addEventListener("click", t.current, { once: !0 })) : E();
} else
e.removeEventListener("click", t.current);
n.current = !1;
}, l = window.setTimeout(() => {
e.addEventListener("pointerdown", a);
}, 0);
return () => {
window.clearTimeout(l), e.removeEventListener("pointerdown", a), e.removeEventListener("click", t.current);
};
}, [e, s]), {
// ensures we check React component tree (not just DOM tree)
onPointerDownCapture: () => n.current = !0
};
}
function q(r, e = globalThis == null ? void 0 : globalThis.document) {
const s = m(r), n = o.useRef(!1);
return o.useEffect(() => {
const t = (a) => {
a.target && !n.current && B(H, s, { originalEvent: a }, {
discrete: !1
});
};
return e.addEventListener("focusin", t), () => e.removeEventListener("focusin", t);
}, [e, s]), {
onFocusCapture: () => n.current = !0,
onBlurCapture: () => n.current = !1
};
}
function g() {
const r = new CustomEvent(p);
document.dispatchEvent(r);
}
function B(r, e, s, { discrete: n }) {
const t = s.originalEvent.target, a = new CustomEvent(r, { bubbles: !1, cancelable: !0, detail: s });
e && t.addEventListener(r, e, { once: !0 }), n ? _(t, a) : t.dispatchEvent(a);
}
export {
M as D
};