@streamlayer/react-ui 1.19.0 → 1.20.0

package/lib/app/masters/masters.js

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

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

@@ -10,6 +10,8 @@ type ResponsiveData = {
     sdkInView: boolean;
     sdkInDesktopView: boolean;
 };
+export declare const getScreenSize: () => ResponsiveData["screen"];
+export declare const checkSdkInDesktopView: (screenSize: number) => boolean;
 export type ResponsiveStore = MapStore<ResponsiveData>;
 export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];
 export {};

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-BEm7B1u1.js";
+import { m as l } from "../../index-CLJzLXks.js";
 const d = Object.keys(r), i = () => {
   const n = window.innerWidth;
   let e = "sm";
@@ -41,5 +41,7 @@ const d = Object.keys(r), i = () => {
   }, [e, n]), [e];
 };
 export {
+  k as checkSdkInDesktopView,
+  i as getScreenSize,
   v as useSdkResponsive
 };

package/lib/app/masters/useSdkScroll.js

@@ -2,7 +2,7 @@ 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 { BREAKPOINTS as c } from "../../ui/theme/constants.js";
-import { m as v } from "../../index-BEm7B1u1.js";
+import { m as v } from "../../index-CLJzLXks.js";
 const C = (o, e, n) => {
   const t = e >= c.lg && e < c.xl ? 75 : 52;
   o.current && window.scrollTo({

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-BEm7B1u1.js";
+import { m as u } from "../index-CLJzLXks.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-BEm7B1u1.js";
+import { m as v } from "../index-CLJzLXks.js";
 const I = (o, e, n) => {
   const t = e >= a.lg && e < a.xl ? 75 : 52;
   o.current && window.scrollTo({