@yext/pages-components 1.2.0 → 1.2.1

package/dist/debugger-CD3UTvmC.js

@@ -0,0 +1,317 @@
+import { jsx as r, jsxs as b, Fragment as C } from "react/jsx-runtime";
+import { useState as E, useEffect as O, useRef as S } from "react";
+import { createPortal as Y } from "react-dom";
+import { g as T, c as N } from "./index-GeO8DZvj.js";
+function M() {
+  return T().name !== "browser" || window.hasOwnProperty("debuggerInitialized") ? null : (window.debuggerInitialized = !0, Y(/* @__PURE__ */ r($, {}), document.body));
+}
+const A = (e, s) => {
+  const n = e.dataset.yaAction, t = e.dataset.yaScopeoverride, l = e.dataset.yaEventname, a = t || s;
+  return {
+    action: n,
+    originalEventName: a ? `${a}_${l}` : l,
+    scope: a
+  };
+}, R = (e, s) => {
+  const n = [];
+  let t = e;
+  for (; t != null && t.parentElement; )
+    t = t.parentElement.closest(s), t && n.push(t);
+  return n;
+}, h = {}, D = "YA_NO_SCOPE", B = (e, s, n, t) => {
+  h.hasOwnProperty(e) ? h[e].events.map((l) => l.el).includes(t) || (h[e].events = [
+    ...h[e].events,
+    {
+      eventData: s,
+      el: t
+    }
+  ]) : h[e] = {
+    scopeEl: n || t,
+    // overidden scopes still need an element
+    events: [
+      {
+        eventData: s,
+        el: t
+      }
+    ]
+  };
+};
+function $() {
+  const [e, s] = E(), [n, t] = E([]), [l, a] = E(!1), i = (o) => {
+    s(e === o ? void 0 : o);
+  };
+  return O(() => {
+    let o = null;
+    const u = () => {
+      o && o.abort(), o = new AbortController();
+      const c = o.signal;
+      document.documentElement.classList.add("xYextDebug"), document.querySelectorAll(
+        "[data-ya-eventname]"
+      ).forEach((d, y) => {
+        const m = d.closest("[data-ya-scope]"), f = m == null ? void 0 : m.dataset.yaScope, p = A(d, f);
+        d.addEventListener(
+          "mouseenter",
+          () => {
+            t([
+              {
+                elem: d,
+                key: `${p.originalEventName}_${y}`,
+                action: p.action,
+                originalEventName: p.originalEventName,
+                scope: p.scope
+              }
+            ]);
+          },
+          { signal: c }
+        ), d.addEventListener(
+          "mouseleave",
+          () => {
+            t([]);
+          },
+          { signal: c }
+        );
+        const w = d.dataset.yaScopeoverride;
+        w ? B(w, p, m, d) : [
+          f,
+          ...R(d, "[data-ya-scope]").map(
+            (x) => x.dataset.yaScope
+          )
+        ].forEach((x) => {
+          B(x || D, p, m, d);
+        });
+      }), a(!0);
+    };
+    u();
+    const g = new MutationObserver(u);
+    return g.observe(document, {
+      childList: !0,
+      subtree: !0
+    }), () => {
+      document.documentElement.classList.remove("xYextDebug"), g.disconnect(), o == null || o.abort();
+    };
+  }, []), l ? /* @__PURE__ */ b(C, { children: [
+    /* @__PURE__ */ b("div", { className: "analytics-debugger", children: [
+      /* @__PURE__ */ b("div", { className: "analytics-debugger-toggles", children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            className: N("analytics-debugger-toggle", {
+              "is-active": e === "Events"
+            }),
+            onClick: () => i("Events"),
+            children: "Events"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "button",
+          {
+            className: N("analytics-debugger-toggle", {
+              "is-active": e === "Scopes"
+            }),
+            onClick: () => i("Scopes"),
+            children: "Scopes"
+          }
+        )
+      ] }),
+      e && /* @__PURE__ */ r("div", { className: "analytics-debugger-tabs", children: e === "Events" ? /* @__PURE__ */ r(j, { data: h, setTooltips: t }) : /* @__PURE__ */ r(_, { data: h, setTooltips: t }) })
+    ] }),
+    /* @__PURE__ */ r(I, { tooltips: n })
+  ] }) : null;
+}
+const L = () => {
+  const e = {};
+  return Object.values(h).forEach((s) => {
+    s.events.forEach((n) => {
+      const { originalEventName: t } = n.eventData;
+      e[t] || (e[t] = []), !e[t].find(
+        (l) => l.el === n.el
+      ) && e[t].push(n);
+    });
+  }), e;
+};
+function j(e) {
+  const { setTooltips: s } = e, [n, t] = E([]), [l, a] = E(""), i = (o, u) => {
+    n.forEach(
+      (c) => c.classList.remove("analytics-event-highlight")
+    );
+    const g = o.map((c) => (c.el.scrollIntoView({ behavior: "smooth", block: "nearest" }), c.el.classList.add("analytics-event-highlight"), c.el));
+    t(g), a(u), s(
+      o.map((c, v) => ({
+        elem: c.el,
+        key: `${c.eventData.originalEventName}_${v}`,
+        action: c.eventData.action,
+        originalEventName: c.eventData.originalEventName,
+        scope: c.eventData.scope
+      }))
+    );
+  };
+  return /* @__PURE__ */ b("div", { className: "analytics-debugger-tab", children: [
+    /* @__PURE__ */ r("h2", { className: "analytics-debugger-tab-title", children: "Event Names" }),
+    /* @__PURE__ */ r("ul", { className: "analytics-debugger-list", children: Object.entries(L()).map(
+      ([o, u], g) => {
+        const c = `${o}_${g}`;
+        return /* @__PURE__ */ r("li", { className: "analytics-debugger-listItem", children: /* @__PURE__ */ r(
+          "button",
+          {
+            className: N("analytics-debugger-button", {
+              "is-active": c === l
+            }),
+            onClick: () => i(u, c),
+            children: o
+          }
+        ) }, c);
+      }
+    ) })
+  ] });
+}
+function _(e) {
+  const { data: s, setTooltips: n } = e, [t, l] = E(""), a = (i) => {
+    const o = s[i];
+    o.scopeEl && (o.scopeEl.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    }), l(i), n(
+      o.events.map((u, g) => {
+        const c = u.eventData;
+        return {
+          elem: u.el,
+          key: `${c.originalEventName}_${g}`,
+          action: c.action,
+          originalEventName: c.originalEventName,
+          scope: c.scope
+        };
+      })
+    ));
+  };
+  return /* @__PURE__ */ b("div", { className: "analytics-debugger-tab", children: [
+    /* @__PURE__ */ r("h2", { className: "analytics-debugger-tab-title", children: "Scope Names" }),
+    /* @__PURE__ */ r("ul", { className: "analytics-debugger-list", children: Object.keys(s).map((i, o) => {
+      if (i !== D)
+        return /* @__PURE__ */ r("li", { className: "analytics-debugger-listItem", children: /* @__PURE__ */ r(
+          "button",
+          {
+            className: N("analytics-debugger-button", {
+              "is-active": i === t
+            }),
+            onClick: () => a(i),
+            children: i
+          }
+        ) }, i + o);
+    }) })
+  ] });
+}
+function I(e) {
+  const s = S({});
+  return O(() => {
+    if (s.current)
+      for (const n of Object.values(s.current)) {
+        const t = Object.values(s.current).map((l) => l.el).filter((l) => l !== n.el);
+        P(n, t), n.el.style.visibility = "visible";
+      }
+  }, [e.tooltips]), /* @__PURE__ */ r(C, { children: e.tooltips.map((n) => /* @__PURE__ */ b(
+    "div",
+    {
+      style: { visibility: "hidden" },
+      className: "analytics-debugger-tooltip",
+      ref: (t) => {
+        t ? s.current[n.key] = {
+          el: t,
+          tooltip: n
+        } : delete s.current[n.key];
+      },
+      children: [
+        /* @__PURE__ */ b("span", { children: [
+          "Action: ",
+          n.action
+        ] }),
+        /* @__PURE__ */ r("br", {}),
+        /* @__PURE__ */ b("span", { children: [
+          "Scope: ",
+          n.scope
+        ] }),
+        /* @__PURE__ */ r("br", {}),
+        /* @__PURE__ */ b("span", { children: [
+          "Original Event Name: ",
+          n.originalEventName
+        ] })
+      ]
+    },
+    n.key
+  )) });
+}
+function P(e, s) {
+  for (let n = 0; n < 9; n++) {
+    const t = q(
+      e.tooltip.elem.getBoundingClientRect(),
+      e.el,
+      n
+    );
+    if (e.el.style.inset = `${t.top} auto auto ${t.left}`, !!W(
+      e.el.getBoundingClientRect().left,
+      e.el.getBoundingClientRect().top + window.scrollY,
+      e.el.getBoundingClientRect().right,
+      e.el.getBoundingClientRect().bottom + window.scrollY
+    )) continue;
+    let a = !0;
+    for (let i = 0; i < s.length; i++) {
+      const o = s[i];
+      H(e.el, o) && (a = !1);
+    }
+    if (a) break;
+  }
+}
+function H(e, s) {
+  const n = e.getBoundingClientRect().top + window.scrollY, t = e.getBoundingClientRect().left, l = n + e.clientHeight, a = t + e.clientWidth, i = s.getBoundingClientRect().top + window.scrollY, o = s.getBoundingClientRect().left, u = i + s.clientHeight, g = o + s.clientWidth, c = (v, d, y, m, f, p, w, k) => y <= f && f <= w && m <= p && p <= k || y <= v && v <= w && m <= d && d <= k || y <= v && v <= w && m <= p && p <= k || y <= f && f <= w && m <= d && d <= k;
+  return c(t, n, o, i, a, l, g, u) || c(o, i, t, n, g, u, a, l);
+}
+function W(e, s, n, t) {
+  return e < 0 || n > window.innerWidth || s < 0 || t > document.documentElement.scrollHeight;
+}
+function q(e, s, n) {
+  const t = s.clientHeight, l = s.clientWidth;
+  let a, i;
+  switch (n) {
+    case 0: {
+      i = window.scrollY + e.top - t + "px", a = e.left - l + "px";
+      break;
+    }
+    case 1: {
+      i = window.scrollY + e.top - t + "px", a = e.left + "px";
+      break;
+    }
+    case 2: {
+      i = window.scrollY + e.top - t + "px", a = e.right + "px";
+      break;
+    }
+    case 3: {
+      i = window.scrollY + e.top - t + "px", a = e.right - l + "px";
+      break;
+    }
+    case 4: {
+      i = window.scrollY + e.bottom + "px", a = e.left - l + "px";
+      break;
+    }
+    case 5: {
+      i = window.scrollY + e.bottom + "px", a = e.left + "px";
+      break;
+    }
+    case 6: {
+      i = window.scrollY + e.bottom + "px", a = e.right - l + "px";
+      break;
+    }
+    case 7: {
+      i = window.scrollY + e.bottom + "px", a = e.right + "px";
+      break;
+    }
+    default:
+      i = 0, a = 0;
+  }
+  return {
+    top: i,
+    left: a
+  };
+}
+export {
+  $ as AnalyticsDebuggerInternal,
+  M as default
+};