@commercetools/nimbus 0.0.10 → 0.0.12-rc1

package/dist/chunks/OverlayArrow-C1hn2WBd.es.js

@@ -0,0 +1,479 @@
+import { d as Y } from "./mergeProps-C0OSi2w3.es.js";
+import { flushSync as ue } from "react-dom";
+import { useEffect as K, useState as Q, useCallback as F, useRef as W, useContext as pe, createContext as re } from "react";
+import { a as me } from "./platform-D-bXaP3n.es.js";
+import { $ as q } from "./number-5qMXmHyn.es.js";
+import { $ as ve } from "./context-D3RF-nTI.es.js";
+import { $ as ge } from "./useControlledState-u436Wbp1.es.js";
+function $e() {
+  return typeof window.ResizeObserver < "u";
+}
+function V(e) {
+  const { ref: t, box: l, onResize: n } = e;
+  K(() => {
+    let o = t?.current;
+    if (o)
+      if ($e()) {
+        const r = new window.ResizeObserver((c) => {
+          c.length && n();
+        });
+        return r.observe(o, {
+          box: l
+        }), () => {
+          o && r.unobserve(o);
+        };
+      } else
+        return window.addEventListener("resize", n, !1), () => {
+          window.removeEventListener("resize", n, !1);
+        };
+  }, [
+    n,
+    t,
+    l
+  ]);
+}
+function Ne(e, t = !0) {
+  let [l, n] = Q(!0), o = l && t;
+  return Y(() => {
+    if (o && e.current && "getAnimations" in e.current)
+      for (let r of e.current.getAnimations()) r instanceof CSSTransition && r.cancel();
+  }, [
+    e,
+    o
+  ]), ie(e, o, F(() => n(!1), [])), o;
+}
+function Fe(e, t) {
+  let [l, n] = Q(t ? "open" : "closed");
+  switch (l) {
+    case "open":
+      t || n("exiting");
+      break;
+    case "closed":
+    case "exiting":
+      t && n("open");
+      break;
+  }
+  let o = l === "exiting";
+  return ie(e, o, F(() => {
+    n((r) => r === "exiting" ? "closed" : r);
+  }, [])), o;
+}
+function ie(e, t, l) {
+  Y(() => {
+    if (t && e.current) {
+      if (!("getAnimations" in e.current)) {
+        l();
+        return;
+      }
+      let n = e.current.getAnimations();
+      if (n.length === 0) {
+        l();
+        return;
+      }
+      let o = !1;
+      return Promise.all(n.map((r) => r.finished)).then(() => {
+        o || ue(() => {
+          l();
+        });
+      }).catch(() => {
+      }), () => {
+        o = !0;
+      };
+    }
+  }, [
+    e,
+    t,
+    l
+  ]);
+}
+const M = {
+  top: "top",
+  bottom: "top",
+  left: "left",
+  right: "left"
+}, Z = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+}, he = {
+  top: "left",
+  left: "top"
+}, J = {
+  top: "height",
+  left: "width"
+}, ae = {
+  width: "totalWidth",
+  height: "totalHeight"
+}, X = {};
+let C = typeof document < "u" ? window.visualViewport : null;
+function D(e) {
+  let t = 0, l = 0, n = 0, o = 0, r = 0, c = 0, i = {};
+  var $;
+  let f = (($ = C?.scale) !== null && $ !== void 0 ? $ : 1) > 1;
+  if (e.tagName === "BODY") {
+    let d = document.documentElement;
+    n = d.clientWidth, o = d.clientHeight;
+    var u;
+    t = (u = C?.width) !== null && u !== void 0 ? u : n;
+    var g;
+    l = (g = C?.height) !== null && g !== void 0 ? g : o, i.top = d.scrollTop || e.scrollTop, i.left = d.scrollLeft || e.scrollLeft, C && (r = C.offsetTop, c = C.offsetLeft);
+  } else
+    ({ width: t, height: l, top: r, left: c } = B(e)), i.top = e.scrollTop, i.left = e.scrollLeft, n = t, o = l;
+  if (me() && (e.tagName === "BODY" || e.tagName === "HTML") && f) {
+    i.top = 0, i.left = 0;
+    var p;
+    r = (p = C?.pageTop) !== null && p !== void 0 ? p : 0;
+    var a;
+    c = (a = C?.pageLeft) !== null && a !== void 0 ? a : 0;
+  }
+  return {
+    width: t,
+    height: l,
+    totalWidth: n,
+    totalHeight: o,
+    scroll: i,
+    top: r,
+    left: c
+  };
+}
+function xe(e) {
+  return {
+    top: e.scrollTop,
+    left: e.scrollLeft,
+    width: e.scrollWidth,
+    height: e.scrollHeight
+  };
+}
+function ee(e, t, l, n, o, r, c) {
+  var i;
+  let $ = (i = o.scroll[e]) !== null && i !== void 0 ? i : 0, f = n[J[e]], u = n.scroll[M[e]] + r, g = f + n.scroll[M[e]] - r, p = t - $ + c[e] - n[M[e]], a = t - $ + l + c[e] - n[M[e]];
+  return p < u ? u - p : a > g ? Math.max(g - a, u - p) : 0;
+}
+function be(e) {
+  let t = window.getComputedStyle(e);
+  return {
+    top: parseInt(t.marginTop, 10) || 0,
+    bottom: parseInt(t.marginBottom, 10) || 0,
+    left: parseInt(t.marginLeft, 10) || 0,
+    right: parseInt(t.marginRight, 10) || 0
+  };
+}
+function te(e) {
+  if (X[e]) return X[e];
+  let [t, l] = e.split(" "), n = M[t] || "right", o = he[n];
+  M[l] || (l = "center");
+  let r = J[n], c = J[o];
+  return X[e] = {
+    placement: t,
+    crossPlacement: l,
+    axis: n,
+    crossAxis: o,
+    size: r,
+    crossSize: c
+  }, X[e];
+}
+function G(e, t, l, n, o, r, c, i, $, f) {
+  let { placement: u, crossPlacement: g, axis: p, crossAxis: a, size: d, crossSize: h } = n, s = {};
+  var m;
+  s[a] = (m = e[a]) !== null && m !== void 0 ? m : 0;
+  var v, E, T, P;
+  g === "center" ? s[a] += (((v = e[h]) !== null && v !== void 0 ? v : 0) - ((E = l[h]) !== null && E !== void 0 ? E : 0)) / 2 : g !== a && (s[a] += ((T = e[h]) !== null && T !== void 0 ? T : 0) - ((P = l[h]) !== null && P !== void 0 ? P : 0)), s[a] += r;
+  const x = e[a] - l[h] + $ + f, _ = e[a] + e[h] - $ - f;
+  if (s[a] = q(s[a], x, _), u === p) {
+    const I = i ? c[d] : t[ae[d]];
+    s[Z[p]] = Math.floor(I - e[p] + o);
+  } else s[p] = Math.floor(e[p] + e[d] + o);
+  return s;
+}
+function we(e, t, l, n, o, r, c, i) {
+  const $ = n ? l.height : t[ae.height];
+  var f;
+  let u = e.top != null ? l.top + e.top : l.top + ($ - ((f = e.bottom) !== null && f !== void 0 ? f : 0) - c);
+  var g, p, a, d, h, s;
+  let m = i !== "top" ? (
+    // We want the distance between the top of the overlay to the bottom of the boundary
+    Math.max(0, t.height + t.top + ((g = t.scroll.top) !== null && g !== void 0 ? g : 0) - u - (((p = o.top) !== null && p !== void 0 ? p : 0) + ((a = o.bottom) !== null && a !== void 0 ? a : 0) + r))
+  ) : Math.max(0, u + c - (t.top + ((d = t.scroll.top) !== null && d !== void 0 ? d : 0)) - (((h = o.top) !== null && h !== void 0 ? h : 0) + ((s = o.bottom) !== null && s !== void 0 ? s : 0) + r));
+  return Math.min(t.height - r * 2, m);
+}
+function oe(e, t, l, n, o, r) {
+  let { placement: c, axis: i, size: $ } = r;
+  var f, u;
+  if (c === i) return Math.max(0, l[i] - e[i] - ((f = e.scroll[i]) !== null && f !== void 0 ? f : 0) + t[i] - ((u = n[i]) !== null && u !== void 0 ? u : 0) - n[Z[i]] - o);
+  var g;
+  return Math.max(0, e[$] + e[i] + e.scroll[i] - t[i] - l[i] - l[$] - ((g = n[i]) !== null && g !== void 0 ? g : 0) - n[Z[i]] - o);
+}
+function Ee(e, t, l, n, o, r, c, i, $, f, u, g, p, a, d, h) {
+  let s = te(e), { size: m, crossAxis: v, crossSize: E, placement: T, crossPlacement: P } = s, x = G(t, i, l, s, u, g, f, p, d, h), _ = u, I = oe(i, f, t, o, r + u, s);
+  if (c && n[m] > I) {
+    let j = te(`${Z[T]} ${P}`), de = G(t, i, l, j, u, g, f, p, d, h);
+    oe(i, f, t, o, r + u, j) > I && (s = j, x = de, _ = u);
+  }
+  let z = "bottom";
+  s.axis === "top" ? s.placement === "top" ? z = "top" : s.placement === "bottom" && (z = "bottom") : s.crossAxis === "top" && (s.crossPlacement === "top" ? z = "bottom" : s.crossPlacement === "bottom" && (z = "top"));
+  let w = ee(v, x[v], l[E], i, $, r, f);
+  x[v] += w;
+  let S = we(x, i, f, p, o, r, l.height, z);
+  a && a < S && (S = a), l.height = Math.min(l.height, S), x = G(t, i, l, s, _, g, f, p, d, h), w = ee(v, x[v], l[E], i, $, r, f), x[v] += w;
+  let R = {}, y = t[v] + 0.5 * t[E] - x[v] - o[M[v]];
+  const H = d / 2 + h;
+  var O, k, A, L;
+  const N = M[v] === "left" ? ((O = o.left) !== null && O !== void 0 ? O : 0) + ((k = o.right) !== null && k !== void 0 ? k : 0) : ((A = o.top) !== null && A !== void 0 ? A : 0) + ((L = o.bottom) !== null && L !== void 0 ? L : 0), U = l[E] - N - d / 2 - h, ce = t[v] + d / 2 - (x[v] + o[M[v]]), se = t[v] + t[E] - d / 2 - (x[v] + o[M[v]]), fe = q(y, ce, se);
+  return R[v] = q(fe, H, U), {
+    position: x,
+    maxHeight: S,
+    arrowOffsetLeft: R.left,
+    arrowOffsetTop: R.top,
+    placement: s.placement
+  };
+}
+function Ce(e) {
+  let { placement: t, targetNode: l, overlayNode: n, scrollNode: o, padding: r, shouldFlip: c, boundaryElement: i, offset: $, crossOffset: f, maxHeight: u, arrowSize: g = 0, arrowBoundaryOffset: p = 0 } = e, a = n instanceof HTMLElement ? Pe(n) : document.documentElement, d = a === document.documentElement;
+  const h = window.getComputedStyle(a).position;
+  let s = !!h && h !== "static", m = d ? B(l) : le(l, a);
+  if (!d) {
+    let { marginTop: R, marginLeft: y } = window.getComputedStyle(l);
+    m.top += parseInt(R, 10) || 0, m.left += parseInt(y, 10) || 0;
+  }
+  let v = B(n), E = be(n);
+  var T, P;
+  v.width += ((T = E.left) !== null && T !== void 0 ? T : 0) + ((P = E.right) !== null && P !== void 0 ? P : 0);
+  var x, _;
+  v.height += ((x = E.top) !== null && x !== void 0 ? x : 0) + ((_ = E.bottom) !== null && _ !== void 0 ? _ : 0);
+  let I = xe(o), z = D(i), w = D(a), S = i.tagName === "BODY" ? B(a) : le(a, i);
+  return a.tagName === "HTML" && i.tagName === "BODY" && (w.scroll.top = 0, w.scroll.left = 0), Ee(t, m, v, I, E, r, c, z, w, S, $, f, s, u, g, p);
+}
+function B(e) {
+  let { top: t, left: l, width: n, height: o } = e.getBoundingClientRect(), { scrollTop: r, scrollLeft: c, clientTop: i, clientLeft: $ } = document.documentElement;
+  return {
+    top: t + r - i,
+    left: l + c - $,
+    width: n,
+    height: o
+  };
+}
+function le(e, t) {
+  let l = window.getComputedStyle(e), n;
+  if (l.position === "fixed") {
+    let { top: o, left: r, width: c, height: i } = e.getBoundingClientRect();
+    n = {
+      top: o,
+      left: r,
+      width: c,
+      height: i
+    };
+  } else {
+    n = B(e);
+    let o = B(t), r = window.getComputedStyle(t);
+    o.top += (parseInt(r.borderTopWidth, 10) || 0) - t.scrollTop, o.left += (parseInt(r.borderLeftWidth, 10) || 0) - t.scrollLeft, n.top -= o.top, n.left -= o.left;
+  }
+  return n.top -= parseInt(l.marginTop, 10) || 0, n.left -= parseInt(l.marginLeft, 10) || 0, n;
+}
+function Pe(e) {
+  let t = e.offsetParent;
+  if (t && t === document.body && window.getComputedStyle(t).position === "static" && !ne(t) && (t = document.documentElement), t == null)
+    for (t = e.parentElement; t && !ne(t); ) t = t.parentElement;
+  return t || document.documentElement;
+}
+function ne(e) {
+  let t = window.getComputedStyle(e);
+  return t.transform !== "none" || /transform|perspective/.test(t.willChange) || t.filter !== "none" || t.contain === "paint" || "backdropFilter" in t && t.backdropFilter !== "none" || "WebkitBackdropFilter" in t && t.WebkitBackdropFilter !== "none";
+}
+const Le = /* @__PURE__ */ new WeakMap();
+function Se(e) {
+  let { triggerRef: t, isOpen: l, onClose: n } = e;
+  K(() => {
+    if (!l || n === null) return;
+    let o = (r) => {
+      let c = r.target;
+      if (!t.current || c instanceof Node && !c.contains(t.current) || r.target instanceof HTMLInputElement || r.target instanceof HTMLTextAreaElement) return;
+      let i = n || Le.get(t.current);
+      i && i();
+    };
+    return window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("scroll", o, !0);
+    };
+  }, [
+    l,
+    n,
+    t
+  ]);
+}
+let b = typeof document < "u" ? window.visualViewport : null;
+function Be(e) {
+  let { direction: t } = ve(), { arrowSize: l = 0, targetRef: n, overlayRef: o, scrollRef: r = o, placement: c = "bottom", containerPadding: i = 12, shouldFlip: $ = !0, boundaryElement: f = typeof document < "u" ? document.body : null, offset: u = 0, crossOffset: g = 0, shouldUpdatePosition: p = !0, isOpen: a = !0, onClose: d, maxHeight: h, arrowBoundaryOffset: s = 0 } = e, [m, v] = Q(null), E = [
+    p,
+    c,
+    o.current,
+    n.current,
+    r.current,
+    i,
+    $,
+    f,
+    u,
+    g,
+    a,
+    t,
+    h,
+    s,
+    l
+  ], T = W(b?.scale);
+  K(() => {
+    a && (T.current = b?.scale);
+  }, [
+    a
+  ]);
+  let P = F(() => {
+    if (p === !1 || !a || !o.current || !n.current || !f || b?.scale !== T.current) return;
+    let w = null;
+    if (r.current && r.current.contains(document.activeElement)) {
+      var S;
+      let L = (S = document.activeElement) === null || S === void 0 ? void 0 : S.getBoundingClientRect(), N = r.current.getBoundingClientRect();
+      var R;
+      if (w = {
+        type: "top",
+        offset: ((R = L?.top) !== null && R !== void 0 ? R : 0) - N.top
+      }, w.offset > N.height / 2) {
+        w.type = "bottom";
+        var y;
+        w.offset = ((y = L?.bottom) !== null && y !== void 0 ? y : 0) - N.bottom;
+      }
+    }
+    let H = o.current;
+    if (!h && o.current) {
+      var O;
+      H.style.top = "0px", H.style.bottom = "";
+      var k;
+      H.style.maxHeight = ((k = (O = window.visualViewport) === null || O === void 0 ? void 0 : O.height) !== null && k !== void 0 ? k : window.innerHeight) + "px";
+    }
+    let A = Ce({
+      placement: Re(c, t),
+      overlayNode: o.current,
+      targetNode: n.current,
+      scrollNode: r.current || o.current,
+      padding: i,
+      shouldFlip: $,
+      boundaryElement: f,
+      offset: u,
+      crossOffset: g,
+      maxHeight: h,
+      arrowSize: l,
+      arrowBoundaryOffset: s
+    });
+    if (A.position) {
+      if (H.style.top = "", H.style.bottom = "", H.style.left = "", H.style.right = "", Object.keys(A.position).forEach((L) => H.style[L] = A.position[L] + "px"), H.style.maxHeight = A.maxHeight != null ? A.maxHeight + "px" : "", w && document.activeElement && r.current) {
+        let L = document.activeElement.getBoundingClientRect(), N = r.current.getBoundingClientRect(), U = L[w.type] - N[w.type];
+        r.current.scrollTop += U - w.offset;
+      }
+      v(A);
+    }
+  }, E);
+  Y(P, E), Te(P), V({
+    ref: o,
+    onResize: P
+  }), V({
+    ref: n,
+    onResize: P
+  });
+  let x = W(!1);
+  Y(() => {
+    let w, S = () => {
+      x.current = !0, clearTimeout(w), w = setTimeout(() => {
+        x.current = !1;
+      }, 500), P();
+    }, R = () => {
+      x.current && S();
+    };
+    return b?.addEventListener("resize", S), b?.addEventListener("scroll", R), () => {
+      b?.removeEventListener("resize", S), b?.removeEventListener("scroll", R);
+    };
+  }, [
+    P
+  ]);
+  let _ = F(() => {
+    x.current || d?.();
+  }, [
+    d,
+    x
+  ]);
+  Se({
+    triggerRef: n,
+    isOpen: a,
+    onClose: d && _
+  });
+  var I, z;
+  return {
+    overlayProps: {
+      style: {
+        position: "absolute",
+        zIndex: 1e5,
+        ...m?.position,
+        maxHeight: (I = m?.maxHeight) !== null && I !== void 0 ? I : "100vh"
+      }
+    },
+    placement: (z = m?.placement) !== null && z !== void 0 ? z : null,
+    arrowProps: {
+      "aria-hidden": "true",
+      role: "presentation",
+      style: {
+        left: m?.arrowOffsetLeft,
+        top: m?.arrowOffsetTop
+      }
+    },
+    updatePosition: P
+  };
+}
+function Te(e) {
+  Y(() => (window.addEventListener("resize", e, !1), () => {
+    window.removeEventListener("resize", e, !1);
+  }), [
+    e
+  ]);
+}
+function Re(e, t) {
+  return t === "rtl" ? e.replace("start", "right").replace("end", "left") : e.replace("start", "left").replace("end", "right");
+}
+const ze = /* @__PURE__ */ re({});
+function Ye() {
+  var e;
+  return (e = pe(ze)) !== null && e !== void 0 ? e : {};
+}
+function Xe(e) {
+  let [t, l] = ge(e.isOpen, e.defaultOpen || !1, e.onOpenChange);
+  const n = F(() => {
+    l(!0);
+  }, [
+    l
+  ]), o = F(() => {
+    l(!1);
+  }, [
+    l
+  ]), r = F(() => {
+    l(!t);
+  }, [
+    l,
+    t
+  ]);
+  return {
+    isOpen: t,
+    setOpen: l,
+    open: n,
+    close: o,
+    toggle: r
+  };
+}
+const Ze = /* @__PURE__ */ re({
+  placement: "bottom"
+});
+export {
+  Xe as $,
+  V as a,
+  Ye as b,
+  Fe as c,
+  Be as d,
+  Ne as e,
+  Ze as f,
+  Le as g
+};
+//# sourceMappingURL=OverlayArrow-C1hn2WBd.es.js.map