@streamlayer/react-ui 1.8.2 → 1.10.0

package/lib/app/app/Notifications/index.js

@@ -1,163 +1,175 @@
-import { jsxs as a, Fragment as D, jsx as c } from "react/jsx-runtime";
-import { cx as N } from "@linaria/core";
+import { jsxs as y, Fragment as b, jsx as u } from "react/jsx-runtime";
+import { cx as V } from "@linaria/core";
 import { useStore as g } from "@nanostores/react";
-import { useAppContext as T } from "../useAppContext.js";
-import { scrollIntoAppView as E } from "../../useSdkScroll.js";
-import { useState as p, useMemo as O, useEffect as h, useRef as b, useCallback as w } from "react";
-import { r as q } from "../../../index-B1QdimmR.js";
-import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
-import { NotificationType as f } from "@streamlayer/sdk-web-notifications";
-import { QuestionTypeData as R } from "../../../ui/gamification/constants.js";
-import { Notification as V } from "../../../ui/gamification/question/notification/index.js";
-import { PredictionResult as P } from "../../../ui/gamification/question/notification/prediction-result/index.js";
-import { Onboarding as x } from "./Onboarding/index.js";
-import { HiddenContainer as A, Container as B, InnerContainer as H, NotificationRefreshing as Q, Pill as U } from "./styles.js";
-const j = (o) => {
-  const [t, u] = p(0), i = b(null), d = w((r) => {
-    i.current = r;
-  }, []);
-  h(() => {
-    var l;
-    const r = (l = i.current) == null ? void 0 : l.getBoundingClientRect();
-    r && u(r.height);
-  }, [o]);
-  const n = w((r) => {
-    u(r);
+import { useAppContext as O } from "../useAppContext.js";
+import { scrollIntoAppView as T } from "../../useSdkScroll.js";
+import { useState as k, useMemo as D, useEffect as h, useRef as E, useCallback as w } from "react";
+import { r as R } from "../../../index-B1QdimmR.js";
+import { eventBus as q } from "@streamlayer/sdk-web-interfaces";
+import { NotificationType as p } from "@streamlayer/sdk-web-notifications";
+import { QuestionTypeData as C } from "../../../ui/gamification/constants.js";
+import { Notification as N } from "../../../ui/gamification/question/notification/index.js";
+import { PredictionResult as x } from "../../../ui/gamification/question/notification/prediction-result/index.js";
+import { Onboarding as P } from "./Onboarding/index.js";
+import { HiddenContainer as z, Container as A, InnerContainer as B, NotificationRefreshing as S, Pill as v } from "./styles.js";
+const H = (i) => {
+  const [e, d] = k(0), s = E(null), l = D(() => new ResizeObserver((o) => {
+    var c;
+    for (const r of o)
+      if (r.contentBoxSize) {
+        const t = (c = s.current) == null ? void 0 : c.getBoundingClientRect();
+        t && d(t.height);
+      }
+  }), []), n = w((o) => {
+    s.current = o;
+  }, []), f = w((o) => {
+    d(o);
   }, []);
-  return [d, t, n];
-}, z = ({
-  sdk: o,
-  notification: t,
-  appNode: u,
-  responsiveStore: i
+  return h(() => {
+    const o = s.current;
+    return o ? (l.observe(o), () => {
+      l.unobserve(o);
+    }) : () => {
+    };
+  }, [i]), h(() => () => {
+    l.disconnect();
+  }), [n, e, f];
+}, Q = ({
+  sdk: i,
+  notification: e,
+  appNode: d,
+  responsiveStore: s
 }) => {
-  var s, e;
+  var r, t;
   const {
-    sdkInDesktopView: d
-  } = g(i, {
+    sdkInDesktopView: l
+  } = g(s, {
     keys: ["sdkInDesktopView"]
   }), {
     sdk: n
-  } = T(), [r, l, m] = j(t.id);
-  return t.type === f.QUESTION ? /* @__PURE__ */ a(D, {
-    children: [/* @__PURE__ */ c(A, {
-      ref: r,
-      children: /* @__PURE__ */ c(V, {
-        ...t
+  } = O(), [f, o, c] = H(e.id);
+  return e.type === p.QUESTION ? /* @__PURE__ */ y(b, {
+    children: [/* @__PURE__ */ u(z, {
+      ref: f,
+      children: /* @__PURE__ */ u(N, {
+        ...e
       })
-    }), /* @__PURE__ */ a(B, {
+    }), /* @__PURE__ */ y(A, {
       style: {
-        height: t.hiding ? 0 : l
+        height: e.hiding ? 0 : o
       },
-      hiding: t.hiding,
-      children: [/* @__PURE__ */ c(H, {
+      hiding: e.hiding,
+      children: [/* @__PURE__ */ u(B, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ c(V, {
-          ...t,
+        children: /* @__PURE__ */ u(N, {
+          ...e,
           controlVideo: n == null ? void 0 : n.controlVideoPlayer
         })
-      }), /* @__PURE__ */ c(Q, {}, t.id)]
+      }), /* @__PURE__ */ u(S, {}, e.id)]
     })]
-  }) : t.type === f.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : e.type === p.QUESTION_RESOLVED && ((t = (r = e.data) == null ? void 0 : r.question) != null && t.predictionResult) ? /* @__PURE__ */ u(x, {
     style: {
-      height: t.hiding ? 0 : l
+      height: e.hiding ? 0 : o
     },
-    saveHeight: m,
-    close: t.close,
-    hiding: t.hiding,
-    ...t.data.question
-  }) : t.type === f.ONBOARDING ? /* @__PURE__ */ c(x, {
+    saveHeight: c,
+    close: e.close,
+    hiding: e.hiding,
+    ...e.data.question
+  }) : e.type === p.ONBOARDING ? /* @__PURE__ */ u(P, {
     style: {
-      height: t.hiding ? 0 : l
+      height: e.hiding ? 0 : o
     },
-    saveHeight: m,
-    sdk: o,
-    notification: t,
-    sdkInDesktopView: d,
-    appNode: u,
-    responsiveStore: i
+    saveHeight: c,
+    sdk: i,
+    notification: e,
+    sdkInDesktopView: l,
+    appNode: d,
+    responsiveStore: s
   }) : null;
-}, F = "p7vfi6t", L = ({
-  pill: o,
-  setPill: t,
-  appNode: u,
-  headerNode: i,
-  scrollNode: d,
+}, U = "p7vfi6t", j = ({
+  pill: i,
+  setPill: e,
+  appNode: d,
+  headerNode: s,
+  scrollNode: l,
   responsiveStore: n,
-  scrollStore: r
+  scrollStore: f
 }) => {
-  var k, y;
+  var m, a;
   const {
-    screen: l
+    screen: o
   } = g(n, {
     keys: ["screen"]
   }), {
-    tabsShown: m,
-    scrollPosition: s
-  } = g(r, {
+    tabsShown: c,
+    scrollPosition: r
+  } = g(f, {
     keys: ["tabsShown", "scrollPosition"]
   });
   h(() => {
-    n.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
-  }, [s, n, t]);
-  const e = n.get().sdkInDesktopView ? u : i;
-  return !o || !e.current ? null : q.createPortal(/* @__PURE__ */ c(U, {
-    title: o.type === f.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = o.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+    n.get().sdkInDesktopView ? r < 50 && e(null) : r > -50 && e(null);
+  }, [r, n, e]);
+  const t = n.get().sdkInDesktopView ? d : s;
+  return !i || !t.current ? null : R.createPortal(/* @__PURE__ */ u(v, {
+    title: i.type === p.QUESTION_RESOLVED ? "Prediction result" : `New ${((a = C[(m = i.data) == null ? void 0 : m.questionType]) == null ? void 0 : a.label) || "notification"}`,
     onClick: () => {
       var I;
-      n.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
+      n.get().sdkInDesktopView ? (I = l.current) == null || I.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : E(u, l.size, {
+      }) : T(d, o.size, {
         behavior: "smooth"
-      }), t(null);
+      }), e(null);
     },
-    className: N(m && F, "sl-pill-button")
-  }), e.current);
-}, it = ({
-  sdk: o,
-  headerNode: t,
-  scrollNode: u,
-  responsiveStore: i,
-  appNode: d,
+    className: V(c && U, "sl-pill-button")
+  }), t.current);
+}, oe = ({
+  sdk: i,
+  headerNode: e,
+  scrollNode: d,
+  responsiveStore: s,
+  appNode: l,
   scrollStore: n
 }) => {
-  const [r] = p(o.getNotificationsStore()), l = g(r), [m, s] = p(null), e = O(() => o.getActiveNotification(), [o, l]);
+  const [f] = k(i.getNotificationsStore()), o = g(f), [c, r] = k(null), t = D(() => i.getActiveNotification(), [i, o]);
   return h(() => {
-    e && C.emit("notification", {
+    t && q.emit("notification", {
       action: "rendered",
       payload: {
-        questionId: e.data.questionId,
-        questionType: e.data.questionType
+        questionId: t.data.questionId,
+        questionType: t.data.questionType
       }
     });
-  }, [e]), h(() => {
-    e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      n.get().scrollPosition !== 0 && s(e);
+  }, [t]), h(() => {
+    const {
+      sdkInDesktopView: m,
+      sdkInView: a
+    } = s.get();
+    t && (m || a) && (!m && a && r(t), m && window.requestAnimationFrame(() => {
+      n.get().scrollPosition !== 0 && r(t);
     }));
-  }, [e]), h(() => {
-    e || s(null);
-  }, [e]), /* @__PURE__ */ a(D, {
-    children: [!m && e && /* @__PURE__ */ c(z, {
-      headerNode: t,
-      appNode: d,
-      sdk: o,
-      notification: e,
-      responsiveStore: i
-    }), m && /* @__PURE__ */ c(L, {
-      pill: m,
-      setPill: s,
-      appNode: d,
-      notification: e,
-      headerNode: t,
-      scrollNode: u,
+  }, [t]), h(() => {
+    t || r(null);
+  }, [t]), /* @__PURE__ */ y(b, {
+    children: [!c && t && /* @__PURE__ */ u(Q, {
+      appNode: l,
+      sdk: i,
+      notification: t,
+      responsiveStore: s
+    }), c && /* @__PURE__ */ u(j, {
+      pill: c,
+      setPill: r,
+      appNode: l,
+      notification: t,
+      headerNode: e,
+      scrollNode: d,
       scrollStore: n,
-      responsiveStore: i
+      responsiveStore: s
     })]
   });
 };
 export {
-  it as SDKNotifications
+  oe as SDKNotifications
 };

package/lib/app/app/Points/index.js

@@ -1,28 +1,28 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useStore as i } from "@nanostores/react";
-import { useState as c, useEffect as f } from "react";
-import { FeatureStatus as p } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as S } from "@streamlayer/sdk-web-types";
-import { Points as l } from "../../../ui/gamification/points/index.js";
+import { useStore as f } from "@nanostores/react";
+import { useState as c, useEffect as l } from "react";
+import { FeatureStatus as u } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as p } from "@streamlayer/sdk-web-types";
+import { Points as S } from "../../../ui/gamification/points/index.js";
 const a = ({ gamification: e }) => {
-  const s = e.userSummary.$store, [r, u] = c(0);
-  return f(() => {
-    const m = s.subscribe((t) => {
+  const s = e.userSummary.$store, [r, m] = c(0);
+  return l(() => {
+    const i = s.subscribe((t) => {
       var o;
-      (o = t == null ? void 0 : t.summary) != null && o.points && u(t.summary.points);
+      (o = t == null ? void 0 : t.summary) != null && o.points && m(t.summary.points);
     });
     return () => {
-      m();
+      i();
     };
-  }, [s]), /* @__PURE__ */ n(l, { points: r, onClick: () => {
-    e.status.get() === p.Suspended && e.openFeature();
+  }, [s]), /* @__PURE__ */ n(S, { points: r, onClick: () => {
+    e.status.get() === u.Suspended ? e.openFeature() : e.status.get() === u.Ready && e.closeFeature(!1);
   } });
-}, h = ({ sdk: e }) => {
-  if (!i(e.featuresList.getStore()))
+}, k = ({ sdk: e }) => {
+  if (!f(e.featuresList.getStore()))
     return null;
-  const r = e.getFeature(S.GAMES);
+  const r = e.getFeature(p.GAMES);
   return r ? /* @__PURE__ */ n(a, { gamification: r }) : null;
 };
 export {
-  h as StreamLayerSDKPoints
+  k as StreamLayerSDKPoints
 };

package/lib/app/app/index.d.ts

@@ -6,5 +6,7 @@ export type AppAppChildrenProps = {
 export type AppAppProps = {
     sdk: StreamLayerSDK;
     event?: string;
+    topNavigation?: boolean;
+    enabled?: boolean;
 };
 export declare const App: React.FC<AppAppProps>;

package/lib/app/app/index.js

@@ -1,100 +1,129 @@
-import { jsx as i, jsxs as d } from "react/jsx-runtime";
-import { useStore as h } from "@nanostores/react";
-import { SDKContainer as A, SDKScrollContainer as C } from "../styles.js";
-import { useSdkFeature as L } from "../useSdkFeature.js";
-import { useSdkResponsive as x } from "../useSdkResponsive.js";
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { useStore as N } from "@nanostores/react";
+import { SDKContainer as h, SDKScrollContainer as v } from "./styles.js";
+import { useSdkFeature as g } from "../useSdkFeature.js";
+import { useSdkResponsive as A } from "../useSdkResponsive.js";
 import { useSdkScroll as D } from "../useSdkScroll.js";
-import { useAnalyticsListener as m, newTabLinkListener as F, appScrollListener as b, appClickListener as y } from "../../hooks/analytics.js";
-import { useRef as S, useEffect as v, useMemo as E } from "react";
-import { resetCss as u } from "../../ui/theme/theme.js";
-import { ActiveFeature as K, StandaloneFeature as j } from "./Features/index.js";
-import { SDKNavigation as R } from "./Navigation/index.js";
-import { SDKNotifications as w } from "./Notifications/index.js";
-import { useAppApp as I } from "./useApp.js";
-import { AppContext as M } from "./useAppContext.js";
-const P = ({ sdk: e, className: n, scrollStore: t, appNode: a, scrollNode: o, responsiveStore: r }) => {
-  const [, s] = L(e);
-  return /* @__PURE__ */ i(
-    K,
-    {
-      className: n,
-      scrollNode: o,
-      appNode: a,
-      scrollStore: t,
-      feature: s,
-      responsiveStore: r,
+import { useAnalyticsListener as c, newTabLinkListener as L, appScrollListener as x, appClickListener as C } from "../../hooks/analytics.js";
+import { useRef as f, useMemo as F, useEffect as b } from "react";
+import { resetCss as m } from "../../ui/theme/theme.js";
+import { ActiveFeature as y, StandaloneFeature as K } from "./Features/index.js";
+import { SDKNavigation as j } from "./Navigation/index.js";
+import { SDKPillNode as R } from "./Navigation/SDKPillNode.js";
+import { SDKNotifications as k } from "./Notifications/index.js";
+import { useAppApp as w } from "./useApp.js";
+import { AppContext as E } from "./useAppContext.js";
+const P = ({
+  sdk: e,
+  className: l,
+  scrollStore: r,
+  appNode: i,
+  scrollNode: n,
+  responsiveStore: t
+}) => {
+  const [, a] = g(e);
+  return /* @__PURE__ */ s(y, {
+    className: l,
+    scrollNode: n,
+    appNode: i,
+    scrollStore: r,
+    feature: a,
+    responsiveStore: t,
+    sdk: e
+  });
+}, I = ({
+  sdk: e,
+  className: l,
+  appNode: r,
+  responsiveStore: i
+}) => {
+  const n = N(e.featuresList.getStore());
+  return n ? Array.from(n, (t) => {
+    const a = e.getFeature(t);
+    return a ? /* @__PURE__ */ s(K, {
+      className: l,
+      appNode: r,
+      feature: a,
+      responsiveStore: i,
       sdk: e
-    }
-  );
-}, V = ({ sdk: e, className: n, appNode: t, responsiveStore: a }) => {
-  const o = h(e.featuresList.getStore());
-  return o ? Array.from(o, (r) => {
-    const s = e.getFeature(r);
-    return s ? /* @__PURE__ */ i(
-      j,
-      {
-        className: n,
-        appNode: t,
-        feature: s,
-        responsiveStore: a,
-        sdk: e
-      },
-      r
-    ) : null;
+    }, t) : null;
   }) : null;
-}, Z = ({ sdk: e, event: n }) => {
-  const t = S(null), a = S(null), [o] = x(t), [r, s] = D(t, o), { sdkEnabled: l, sdkReady: c, activateEventWithId: p, deactivate: f, isLogged: N } = I(e);
-  v(() => {
-    n ? (e.createEventSession(n), p(n)) : f();
-  }, [n, p, f, e]), m(t, { enabled: l, event: "click", listener: F }), m(r, {
-    enabled: l,
+}, Z = ({
+  sdk: e,
+  topNavigation: l
+}) => {
+  const r = f(null), i = f(null), [n] = A(r), [t, a] = D(r, n), {
+    sdkReady: p,
+    isLogged: d
+  } = w(e), o = !!p;
+  c(r, {
+    enabled: o,
+    event: "click",
+    listener: L
+  }), c(t, {
+    enabled: o,
     event: "scrollend",
-    listener: b,
+    listener: x,
     useDomNode: !0
-  }), m(r, {
-    enabled: l,
+  }), c(t, {
+    enabled: o,
     event: "click",
-    listener: y,
+    listener: C,
     useDomNode: !0
   });
-  const g = E(() => ({ sdk: e }), [e]);
-  return v(() => {
+  const S = F(() => ({
+    sdk: e
+  }), [e]);
+  return b(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ i(M.Provider, { value: g, children: /* @__PURE__ */ d(A, { ref: t, children: [
-    l && /* @__PURE__ */ i(R, { className: u, sdk: e, ref: a }),
-    /* @__PURE__ */ d(C, { className: "sl-hide-on-modal", ref: r, "data-nav": l.toString(), children: [
-      c && /* @__PURE__ */ i(
-        w,
-        {
+  }, []), /* @__PURE__ */ s(E.Provider, {
+    value: S,
+    children: /* @__PURE__ */ u(h, {
+      ref: r,
+      className: l ? "" : "c10llmat",
+      children: [o && l && /* @__PURE__ */ s(j, {
+        className: m,
+        sdk: e,
+        ref: i
+      }), o && !l && /* @__PURE__ */ s(R, {
+        className: m,
+        ref: i
+      }), /* @__PURE__ */ u(v, {
+        className: "sl-hide-on-modal",
+        ref: t,
+        "data-nav": l && o.toString(),
+        children: [o && /* @__PURE__ */ s(k, {
           sdk: e,
-          scrollNode: r,
-          headerNode: a,
-          appNode: t,
-          scrollStore: s,
-          responsiveStore: o
-        }
-      ),
-      c && /* @__PURE__ */ i(
-        P,
-        {
-          scrollStore: s,
-          responsiveStore: o,
-          scrollNode: r,
-          appNode: t,
-          className: u,
+          scrollNode: t,
+          headerNode: i,
+          appNode: r,
+          scrollStore: a,
+          responsiveStore: n
+        }), o && /* @__PURE__ */ s(P, {
+          scrollStore: a,
+          responsiveStore: n,
+          scrollNode: t,
+          appNode: r,
+          className: m,
           sdk: e
-        }
-      ),
-      c && /* @__PURE__ */ i(V, { responsiveStore: o, appNode: t, className: u, sdk: e })
-    ] }),
-    l && !N && /* @__PURE__ */ i(
-      "div",
-      {
-        style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" },
+        }), o && /* @__PURE__ */ s(I, {
+          responsiveStore: n,
+          appNode: r,
+          className: m,
+          sdk: e
+        })]
+      }), o && !d && /* @__PURE__ */ s("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+          height: "100%"
+        },
         children: "You are not logged in."
-      }
-    )
-  ] }) });
+      })]
+    })
+  });
 };
 export {
   Z as App

package/lib/app/app/story/insight/index.d.ts

@@ -4,6 +4,7 @@ export declare const InsightStory: React.FC<{
     insightId?: string;
     production?: boolean;
     onlyInsight?: boolean;
+    skipAutoClose?: boolean;
     hideHeader?: boolean;
     layoutMode?: 'side-by-side' | 'cover';
 }>;

package/lib/app/app/story/insight/index.js

@@ -1,59 +1,62 @@
 import { jsx as r } from "react/jsx-runtime";
-import { styled as d } from "@linaria/react";
-import { StreamLayerProvider as u, useStreamLayer as p } from "@streamlayer/react";
-import { StreamLayerSDKInsight as c } from "../../Insight/index.js";
-import { StreamLayerThemeProvider as y } from "../../../../ui/theme/index.js";
-import { useStreamLayerDebug as f } from "../../../../utils/debug/index.js";
+import { styled as u } from "@linaria/react";
+import { StreamLayerProvider as p, useStreamLayer as c } from "@streamlayer/react";
+import { StreamLayerSDKInsight as y } from "../../Insight/index.js";
+import { StreamLayerThemeProvider as f } from "../../../../ui/theme/index.js";
+import { useStreamLayerDebug as h } from "../../../../utils/debug/index.js";
 import { customTheme as l } from "./styles.js";
-import { Video as h } from "./video.js";
-const v = /* @__PURE__ */ d("div")({
+import { Video as v } from "./video.js";
+const S = /* @__PURE__ */ u("div")({
   name: "Body",
   class: "buit6hv",
   propsAsIs: !1
-}), S = ({
+}), L = ({
   hideHeader: t,
   insightId: o
 }) => {
-  const e = p();
-  return e ? /* @__PURE__ */ r(y, {
+  const e = c();
+  return e ? /* @__PURE__ */ r(f, {
     customTheme: l,
-    children: /* @__PURE__ */ r(c, {
+    children: /* @__PURE__ */ r(y, {
       hideHeader: t,
       sdk: e,
       insightId: o,
       persistent: !0
     })
   }) : null;
-}, D = ({
+}, P = ({
   sdkKey: t,
   eventId: o,
   layoutMode: e,
-  insightId: s,
-  production: n,
-  onlyInsight: i,
-  hideHeader: a
+  insightId: n,
+  production: i,
+  onlyInsight: a,
+  skipAutoClose: s,
+  hideHeader: d
 }) => {
-  const m = f({
+  const m = h({
     sdkKey: t,
     eventId: o,
-    production: n
+    production: i
   });
-  return /* @__PURE__ */ r(u, {
+  return /* @__PURE__ */ r(p, {
     sdkKey: m.sdkKey,
     event: m.event,
     production: m.env === "production",
     autoEnable: !0,
-    children: i ? /* @__PURE__ */ r(S, {
-      insightId: s,
-      hideHeader: a
-    }) : /* @__PURE__ */ r(v, {
-      children: /* @__PURE__ */ r(h, {
-        insightId: s,
+    children: a ? /* @__PURE__ */ r(L, {
+      skipAutoClose: s,
+      insightId: n,
+      hideHeader: d
+    }) : /* @__PURE__ */ r(S, {
+      children: /* @__PURE__ */ r(v, {
+        skipAutoClose: s,
+        insightId: n,
         layoutMode: e
       })
     })
   });
 };
 export {
-  D as InsightStory
+  P as InsightStory
 };