@anoki/fse-ui
Version:
FSE UI components library
223 lines (222 loc) • 8.41 kB
JavaScript
import * as c from "react";
import { useFloating as xe, offset as Pe, shift as ye, flip as Ae, size as ve, arrow as Ce, hide as be, limitShift as Re } from "./index.es612.js";
import { Root as Se } from "./index.es613.js";
import { useComposedRefs as T } from "./index.es465.js";
import { createContextScope as Oe } from "./index.es464.js";
import { Primitive as z } from "./index.es477.js";
import { useCallbackRef as Ee } from "./index.es562.js";
import { useLayoutEffect as B } from "./index.es561.js";
import { useSize as Ne } from "./index.es500.js";
import { j as f } from "./index.es237.js";
import { autoUpdate as _e } from "./index.es614.js";
var N = "Popper", [L, Ue] = Oe(N), [$e, Z] = L(N), U = (e) => {
const { __scopePopper: s, children: a } = e, [t, i] = c.useState(null);
return /* @__PURE__ */ f.jsx($e, { scope: s, anchor: t, onAnchorChange: i, children: a });
};
U.displayName = N;
var q = "PopperAnchor", G = c.forwardRef(
(e, s) => {
const { __scopePopper: a, virtualRef: t, ...i } = e, r = Z(q, a), o = c.useRef(null), w = T(s, o), n = c.useRef(null);
return c.useEffect(() => {
const p = n.current;
n.current = (t == null ? void 0 : t.current) || o.current, p !== n.current && r.onAnchorChange(n.current);
}), t ? null : /* @__PURE__ */ f.jsx(z.div, { ...i, ref: w });
}
);
G.displayName = q;
var _ = "PopperContent", [je, He] = L(_), J = c.forwardRef(
(e, s) => {
var I, Y, M, X, D, F;
const {
__scopePopper: a,
side: t = "bottom",
sideOffset: i = 0,
align: r = "center",
alignOffset: o = 0,
arrowPadding: w = 0,
avoidCollisions: n = !0,
collisionBoundary: p = [],
collisionPadding: x = 0,
sticky: m = "partial",
hideWhenDetached: y = !1,
updatePositionStrategy: A = "optimized",
onPlaced: l,
...d
} = e, v = Z(_, a), [h, C] = c.useState(null), ee = T(s, (P) => C(P)), [E, te] = c.useState(null), u = Ne(E), re = (u == null ? void 0 : u.width) ?? 0, $ = (u == null ? void 0 : u.height) ?? 0, oe = t + (r !== "center" ? "-" + r : ""), ne = typeof x == "number" ? x : { top: 0, right: 0, bottom: 0, left: 0, ...x }, j = Array.isArray(p) ? p : [p], ae = j.length > 0, b = {
padding: ne,
boundary: j.filter(Ie),
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
altBoundary: ae
}, { refs: ie, floatingStyles: H, placement: se, isPositioned: R, middlewareData: g } = xe({
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
strategy: "fixed",
placement: oe,
whileElementsMounted: (...P) => _e(...P, {
animationFrame: A === "always"
}),
elements: {
reference: v.anchor
},
middleware: [
Pe({ mainAxis: i + $, alignmentAxis: o }),
n && ye({
mainAxis: !0,
crossAxis: !1,
limiter: m === "partial" ? Re() : void 0,
...b
}),
n && Ae({ ...b }),
ve({
...b,
apply: ({ elements: P, rects: k, availableWidth: he, availableHeight: ue }) => {
const { width: ge, height: we } = k.reference, O = P.floating.style;
O.setProperty("--radix-popper-available-width", `${he}px`), O.setProperty("--radix-popper-available-height", `${ue}px`), O.setProperty("--radix-popper-anchor-width", `${ge}px`), O.setProperty("--radix-popper-anchor-height", `${we}px`);
}
}),
E && Ce({ element: E, padding: w }),
Ye({ arrowWidth: re, arrowHeight: $ }),
y && be({ strategy: "referenceHidden", ...b })
]
}), [W, pe] = V(se), S = Ee(l);
B(() => {
R && (S == null || S());
}, [R, S]);
const ce = (I = g.arrow) == null ? void 0 : I.x, de = (Y = g.arrow) == null ? void 0 : Y.y, le = ((M = g.arrow) == null ? void 0 : M.centerOffset) !== 0, [fe, me] = c.useState();
return B(() => {
h && me(window.getComputedStyle(h).zIndex);
}, [h]), /* @__PURE__ */ f.jsx(
"div",
{
ref: ie.setFloating,
"data-radix-popper-content-wrapper": "",
style: {
...H,
transform: R ? H.transform : "translate(0, -200%)",
// keep off the page when measuring
minWidth: "max-content",
zIndex: fe,
"--radix-popper-transform-origin": [
(X = g.transformOrigin) == null ? void 0 : X.x,
(D = g.transformOrigin) == null ? void 0 : D.y
].join(" "),
// hide the content if using the hide middleware and should be hidden
// set visibility to hidden and disable pointer events so the UI behaves
// as if the PopperContent isn't there at all
...((F = g.hide) == null ? void 0 : F.referenceHidden) && {
visibility: "hidden",
pointerEvents: "none"
}
},
dir: e.dir,
children: /* @__PURE__ */ f.jsx(
je,
{
scope: a,
placedSide: W,
onArrowChange: te,
arrowX: ce,
arrowY: de,
shouldHideArrow: le,
children: /* @__PURE__ */ f.jsx(
z.div,
{
"data-side": W,
"data-align": pe,
...d,
ref: ee,
style: {
...d.style,
// if the PopperContent hasn't been placed yet (not all measurements done)
// we prevent animations so that users's animation don't kick in too early referring wrong sides
animation: R ? void 0 : "none"
}
}
)
}
)
}
);
}
);
J.displayName = _;
var K = "PopperArrow", We = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}, Q = c.forwardRef(function(s, a) {
const { __scopePopper: t, ...i } = s, r = He(K, t), o = We[r.placedSide];
return (
// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
// doesn't report size as we'd expect on SVG elements.
// it reports their bounding box which is effectively the largest path inside the SVG.
/* @__PURE__ */ f.jsx(
"span",
{
ref: r.onArrowChange,
style: {
position: "absolute",
left: r.arrowX,
top: r.arrowY,
[o]: 0,
transformOrigin: {
top: "",
right: "0 0",
bottom: "center 0",
left: "100% 0"
}[r.placedSide],
transform: {
top: "translateY(100%)",
right: "translateY(50%) rotate(90deg) translateX(-50%)",
bottom: "rotate(180deg)",
left: "translateY(50%) rotate(-90deg) translateX(50%)"
}[r.placedSide],
visibility: r.shouldHideArrow ? "hidden" : void 0
},
children: /* @__PURE__ */ f.jsx(
Se,
{
...i,
ref: a,
style: {
...i.style,
// ensures the element can be measured correctly (mostly for if SVG)
display: "block"
}
}
)
}
)
);
});
Q.displayName = K;
function Ie(e) {
return e !== null;
}
var Ye = (e) => ({
name: "transformOrigin",
options: e,
fn(s) {
var v, h, C;
const { placement: a, rects: t, middlewareData: i } = s, o = ((v = i.arrow) == null ? void 0 : v.centerOffset) !== 0, w = o ? 0 : e.arrowWidth, n = o ? 0 : e.arrowHeight, [p, x] = V(a), m = { start: "0%", center: "50%", end: "100%" }[x], y = (((h = i.arrow) == null ? void 0 : h.x) ?? 0) + w / 2, A = (((C = i.arrow) == null ? void 0 : C.y) ?? 0) + n / 2;
let l = "", d = "";
return p === "bottom" ? (l = o ? m : `${y}px`, d = `${-n}px`) : p === "top" ? (l = o ? m : `${y}px`, d = `${t.floating.height + n}px`) : p === "right" ? (l = `${-n}px`, d = o ? m : `${A}px`) : p === "left" && (l = `${t.floating.width + n}px`, d = o ? m : `${A}px`), { data: { x: l, y: d } };
}
});
function V(e) {
const [s, a = "center"] = e.split("-");
return [s, a];
}
var qe = U, Ge = G, Je = J, Ke = Q;
export {
Ge as Anchor,
Ke as Arrow,
Je as Content,
U as Popper,
G as PopperAnchor,
Q as PopperArrow,
J as PopperContent,
qe as Root,
Ue as createPopperScope
};
//# sourceMappingURL=index.es570.js.map