@anoki/fse-ui
Version:
FSE UI components library
534 lines (533 loc) • 14.6 kB
JavaScript
import { getSideAxis as T, getAlignmentAxis as U, getSide as j, getAlignment as _, evaluate as L, getPaddingObject as q, rectToClientRect as z, getAxisLength as G, clamp as $, getOppositePlacement as Z, getExpandedPlacements as ee, getOppositeAxisPlacements as te, getAlignmentSides as ne, min as Y, max as B, getOppositeAxis as J, sides as ie } from "./index.es803.js";
function X(t, e, d) {
let {
reference: a,
floating: m
} = t;
const n = T(e), i = U(e), l = G(i), g = j(e), p = n === "y", r = a.x + a.width / 2 - m.width / 2, o = a.y + a.height / 2 - m.height / 2, f = a[l] / 2 - m[l] / 2;
let s;
switch (g) {
case "top":
s = {
x: r,
y: a.y - m.height
};
break;
case "bottom":
s = {
x: r,
y: a.y + a.height
};
break;
case "right":
s = {
x: a.x + a.width,
y: o
};
break;
case "left":
s = {
x: a.x - m.width,
y: o
};
break;
default:
s = {
x: a.x,
y: a.y
};
}
switch (_(e)) {
case "start":
s[i] -= f * (d && p ? -1 : 1);
break;
case "end":
s[i] += f * (d && p ? -1 : 1);
break;
}
return s;
}
async function se(t, e) {
var d;
e === void 0 && (e = {});
const {
x: a,
y: m,
platform: n,
rects: i,
elements: l,
strategy: g
} = t, {
boundary: p = "clippingAncestors",
rootBoundary: r = "viewport",
elementContext: o = "floating",
altBoundary: f = !1,
padding: s = 0
} = L(e, t), c = q(s), h = l[f ? o === "floating" ? "reference" : "floating" : o], v = z(await n.getClippingRect({
element: (d = await (n.isElement == null ? void 0 : n.isElement(h))) == null || d ? h : h.contextElement || await (n.getDocumentElement == null ? void 0 : n.getDocumentElement(l.floating)),
boundary: p,
rootBoundary: r,
strategy: g
})), A = o === "floating" ? {
x: a,
y: m,
width: i.floating.width,
height: i.floating.height
} : i.reference, u = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(l.floating)), w = await (n.isElement == null ? void 0 : n.isElement(u)) ? await (n.getScale == null ? void 0 : n.getScale(u)) || {
x: 1,
y: 1
} : {
x: 1,
y: 1
}, y = z(n.convertOffsetParentRelativeRectToViewportRelativeRect ? await n.convertOffsetParentRelativeRectToViewportRelativeRect({
elements: l,
rect: A,
offsetParent: u,
strategy: g
}) : A);
return {
top: (v.top - y.top + c.top) / w.y,
bottom: (y.bottom - v.bottom + c.bottom) / w.y,
left: (v.left - y.left + c.left) / w.x,
right: (y.right - v.right + c.right) / w.x
};
}
const oe = 50, le = async (t, e, d) => {
const {
placement: a = "bottom",
strategy: m = "absolute",
middleware: n = [],
platform: i
} = d, l = i.detectOverflow ? i : {
...i,
detectOverflow: se
}, g = await (i.isRTL == null ? void 0 : i.isRTL(e));
let p = await i.getElementRects({
reference: t,
floating: e,
strategy: m
}), {
x: r,
y: o
} = X(p, a, g), f = a, s = 0;
const c = {};
for (let x = 0; x < n.length; x++) {
const h = n[x];
if (!h)
continue;
const {
name: v,
fn: A
} = h, {
x: u,
y: w,
data: y,
reset: b
} = await A({
x: r,
y: o,
initialPlacement: a,
placement: f,
strategy: m,
middlewareData: c,
rects: p,
platform: l,
elements: {
reference: t,
floating: e
}
});
r = u ?? r, o = w ?? o, c[v] = {
...c[v],
...y
}, b && s < oe && (s++, typeof b == "object" && (b.placement && (f = b.placement), b.rects && (p = b.rects === !0 ? await i.getElementRects({
reference: t,
floating: e,
strategy: m
}) : b.rects), {
x: r,
y: o
} = X(p, f, g)), x = -1);
}
return {
x: r,
y: o,
placement: f,
strategy: m,
middlewareData: c
};
}, re = (t) => ({
name: "arrow",
options: t,
async fn(e) {
const {
x: d,
y: a,
placement: m,
rects: n,
platform: i,
elements: l,
middlewareData: g
} = e, {
element: p,
padding: r = 0
} = L(t, e) || {};
if (p == null)
return {};
const o = q(r), f = {
x: d,
y: a
}, s = U(m), c = G(s), x = await i.getDimensions(p), h = s === "y", v = h ? "top" : "left", A = h ? "bottom" : "right", u = h ? "clientHeight" : "clientWidth", w = n.reference[c] + n.reference[s] - f[s] - n.floating[c], y = f[s] - n.reference[s], b = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(p));
let C = b ? b[u] : 0;
(!C || !await (i.isElement == null ? void 0 : i.isElement(b))) && (C = l.floating[u] || n.floating[c]);
const E = w / 2 - y / 2, D = C / 2 - x[c] / 2 - 1, P = Y(o[v], D), H = Y(o[A], D), k = P, F = C - x[c] - H, O = C / 2 - x[c] / 2 + E, W = $(k, O, F), M = !g.arrow && _(m) != null && O !== W && n.reference[c] / 2 - (O < k ? P : H) - x[c] / 2 < 0, S = M ? O < k ? O - k : O - F : 0;
return {
[s]: f[s] + S,
data: {
[s]: W,
centerOffset: O - W - S,
...M && {
alignmentOffset: S
}
},
reset: M
};
}
}), fe = function(t) {
return t === void 0 && (t = {}), {
name: "flip",
options: t,
async fn(e) {
var d, a;
const {
placement: m,
middlewareData: n,
rects: i,
initialPlacement: l,
platform: g,
elements: p
} = e, {
mainAxis: r = !0,
crossAxis: o = !0,
fallbackPlacements: f,
fallbackStrategy: s = "bestFit",
fallbackAxisSideDirection: c = "none",
flipAlignment: x = !0,
...h
} = L(t, e);
if ((d = n.arrow) != null && d.alignmentOffset)
return {};
const v = j(m), A = T(l), u = j(l) === l, w = await (g.isRTL == null ? void 0 : g.isRTL(p.floating)), y = f || (u || !x ? [Z(l)] : ee(l)), b = c !== "none";
!f && b && y.push(...te(l, x, c, w));
const C = [l, ...y], E = await g.detectOverflow(e, h), D = [];
let P = ((a = n.flip) == null ? void 0 : a.overflows) || [];
if (r && D.push(E[v]), o) {
const O = ne(m, i, w);
D.push(E[O[0]], E[O[1]]);
}
if (P = [...P, {
placement: m,
overflows: D
}], !D.every((O) => O <= 0)) {
var H, k;
const O = (((H = n.flip) == null ? void 0 : H.index) || 0) + 1, W = C[O];
if (W && (!(o === "alignment" ? A !== T(W) : !1) || // We leave the current main axis only if every placement on that axis
// overflows the main axis.
P.every((R) => T(R.placement) === A ? R.overflows[0] > 0 : !0)))
return {
data: {
index: O,
overflows: P
},
reset: {
placement: W
}
};
let M = (k = P.filter((S) => S.overflows[0] <= 0).sort((S, R) => S.overflows[1] - R.overflows[1])[0]) == null ? void 0 : k.placement;
if (!M)
switch (s) {
case "bestFit": {
var F;
const S = (F = P.filter((R) => {
if (b) {
const V = T(R.placement);
return V === A || // Create a bias to the `y` side axis due to horizontal
// reading directions favoring greater width.
V === "y";
}
return !0;
}).map((R) => [R.placement, R.overflows.filter((V) => V > 0).reduce((V, Q) => V + Q, 0)]).sort((R, V) => R[1] - V[1])[0]) == null ? void 0 : F[0];
S && (M = S);
break;
}
case "initialPlacement":
M = l;
break;
}
if (m !== M)
return {
reset: {
placement: M
}
};
}
return {};
}
};
};
function I(t, e) {
return {
top: t.top - e.height,
right: t.right - e.width,
bottom: t.bottom - e.height,
left: t.left - e.width
};
}
function N(t) {
return ie.some((e) => t[e] >= 0);
}
const me = function(t) {
return t === void 0 && (t = {}), {
name: "hide",
options: t,
async fn(e) {
const {
rects: d,
platform: a
} = e, {
strategy: m = "referenceHidden",
...n
} = L(t, e);
switch (m) {
case "referenceHidden": {
const i = await a.detectOverflow(e, {
...n,
elementContext: "reference"
}), l = I(i, d.reference);
return {
data: {
referenceHiddenOffsets: l,
referenceHidden: N(l)
}
};
}
case "escaped": {
const i = await a.detectOverflow(e, {
...n,
altBoundary: !0
}), l = I(i, d.floating);
return {
data: {
escapedOffsets: l,
escaped: N(l)
}
};
}
default:
return {};
}
}
};
}, K = /* @__PURE__ */ new Set(["left", "top"]);
async function ce(t, e) {
const {
placement: d,
platform: a,
elements: m
} = t, n = await (a.isRTL == null ? void 0 : a.isRTL(m.floating)), i = j(d), l = _(d), g = T(d) === "y", p = K.has(i) ? -1 : 1, r = n && g ? -1 : 1, o = L(e, t);
let {
mainAxis: f,
crossAxis: s,
alignmentAxis: c
} = typeof o == "number" ? {
mainAxis: o,
crossAxis: 0,
alignmentAxis: null
} : {
mainAxis: o.mainAxis || 0,
crossAxis: o.crossAxis || 0,
alignmentAxis: o.alignmentAxis
};
return l && typeof c == "number" && (s = l === "end" ? c * -1 : c), g ? {
x: s * r,
y: f * p
} : {
x: f * p,
y: s * r
};
}
const de = function(t) {
return t === void 0 && (t = 0), {
name: "offset",
options: t,
async fn(e) {
var d, a;
const {
x: m,
y: n,
placement: i,
middlewareData: l
} = e, g = await ce(e, t);
return i === ((d = l.offset) == null ? void 0 : d.placement) && (a = l.arrow) != null && a.alignmentOffset ? {} : {
x: m + g.x,
y: n + g.y,
data: {
...g,
placement: i
}
};
}
};
}, xe = function(t) {
return t === void 0 && (t = {}), {
name: "shift",
options: t,
async fn(e) {
const {
x: d,
y: a,
placement: m,
platform: n
} = e, {
mainAxis: i = !0,
crossAxis: l = !1,
limiter: g = {
fn: (v) => {
let {
x: A,
y: u
} = v;
return {
x: A,
y: u
};
}
},
...p
} = L(t, e), r = {
x: d,
y: a
}, o = await n.detectOverflow(e, p), f = T(j(m)), s = J(f);
let c = r[s], x = r[f];
if (i) {
const v = s === "y" ? "top" : "left", A = s === "y" ? "bottom" : "right", u = c + o[v], w = c - o[A];
c = $(u, c, w);
}
if (l) {
const v = f === "y" ? "top" : "left", A = f === "y" ? "bottom" : "right", u = x + o[v], w = x - o[A];
x = $(u, x, w);
}
const h = g.fn({
...e,
[s]: c,
[f]: x
});
return {
...h,
data: {
x: h.x - d,
y: h.y - a,
enabled: {
[s]: i,
[f]: l
}
}
};
}
};
}, ge = function(t) {
return t === void 0 && (t = {}), {
options: t,
fn(e) {
const {
x: d,
y: a,
placement: m,
rects: n,
middlewareData: i
} = e, {
offset: l = 0,
mainAxis: g = !0,
crossAxis: p = !0
} = L(t, e), r = {
x: d,
y: a
}, o = T(m), f = J(o);
let s = r[f], c = r[o];
const x = L(l, e), h = typeof x == "number" ? {
mainAxis: x,
crossAxis: 0
} : {
mainAxis: 0,
crossAxis: 0,
...x
};
if (g) {
const u = f === "y" ? "height" : "width", w = n.reference[f] - n.floating[u] + h.mainAxis, y = n.reference[f] + n.reference[u] - h.mainAxis;
s < w ? s = w : s > y && (s = y);
}
if (p) {
var v, A;
const u = f === "y" ? "width" : "height", w = K.has(j(m)), y = n.reference[o] - n.floating[u] + (w && ((v = i.offset) == null ? void 0 : v[o]) || 0) + (w ? 0 : h.crossAxis), b = n.reference[o] + n.reference[u] + (w ? 0 : ((A = i.offset) == null ? void 0 : A[o]) || 0) - (w ? h.crossAxis : 0);
c < y ? c = y : c > b && (c = b);
}
return {
[f]: s,
[o]: c
};
}
};
}, ue = function(t) {
return t === void 0 && (t = {}), {
name: "size",
options: t,
async fn(e) {
var d, a;
const {
placement: m,
rects: n,
platform: i,
elements: l
} = e, {
apply: g = () => {
},
...p
} = L(t, e), r = await i.detectOverflow(e, p), o = j(m), f = _(m), s = T(m) === "y", {
width: c,
height: x
} = n.floating;
let h, v;
o === "top" || o === "bottom" ? (h = o, v = f === (await (i.isRTL == null ? void 0 : i.isRTL(l.floating)) ? "start" : "end") ? "left" : "right") : (v = o, h = f === "end" ? "top" : "bottom");
const A = x - r.top - r.bottom, u = c - r.left - r.right, w = Y(x - r[h], A), y = Y(c - r[v], u), b = !e.middlewareData.shift;
let C = w, E = y;
if ((d = e.middlewareData.shift) != null && d.enabled.x && (E = u), (a = e.middlewareData.shift) != null && a.enabled.y && (C = A), b && !f) {
const P = B(r.left, 0), H = B(r.right, 0), k = B(r.top, 0), F = B(r.bottom, 0);
s ? E = c - 2 * (P !== 0 || H !== 0 ? P + H : B(r.left, r.right)) : C = x - 2 * (k !== 0 || F !== 0 ? k + F : B(r.top, r.bottom));
}
await g({
...e,
availableWidth: E,
availableHeight: C
});
const D = await i.getDimensions(l.floating);
return c !== D.width || x !== D.height ? {
reset: {
rects: !0
}
} : {};
}
};
};
export {
re as arrow,
le as computePosition,
se as detectOverflow,
fe as flip,
me as hide,
ge as limitShift,
de as offset,
z as rectToClientRect,
xe as shift,
ue as size
};
//# sourceMappingURL=index.es802.js.map