UNPKG

@anoki/fse-ui

Version:

FSE UI components library

534 lines (533 loc) • 14.6 kB
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