UNPKG

@anoki/fse-ui

Version:

FSE UI components library

210 lines (209 loc) • 5.24 kB
import { computePosition as I, offset as J, shift as K, flip as N, size as Q, hide as T, limitShift as X, arrow as z } from "./index.es614.js"; import { autoUpdate as pe, platform as ge } from "./index.es614.js"; import * as o from "react"; import { useLayoutEffect as Y } from "react"; import * as Z from "react-dom"; var b = typeof document < "u", ee = function() { }, w = b ? Y : ee; function R(e, t) { if (e === t) return !0; if (typeof e != typeof t) return !1; if (typeof e == "function" && e.toString() === t.toString()) return !0; let n, r, i; if (e && t && typeof e == "object") { if (Array.isArray(e)) { if (n = e.length, n !== t.length) return !1; for (r = n; r-- !== 0; ) if (!R(e[r], t[r])) return !1; return !0; } if (i = Object.keys(e), n = i.length, n !== Object.keys(t).length) return !1; for (r = n; r-- !== 0; ) if (!{}.hasOwnProperty.call(t, i[r])) return !1; for (r = n; r-- !== 0; ) { const p = i[r]; if (!(p === "_owner" && e.$$typeof) && !R(e[p], t[p])) return !1; } return !0; } return e !== e && t !== t; } function A(e) { return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1; } function L(e, t) { const n = A(e); return Math.round(t * n) / n; } function k(e) { const t = o.useRef(e); return w(() => { t.current = e; }), t; } function oe(e) { e === void 0 && (e = {}); const { placement: t = "bottom", strategy: n = "absolute", middleware: r = [], platform: i, elements: { reference: p, floating: q } = {}, transform: D = !0, whileElementsMounted: E, open: x } = e, [s, C] = o.useState({ x: 0, y: 0, strategy: n, placement: t, middlewareData: {}, isPositioned: !1 }), [M, B] = o.useState(r); R(M, r) || B(r); const [U, V] = o.useState(null), [W, G] = o.useState(null), O = o.useCallback((f) => { f !== a.current && (a.current = f, V(f)); }, []), _ = o.useCallback((f) => { f !== d.current && (d.current = f, G(f)); }, []), u = p || U, l = q || W, a = o.useRef(null), d = o.useRef(null), y = o.useRef(s), H = E != null, S = k(E), P = k(i), v = k(x), g = o.useCallback(() => { if (!a.current || !d.current) return; const f = { placement: t, strategy: n, middleware: M }; P.current && (f.platform = P.current), I(a.current, d.current, f).then((h) => { const m = { ...h, // The floating element's position may be recomputed while it's closed // but still mounted (such as when transitioning out). To ensure // `isPositioned` will be `false` initially on the next open, avoid // setting it to `true` when `open === false` (must be specified). isPositioned: v.current !== !1 }; $.current && !R(y.current, m) && (y.current = m, Z.flushSync(() => { C(m); })); }); }, [M, t, n, P, v]); w(() => { x === !1 && y.current.isPositioned && (y.current.isPositioned = !1, C((f) => ({ ...f, isPositioned: !1 }))); }, [x]); const $ = o.useRef(!1); w(() => ($.current = !0, () => { $.current = !1; }), []), w(() => { if (u && (a.current = u), l && (d.current = l), u && l) { if (S.current) return S.current(u, l, g); g(); } }, [u, l, g, S, H]); const F = o.useMemo(() => ({ reference: a, floating: d, setReference: O, setFloating: _ }), [O, _]), c = o.useMemo(() => ({ reference: u, floating: l }), [u, l]), j = o.useMemo(() => { const f = { position: n, left: 0, top: 0 }; if (!c.floating) return f; const h = L(c.floating, s.x), m = L(c.floating, s.y); return D ? { ...f, transform: "translate(" + h + "px, " + m + "px)", ...A(c.floating) >= 1.5 && { willChange: "transform" } } : { position: n, left: h, top: m }; }, [n, D, c.floating, s.x, s.y]); return o.useMemo(() => ({ ...s, update: g, refs: F, elements: c, floatingStyles: j }), [s, g, F, c, j]); } const te = (e) => { function t(n) { return {}.hasOwnProperty.call(n, "current"); } return { name: "arrow", options: e, fn(n) { const { element: r, padding: i } = typeof e == "function" ? e(n) : e; return r && t(r) ? r.current != null ? z({ element: r.current, padding: i }).fn(n) : {} : r ? z({ element: r, padding: i }).fn(n) : {}; } }; }, fe = (e, t) => ({ ...J(e), options: [e, t] }), ie = (e, t) => ({ ...K(e), options: [e, t] }), se = (e, t) => ({ ...X(e), options: [e, t] }), ue = (e, t) => ({ ...N(e), options: [e, t] }), le = (e, t) => ({ ...Q(e), options: [e, t] }), ce = (e, t) => ({ ...T(e), options: [e, t] }), ae = (e, t) => ({ ...te(e), options: [e, t] }); export { ae as arrow, pe as autoUpdate, I as computePosition, ue as flip, ce as hide, se as limitShift, fe as offset, ge as platform, ie as shift, le as size, oe as useFloating }; //# sourceMappingURL=index.es612.js.map