@streamlayer/react-ui 1.22.3 → 1.22.5

package/lib/app/masters/masters.js

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

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

@@ -1,4 +1,3 @@
 export declare const MastersStory: React.FC<{
-    settings?: boolean;
     betPack?: boolean;
 }>;

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

@@ -1,52 +1,40 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { MastersStreamLayerProvider as d, useStreamLayer as c } from "@streamlayer/react/masters";
-import { MastersApp as s } from "../masters.js";
-import { StreamLayerMastersThemeProvider as p } from "../../../ui/theme/masters.js";
-import { useStreamLayerDebug as m, StreamLayerDebug as h } from "../../../utils/debug/index.js";
-import { MastersLogin as u, MobileHeader as y, HostAppContent as i, Body as k, Video as v, Container as L, AppContainer as T, BackToTop as f, BackToTopLink as C } from "./components.js";
-const S = ({ betPack: n }) => {
-  const o = c();
-  return o ? /* @__PURE__ */ e(p, { style: { height: "100%" }, children: /* @__PURE__ */ e(s, { sdk: o, betPack: n }) }) : null;
-}, a = () => {
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { MastersStreamLayerProvider as d, useStreamLayer as i } from "@streamlayer/react/masters";
+import { MastersApp as l } from "../masters.js";
+import { StreamLayerMastersThemeProvider as a } from "../../../ui/theme/masters.js";
+import { useStreamLayerDebug as c } from "../../../utils/debug/index.js";
+import { MobileHeader as s, HostAppContent as t, Body as p, Video as h, Container as m, AppContainer as u, BackToTop as y, BackToTopLink as k } from "./components.js";
+const T = ({ betPack: o }) => {
+  const r = i();
+  return r ? /* @__PURE__ */ e(a, { style: { height: "100%" }, children: /* @__PURE__ */ e(l, { sdk: r, betPack: o, useContainer: !0 }) }) : null;
+}, v = () => {
   console.log("deep link handled cb");
-}, l = () => {
+}, f = () => {
   console.log("video player handled cb");
-}, K = ({ settings: n, betPack: o }) => {
-  const r = m();
-  return n ? /* @__PURE__ */ t(
+}, M = ({ betPack: o }) => {
+  const r = c();
+  return /* @__PURE__ */ n(
     d,
     {
       sdkKey: r.sdkKey,
       production: r.env === "production",
-      onDeepLinkHandled: a,
-      videoPlayerController: l,
-      children: [
-        /* @__PURE__ */ e(u, {}),
-        /* @__PURE__ */ e(h, { ...r, standalone: !0, hideAuth: !0 })
-      ]
-    }
-  ) : /* @__PURE__ */ t(
-    d,
-    {
-      sdkKey: r.sdkKey,
-      production: r.env === "production",
-      onDeepLinkHandled: a,
-      videoPlayerController: l,
+      onDeepLinkHandled: v,
+      videoPlayerController: f,
       event: r.event,
       children: [
-        /* @__PURE__ */ e(y, { children: "header" }),
-        /* @__PURE__ */ e(i, { children: "...host app content..." }),
-        /* @__PURE__ */ t(k, { children: [
-          /* @__PURE__ */ e(v, {}),
-          /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(T, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(S, { betPack: o }) }) })
+        /* @__PURE__ */ e(s, { children: "header" }),
+        /* @__PURE__ */ e(t, { children: "...host app content..." }),
+        /* @__PURE__ */ n(p, { children: [
+          /* @__PURE__ */ e(h, {}),
+          /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(u, { className: "StreamLayerSDK", children: /* @__PURE__ */ e(T, { betPack: o }) }) }) })
         ] }),
-        /* @__PURE__ */ e(i, { children: "...host app content..." }),
-        /* @__PURE__ */ e(f, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
-        /* @__PURE__ */ e(C, { href: "#", children: "BackToTop Link" })
+        /* @__PURE__ */ e(t, { style: { height: 3e3 }, children: "...host app content..." }),
+        /* @__PURE__ */ e(y, { onClick: () => document.documentElement.scrollTop = 0, children: "BackToTop" }),
+        /* @__PURE__ */ e(k, { href: "#", children: "BackToTop Link" })
       ]
     }
   );
 };
 export {
-  K as MastersStory
+  M as MastersStory
 };

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

@@ -1,4 +1,5 @@
 export declare const SDKContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const mobileSdkContainer: import('@linaria/core').LinariaClassName;
 export declare const SDKScrollContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const SDKContentContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const SDKWhiteContainer: {

package/lib/app/masters/styles.js

@@ -1,34 +1,35 @@
 import { styled as s } from "@linaria/react";
-const t = /* @__PURE__ */ s("div")({
+const o = /* @__PURE__ */ s("div")({
   name: "SDKContainer",
   class: "s8zgqze",
   propsAsIs: !1
-}), o = /* @__PURE__ */ s("div")({
+}), t = "m6t897k", r = /* @__PURE__ */ s("div")({
   name: "SDKScrollContainer",
-  class: "s6t897k",
+  class: "sw7pkvp",
   propsAsIs: !1
 }), n = /* @__PURE__ */ s("div")({
   name: "SDKContentContainer",
-  class: "sw7pkvp",
+  class: "s14gkn7u",
   propsAsIs: !1
-}), e = () => n, r = /* @__PURE__ */ s(e())({
+}), e = () => n, i = /* @__PURE__ */ s(e())({
   name: "SDKWhiteContainer",
-  class: "s14gkn7u",
+  class: "s1yxstm9",
   propsAsIs: !0
-}), i = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "TabsContainer",
-  class: "t1yxstm9",
+  class: "tdpty1s",
   propsAsIs: !1
-}), p = /* @__PURE__ */ s("div")({
+}), l = /* @__PURE__ */ s("div")({
   name: "UserSummaryContainer",
-  class: "udpty1s",
+  class: "u136a59y",
   propsAsIs: !1
 });
 export {
-  t as SDKContainer,
+  o as SDKContainer,
   n as SDKContentContainer,
-  o as SDKScrollContainer,
-  r as SDKWhiteContainer,
-  i as TabsContainer,
-  p as UserSummaryContainer
+  r as SDKScrollContainer,
+  i as SDKWhiteContainer,
+  p as TabsContainer,
+  l as UserSummaryContainer,
+  t as mobileSdkContainer
 };

package/lib/app/masters/useSdkResponsive.js

@@ -1,13 +1,13 @@
 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-DSi8Qgfs.js";
+import { m as p } from "../../index-DSi8Qgfs.js";
 const d = Object.keys(r), i = () => {
-  const n = window.innerWidth;
+  const t = window.innerWidth;
   let e = "sm";
-  for (let t = d.length - 1; t > 0; t--) {
-    const s = d[t];
-    if (!(n < r[s]) && n >= r[s]) {
+  for (let n = d.length - 1; n > 0; n--) {
+    const s = d[n];
+    if (!(t < r[s]) && t >= r[s]) {
       e = s;
       break;
     }
@@ -16,30 +16,31 @@ const d = Object.keys(r), i = () => {
     name: e,
     size: r[e]
   };
-}, w = (n) => {
-  var e;
-  return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, k = (n) => n >= r.lg, v = (n) => {
+}, w = (t) => {
+  var n;
+  const e = (n = t.current) == null ? void 0 : n.getBoundingClientRect();
+  return e ? e.y > -e.height && e.y < window.innerHeight : !1;
+}, k = (t) => t >= r.lg, h = (t) => {
   const [e] = m(() => {
-    const t = i();
-    return l({
+    const n = i();
+    return p({
       screen: i(),
-      sdkInView: w(n),
-      sdkInDesktopView: k(t.size)
+      sdkInView: w(t),
+      sdkInDesktopView: k(n.size)
     });
   });
   return u(() => {
-    const t = c(() => {
-      e.setKey("sdkInView", w(n));
+    const n = c(() => {
+      e.setKey("sdkInView", w(t));
     }, 200), s = c(() => {
       const o = i();
       e.setKey("screen", o), e.setKey("sdkInDesktopView", k(o.size));
     }, 200);
-    return window.addEventListener("scroll", t), window.addEventListener("resize", s), () => {
-      window.removeEventListener("scroll", t), window.removeEventListener("resize", s);
+    return n(), s(), window.addEventListener("scroll", n), window.addEventListener("resize", s), () => {
+      window.removeEventListener("scroll", n), window.removeEventListener("resize", s);
     };
-  }, [e, n]), [e];
+  }, [e, t]), [e];
 };
 export {
-  v as useSdkResponsive
+  h as useSdkResponsive
 };

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

@@ -8,5 +8,5 @@ type ScrollData = {
 };
 export type ScrollStore = MapStore<ScrollData>;
 export declare const scrollIntoAppView: (appNode: AppNodeRef, screenSize: number, options?: ScrollIntoViewOptions) => void;
-export declare const useSdkScroll: (appNode: AppNodeRef, responsiveStore: ResponsiveStore) => [ScrollNodeRef, ScrollStore];
+export declare const useSdkScroll: (appNode: AppNodeRef, responsiveStore: ResponsiveStore, useContainer?: boolean) => [ScrollNodeRef, ScrollStore];
 export {};

package/lib/app/masters/useSdkScroll.js

@@ -1,50 +1,50 @@
-import S from "lodash.throttle";
-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-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
+import g from "lodash.throttle";
+import { useRef as m, useState as h, useEffect as b } from "react";
+import { useStore as v } from "@streamlayer/react-polyfills";
+import { BREAKPOINTS as d } from "../../ui/theme/constants.js";
+import { m as E } from "../../index-DSi8Qgfs.js";
+const y = (e, i, o) => {
+  var t;
+  (t = e.current) == null || t.scrollTo({
+    top: 0,
+    ...o
   });
-}, T = 15, L = (o, e) => {
-  const n = m(null), t = m(0), [s] = g(
-    v({
+}, P = 15, z = (e, i, o) => {
+  const t = m(null), c = m(0), [s] = h(
+    E({
       scrollPosition: 0,
-      tabsShown: !0,
+      tabsShown: !1,
       scrollDirection: "forward"
     })
-  ), i = b(e);
-  return h(() => {
-    const l = window.innerWidth < c.lg ? window : n.current;
-    if (!l)
+  ), a = v(i);
+  return b(() => {
+    const n = window.innerWidth < d.lg && !o ? window : t.current;
+    if (!n)
       return () => {
       };
-    const f = S((d) => {
-      var a;
-      const u = d.target;
-      if (!u)
+    const l = g((p) => {
+      var u;
+      const f = p.target;
+      if (!f)
         return;
       let r = 0;
-      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))
+      a.screen.size < d.lg && !o ? r = ((u = e.current) == null ? void 0 : u.getBoundingClientRect().y) || 0 : r = f.scrollTop;
+      const w = c.current - r;
+      if (P > Math.abs(w))
         return;
-      const p = t.current < r ? "forward" : "backward";
-      t.current = r, s.set({
+      const S = c.current < r ? "forward" : "backward";
+      c.current = r, s.set({
         scrollPosition: Math.round(r),
-        scrollDirection: p,
+        scrollDirection: S,
         tabsShown: s.get().tabsShown
       });
     }, 200);
-    return l.addEventListener("scroll", f), () => {
-      l.removeEventListener("scroll", f);
+    return l({ target: n }), n.addEventListener("scroll", l), () => {
+      n.removeEventListener("scroll", l);
     };
-  }, [s, o, i.screen]), [n, s];
+  }, [s, e, a.screen, o]), [t, s];
 };
 export {
-  D as scrollIntoAppView,
-  L as useSdkScroll
+  y as scrollIntoAppView,
+  z as useSdkScroll
 };