@streamlayer/react-ui 1.20.0 → 1.22.0

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

@@ -1,82 +1,77 @@
-import { jsxs as f, Fragment as D, jsx as c } from "react/jsx-runtime";
-import { cx as N } from "@linaria/core";
+import { jsxs as g, Fragment as V, jsx as c } from "react/jsx-runtime";
+import { cx as D } from "@linaria/core";
 import { useMastersContext as T } from "../useMastersContext.js";
 import { scrollIntoAppView as q } from "../useSdkScroll.js";
-import { useState as p, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
+import { useState as f, useMemo as E, useEffect as h, useRef as O, useCallback as w } from "react";
 import { r as b } from "../../../index-DALxy-8N.js";
-import { useStore as g } from "@streamlayer/react-polyfills";
+import { useStore as p } from "@streamlayer/react-polyfills";
 import { eventBus as C } from "@streamlayer/sdk-web-interfaces";
 import { NotificationType as a } 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 { Notification as N } 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 = (n) => {
-  const [t, u] = p(0), i = O(null), d = w((r) => {
-    i.current = r;
+  const [t, u] = f(0), i = O(null), l = w((o) => {
+    i.current = o;
   }, []);
   h(() => {
-    var l;
-    const r = (l = i.current) == null ? void 0 : l.getBoundingClientRect();
-    r && u(r.height);
+    var d;
+    const o = (d = i.current) == null ? void 0 : d.getBoundingClientRect();
+    o && u(o.height);
   }, [n]);
-  const o = w((r) => {
-    u(r);
+  const r = w((o) => {
+    u(o);
   }, []);
-  return [d, t, o];
+  return [l, t, r];
 }, z = ({
   sdk: n,
   notification: t,
   appNode: u,
   responsiveStore: i
 }) => {
-  var s, e;
+  var m, s;
   const {
-    sdkInDesktopView: d
-  } = g(i, {
-    keys: ["sdkInDesktopView"]
-  }), {
-    sdk: o
-  } = T(), [r, l, m] = j(t.id);
-  return t.type === a.QUESTION ? /* @__PURE__ */ f(D, {
+    sdk: l
+  } = T(), [r, o, d] = j(t.id);
+  return t.type === a.QUESTION ? /* @__PURE__ */ g(V, {
     children: [/* @__PURE__ */ c(A, {
       ref: r,
-      children: /* @__PURE__ */ c(V, {
+      children: /* @__PURE__ */ c(N, {
         ...t
       })
-    }), /* @__PURE__ */ f(B, {
+    }), /* @__PURE__ */ g(B, {
       style: {
-        height: t.hiding ? 0 : l
+        height: t.hiding ? 0 : o
       },
       hiding: t.hiding,
       children: [/* @__PURE__ */ c(H, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ c(V, {
+        children: /* @__PURE__ */ c(N, {
           ...t,
-          controlVideo: o == null ? void 0 : o.controlVideoPlayer
+          controlVideo: l == null ? void 0 : l.controlVideoPlayer
         })
       }), /* @__PURE__ */ c(Q, {}, t.id)]
     })]
-  }) : t.type === a.QUESTION_RESOLVED && ((e = (s = t.data) == null ? void 0 : s.question) != null && e.predictionResult) ? /* @__PURE__ */ c(P, {
+  }) : t.type === a.QUESTION_RESOLVED && ((s = (m = t.data) == null ? void 0 : m.question) != null && s.predictionResult) ? /* @__PURE__ */ c(P, {
     style: {
-      height: t.hiding ? 0 : l
+      height: t.hiding ? 0 : o
     },
-    saveHeight: m,
+    saveHeight: d,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question,
     mastersApp: !0
   }) : t.type === a.ONBOARDING ? /* @__PURE__ */ c(x, {
     style: {
-      height: t.hiding ? 0 : l
+      height: t.hiding ? 0 : o
     },
-    saveHeight: m,
+    saveHeight: d,
     sdk: n,
     notification: t,
-    sdkInDesktopView: d,
     appNode: u,
     responsiveStore: i
   }) : null;
@@ -85,47 +80,47 @@ const j = (n) => {
   setPill: t,
   appNode: u,
   headerNode: i,
-  scrollNode: d,
-  responsiveStore: o,
-  scrollStore: r
+  scrollNode: l,
+  responsiveStore: r,
+  scrollStore: o
 }) => {
-  var k, y;
+  var y, I;
   const {
-    screen: l
-  } = g(o, {
+    screen: d
+  } = p(r, {
     keys: ["screen"]
   }), {
     tabsShown: m,
     scrollPosition: s
-  } = g(r, {
+  } = p(o, {
     keys: ["tabsShown", "scrollPosition"]
   });
   h(() => {
-    o.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
-  }, [s, o, t]);
-  const e = o.get().sdkInDesktopView ? u : i;
+    r.get().sdkInDesktopView ? s < 50 && t(null) : s > -50 && t(null);
+  }, [s, r, t]);
+  const e = r.get().sdkInDesktopView ? u : i;
   return !n || !e.current ? null : b.createPortal(/* @__PURE__ */ c(U, {
-    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((y = R[(k = n.data) == null ? void 0 : k.questionType]) == null ? void 0 : y.label) || "notification"}`,
+    title: n.type === a.QUESTION_RESOLVED ? "Prediction result" : `New ${((I = R[(y = n.data) == null ? void 0 : y.questionType]) == null ? void 0 : I.label) || "notification"}`,
     onClick: () => {
-      var I;
-      o.get().sdkInDesktopView ? (I = d.current) == null || I.scrollTo({
+      var k;
+      r.get().sdkInDesktopView ? (k = l.current) == null || k.scrollTo({
         top: 0,
         behavior: "smooth"
-      }) : q(u, l.size, {
+      }) : q(u, d.size, {
         behavior: "smooth"
       }), t(null);
     },
-    className: N(m && F, "sl-pill-button")
+    className: D(m && F, "sl-pill-button")
   }), e.current);
 }, it = ({
   sdk: n,
   headerNode: t,
   scrollNode: u,
   responsiveStore: i,
-  appNode: d,
-  scrollStore: o
+  appNode: l,
+  scrollStore: r
 }) => {
-  const [r] = p(n.getNotificationsStore()), l = g(r), [m, s] = p(null), e = E(() => n.getActiveNotification(), [n, l]);
+  const [o] = f(n.getNotificationsStore()), d = p(o), [m, s] = f(null), e = E(() => n.getActiveNotification(), [n, d]);
   return h(() => {
     e && C.emit("notification", {
       action: "rendered",
@@ -136,25 +131,25 @@ const j = (n) => {
     });
   }, [e]), h(() => {
     e && (i.get().sdkInDesktopView || i.get().sdkInView) && (!i.get().sdkInDesktopView && i.get().sdkInView && s(e), i.get().sdkInDesktopView && window.requestAnimationFrame(() => {
-      o.get().scrollPosition !== 0 && s(e);
+      r.get().scrollPosition !== 0 && s(e);
     }));
   }, [e]), h(() => {
     e || s(null);
-  }, [e]), /* @__PURE__ */ f(D, {
+  }, [e]), /* @__PURE__ */ g(V, {
     children: [!m && e && /* @__PURE__ */ c(z, {
       headerNode: t,
-      appNode: d,
+      appNode: l,
       sdk: n,
       notification: e,
       responsiveStore: i
     }), m && /* @__PURE__ */ c(L, {
       pill: m,
       setPill: s,
-      appNode: d,
+      appNode: l,
       notification: e,
       headerNode: t,
       scrollNode: u,
-      scrollStore: o,
+      scrollStore: r,
       responsiveStore: i
     })]
   });

package/lib/app/masters/masters.js

@@ -1,95 +1,99 @@
 import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { cx as w } from "@linaria/core";
-import { SDKContainer as L, SDKScrollContainer as N } from "./styles.js";
-import { useSdkScroll as x } from "./useSdkScroll.js";
-import { useSdkFeature as y } from "../useSdkFeature.js";
+import { cx as A } from "@linaria/core";
+import { SDKContainer as E, SDKScrollContainer as L } from "./styles.js";
+import { useSdkScroll as M } from "./useSdkScroll.js";
+import { useSdkFeature as N } from "../useSdkFeature.js";
 import { useAnalyticsListener as h, newTabLinkListener as F } from "../../hooks/analytics.js";
-import A from "lodash.throttle";
-import { useState as b, useMemo as E, useRef as d, useEffect as p } from "react";
-import { useStore as c } from "@streamlayer/react-polyfills";
-import { FeatureType as I } from "@streamlayer/sdk-web-types";
+import x from "lodash.throttle";
+import { useState as b, useMemo as y, useCallback as C, useRef as p, useEffect as S } from "react";
+import { useStore as m } from "@streamlayer/react-polyfills";
+import { FeatureType as w } from "@streamlayer/sdk-web-types";
 import { resetCss as u } from "../../ui/theme/theme.js";
-import { BetPackOverlay as M } from "./BetPack/index.js";
-import { ActiveFeature as k, StandaloneFeature as z } from "./Features/index.js";
-import { SDKHeader as C } from "./Header/index.js";
-import { SDKNotifications as P } from "./Notifications/index.js";
-import { MastersContext as g } from "./useMastersContext.js";
-import { checkSdkInDesktopView as S, getScreenSize as v, useSdkResponsive as D } from "./useSdkResponsive.js";
-import { StreamLayerMastersThemeProvider as se } from "../../ui/theme/masters.js";
-const B = ({ sdk: e, className: t }) => {
-  const [, r] = y(e);
-  return /* @__PURE__ */ a(k, { className: t, feature: r, sdk: e });
-}, K = ({ sdk: e, className: t, appNode: r, responsiveStore: n }) => {
-  const s = c(e.featuresList.getStore());
-  return s ? Array.from(s, (o) => {
-    const i = e.getFeature(o);
-    return i ? /* @__PURE__ */ a(
+import { BetPackOverlay as I } from "./BetPack/index.js";
+import { ActiveFeature as P, StandaloneFeature as z } from "./Features/index.js";
+import { SDKHeader as g } from "./Header/index.js";
+import { SDKNotifications as B } from "./Notifications/index.js";
+import { MastersContext as D } from "./useMastersContext.js";
+import { checkSdkInDesktopView as d, getScreenSize as v, useSdkResponsive as K } from "./useSdkResponsive.js";
+import { StreamLayerMastersThemeProvider as ae } from "../../ui/theme/masters.js";
+const G = ({ sdk: e, className: t }) => {
+  const [, r] = N(e);
+  return /* @__PURE__ */ a(P, { className: t, feature: r, sdk: e });
+}, O = ({ sdk: e, className: t, appNode: r, responsiveStore: i }) => {
+  const n = m(e.featuresList.getStore());
+  return n ? Array.from(n, (o) => {
+    const c = e.getFeature(o);
+    return c ? /* @__PURE__ */ a(
       z,
       {
+        responsiveStore: i,
         className: t,
         appNode: r,
-        feature: i,
-        responsiveStore: n,
+        feature: c,
         sdk: e
       },
       o
     ) : null;
   }) : null;
-}, O = (e) => {
-  const [t, r] = b(!S(v().size)), n = d(null);
-  return p(() => {
-    const s = A(() => {
+}, R = (e) => {
+  const [t, r] = b(!d(v().size)), i = p(null);
+  return S(() => {
+    const n = x(() => {
       const o = v();
-      r(!S(o.size));
+      r(!d(o.size));
     }, 200);
-    return window.addEventListener("resize", s), () => {
-      window.removeEventListener("resize", s);
+    return window.addEventListener("resize", n), () => {
+      window.removeEventListener("resize", n);
     };
-  }, []), h(n, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(M, { ref: n, ...e, isMobile: t });
-}, R = ({ sdk: e }) => {
-  const t = d(null), r = c(e.status), n = c(e.sdkStore.slStreamId), s = d(null), [o] = D(t), [i, l] = x(t, o), m = r === "ready" && !!n.data;
-  return p(() => {
+  }, []), h(i, { enabled: !0, event: "click", listener: F }), /* @__PURE__ */ a(I, { ref: i, ...e, isMobile: t });
+}, j = ({ sdk: e }) => {
+  const t = p(null), r = m(e.status), i = m(e.sdkStore.slStreamId), n = p(null), [o] = K(t), [c, l] = M(t, o), s = r === "ready" && !!i.data;
+  return S(() => {
     window.requestAnimationFrame(() => {
       e.initializeApp().then(() => {
-        e.openFeature(I.GAMES);
+        e.openFeature(w.GAMES);
       });
     });
-  }, [e]), h(t, { enabled: !0, event: "click", listener: F }), p(() => {
+  }, [e]), h(t, { enabled: !0, event: "click", listener: F }), S(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ f(L, { ref: t, children: [
-    /* @__PURE__ */ a(C, { className: w(u, "sl-hide-on-modal"), ref: s }),
-    /* @__PURE__ */ f(N, { "data-nav": !0, className: "sl-hide-on-modal", ref: i, children: [
-      m && /* @__PURE__ */ a(
-        P,
+  }, []), /* @__PURE__ */ f(E, { ref: t, children: [
+    /* @__PURE__ */ a(g, { className: A(u), ref: n }),
+    /* @__PURE__ */ f(L, { className: "sl-hide-on-modal", ref: c, children: [
+      s && /* @__PURE__ */ a(
+        B,
         {
           sdk: e,
-          scrollNode: i,
-          headerNode: s,
+          scrollNode: c,
+          headerNode: n,
           appNode: t,
           scrollStore: l,
           responsiveStore: o
         }
       ),
-      m && /* @__PURE__ */ a(B, { className: u, sdk: e }),
-      m && /* @__PURE__ */ a(K, { responsiveStore: o, appNode: t, className: u, sdk: e })
+      s && /* @__PURE__ */ a(G, { className: u, sdk: e }),
+      s && /* @__PURE__ */ a(O, { responsiveStore: o, appNode: t, className: u, sdk: e })
     ] })
   ] });
-}, re = ({ sdk: e, betPack: t }) => {
-  const [r, n] = b(t), o = !!c(e.userId()), i = E(() => ({ sdk: e }), [e]);
-  return /* @__PURE__ */ f(g.Provider, { value: i, children: [
+}, oe = ({ sdk: e, betPack: t }) => {
+  const [r, i] = b(t), o = !!m(e.userId()), c = y(() => ({ sdk: e }), [e]), l = C(() => {
+    i(!1);
+    const s = e == null ? void 0 : e.getFeature(w.GAMES);
+    s == null || s.closeQuestion();
+  }, [e]);
+  return /* @__PURE__ */ f(D.Provider, { value: c, children: [
     r && o && /* @__PURE__ */ a(
-      O,
+      R,
       {
         sdk: e,
-        onEvent: ({ type: l }) => l === "slOpenGameCenter" ? n(!1) : () => {
+        onEvent: ({ type: s }) => s === "slOpenGameCenter" ? l() : () => {
         },
-        close: () => n(!1)
+        close: () => l()
       }
     ),
-    !r && /* @__PURE__ */ a(R, { sdk: e })
+    !r && /* @__PURE__ */ a(j, { sdk: e })
   ] });
 };
 export {
-  re as MastersApp,
-  se as StreamLayerMastersThemeProvider
+  oe as MastersApp,
+  ae as StreamLayerMastersThemeProvider
 };

package/lib/app/masters/useOrientation.d.ts

@@ -0,0 +1,3 @@
+export declare const useOrientation: () => {
+    orientation: string;
+};

package/lib/app/masters/useOrientation.js

@@ -0,0 +1,12 @@
+import { useState as i, useEffect as o } from "react";
+const a = () => {
+  const [t, n] = i(""), e = () => {
+    window.screen.orientation.type.includes("landscape") || Math.abs(window.orientation) === 90 ? n("landscape") : n("portrait");
+  };
+  return o(() => (window.screen.orientation.addEventListener("change", e), window.addEventListener("orientationchange", e), e(), () => {
+    window.screen.orientation.removeEventListener("change", e), window.removeEventListener("orientationchange", e);
+  }), []), { orientation: t };
+};
+export {
+  a as useOrientation
+};

package/lib/app/masters/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import c from "lodash.throttle";
 import { useState as m, useEffect as u } from "react";
 import { BREAKPOINTS as r } from "../../ui/theme/constants.js";
-import { m as l } from "../../index-CLJzLXks.js";
+import { m as l } from "../../index-DSi8Qgfs.js";
 const d = Object.keys(r), i = () => {
   const n = window.innerWidth;
   let e = "sm";
@@ -19,7 +19,7 @@ const d = Object.keys(r), i = () => {
 }, w = (n) => {
   var e;
   return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, k = (n) => n >= r.xl, v = (n) => {
+}, k = (n) => n >= r.lg, v = (n) => {
   const [e] = m(() => {
     const t = i();
     return l({

package/lib/app/masters/useSdkScroll.js

@@ -1,24 +1,24 @@
 import S from "lodash.throttle";
-import { useRef as m, useState as h, useEffect as b } from "react";
-import { useStore as g } from "@streamlayer/react-polyfills";
+import { useRef as m, useState as g, useEffect as h } from "react";
+import { useStore as b } from "@streamlayer/react-polyfills";
 import { BREAKPOINTS as c } from "../../ui/theme/constants.js";
-import { m as v } from "../../index-CLJzLXks.js";
-const C = (o, e, n) => {
+import { m as v } from "../../index-DSi8Qgfs.js";
+const D = (o, e, n) => {
   const t = e >= c.lg && e < c.xl ? 75 : 52;
   o.current && window.scrollTo({
     top: o.current.offsetTop - t,
     ...n
   });
-}, T = 15, D = (o, e) => {
-  const n = m(null), t = m(0), [s] = h(
+}, T = 15, L = (o, e) => {
+  const n = m(null), t = m(0), [s] = g(
     v({
       scrollPosition: 0,
       tabsShown: !0,
       scrollDirection: "forward"
     })
-  ), i = g(e);
-  return b(() => {
-    const l = window.innerWidth < c.xl ? window : n.current;
+  ), i = b(e);
+  return h(() => {
+    const l = window.innerWidth < c.lg ? window : n.current;
     if (!l)
       return () => {
       };
@@ -28,7 +28,7 @@ const C = (o, e, n) => {
       if (!u)
         return;
       let r = 0;
-      i.screen.size < c.xl ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
+      i.screen.size < c.lg ? r = ((a = o.current) == null ? void 0 : a.getBoundingClientRect().y) || 0 : r = u.scrollTop;
       const w = t.current - r;
       if (T > Math.abs(w))
         return;
@@ -45,6 +45,6 @@ const C = (o, e, n) => {
   }, [s, o, i.screen]), [n, s];
 };
 export {
-  C as scrollIntoAppView,
-  D as useSdkScroll
+  D as scrollIntoAppView,
+  L as useSdkScroll
 };

package/lib/app/useSdkResponsive.js

@@ -1,7 +1,7 @@
 import i from "lodash.throttle";
 import { useState as m, useEffect as a } from "react";
 import { BREAKPOINTS as r } from "../ui/theme/constants.js";
-import { m as u } from "../index-CLJzLXks.js";
+import { m as u } from "../index-DSi8Qgfs.js";
 const o = Object.keys(r), c = () => {
   const t = window.innerWidth;
   let e = "sm";

package/lib/app/useSdkScroll.js

@@ -3,7 +3,7 @@ import { useRef as u, useState as b, useEffect as g } from "react";
 import { useStore as k } from "@streamlayer/react-polyfills";
 import { BREAKPOINTS as a } from "../ui/theme/constants.js";
 import { checkSdkInDesktopView as m } from "./useSdkResponsive.js";
-import { m as v } from "../index-CLJzLXks.js";
+import { m as v } from "../index-DSi8Qgfs.js";
 const I = (o, e, n) => {
   const t = e >= a.lg && e < a.xl ? 75 : 52;
   o.current && window.scrollTo({