@commercetools/nimbus 1.0.0 → 1.0.1

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

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