@anoki/fse-marche-ui
Version:
FSE UI components library
222 lines (221 loc) • 8.32 kB
JavaScript
import * as s 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 Se } from "./index.es278.js";
import { Root as Oe } from "./index.es279.js";
import { useComposedRefs as T } from "./index.es236.js";
import { createContextScope as Re } from "./index.es237.js";
import { Primitive as z } from "./index.es239.js";
import { useCallbackRef as Ee } from "./index.es271.js";
import { useLayoutEffect as B } from "./index.es276.js";
import { useSize as Ne } from "./index.es246.js";
import { j as f } from "./index.es137.js";
import { autoUpdate as _e } from "./index.es280.js";
var N = "Popper", [L, Ue] = Re(N), [$e, Z] = L(N), U = (e) => {
const { __scopePopper: i, children: n } = e, [t, a] = s.useState(null);
return /* @__PURE__ */ f.jsx($e, { scope: i, anchor: t, onAnchorChange: a, children: n });
};
U.displayName = N;
var q = "PopperAnchor", G = s.forwardRef(
(e, i) => {
const { __scopePopper: n, virtualRef: t, ...a } = e, r = Z(q, n), o = s.useRef(null), w = T(i, o);
return s.useEffect(() => {
r.onAnchorChange((t == null ? void 0 : t.current) || o.current);
}), t ? null : /* @__PURE__ */ f.jsx(z.div, { ...a, ref: w });
}
);
G.displayName = q;
var _ = "PopperContent", [je, He] = L(_), J = s.forwardRef(
(e, i) => {
var I, Y, M, X, D, F;
const {
__scopePopper: n,
side: t = "bottom",
sideOffset: a = 0,
align: r = "center",
alignOffset: o = 0,
arrowPadding: w = 0,
avoidCollisions: p = !0,
collisionBoundary: c = [],
collisionPadding: x = 0,
sticky: m = "partial",
hideWhenDetached: y = !1,
updatePositionStrategy: A = "optimized",
onPlaced: l,
...d
} = e, v = Z(_, n), [h, C] = s.useState(null), ee = T(i, (P) => C(P)), [E, te] = s.useState(null), g = Ne(E), re = (g == null ? void 0 : g.width) ?? 0, $ = (g == null ? void 0 : g.height) ?? 0, oe = t + (r !== "center" ? "-" + r : ""), ne = typeof x == "number" ? x : { top: 0, right: 0, bottom: 0, left: 0, ...x }, j = Array.isArray(c) ? c : [c], 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: S, middlewareData: u } = 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: a + $, alignmentAxis: o }),
p && ye({
mainAxis: !0,
crossAxis: !1,
limiter: m === "partial" ? Se() : void 0,
...b
}),
p && Ae({ ...b }),
ve({
...b,
apply: ({ elements: P, rects: k, availableWidth: he, availableHeight: ge }) => {
const { width: ue, height: we } = k.reference, R = P.floating.style;
R.setProperty("--radix-popper-available-width", `${he}px`), R.setProperty("--radix-popper-available-height", `${ge}px`), R.setProperty("--radix-popper-anchor-width", `${ue}px`), R.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), O = Ee(l);
B(() => {
S && (O == null || O());
}, [S, O]);
const ce = (I = u.arrow) == null ? void 0 : I.x, de = (Y = u.arrow) == null ? void 0 : Y.y, le = ((M = u.arrow) == null ? void 0 : M.centerOffset) !== 0, [fe, me] = s.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: S ? H.transform : "translate(0, -200%)",
// keep off the page when measuring
minWidth: "max-content",
zIndex: fe,
"--radix-popper-transform-origin": [
(X = u.transformOrigin) == null ? void 0 : X.x,
(D = u.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 = u.hide) == null ? void 0 : F.referenceHidden) && {
visibility: "hidden",
pointerEvents: "none"
}
},
dir: e.dir,
children: /* @__PURE__ */ f.jsx(
je,
{
scope: n,
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: S ? void 0 : "none"
}
}
)
}
)
}
);
}
);
J.displayName = _;
var K = "PopperArrow", We = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
}, Q = s.forwardRef(function(i, n) {
const { __scopePopper: t, ...a } = i, 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(
Oe,
{
...a,
ref: n,
style: {
...a.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(i) {
var v, h, C;
const { placement: n, rects: t, middlewareData: a } = i, o = ((v = a.arrow) == null ? void 0 : v.centerOffset) !== 0, w = o ? 0 : e.arrowWidth, p = o ? 0 : e.arrowHeight, [c, x] = V(n), m = { start: "0%", center: "50%", end: "100%" }[x], y = (((h = a.arrow) == null ? void 0 : h.x) ?? 0) + w / 2, A = (((C = a.arrow) == null ? void 0 : C.y) ?? 0) + p / 2;
let l = "", d = "";
return c === "bottom" ? (l = o ? m : `${y}px`, d = `${-p}px`) : c === "top" ? (l = o ? m : `${y}px`, d = `${t.floating.height + p}px`) : c === "right" ? (l = `${-p}px`, d = o ? m : `${A}px`) : c === "left" && (l = `${t.floating.width + p}px`, d = o ? m : `${A}px`), { data: { x: l, y: d } };
}
});
function V(e) {
const [i, n = "center"] = e.split("-");
return [i, n];
}
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.es274.js.map