@streamlayer/react-ui 1.22.4 → 1.22.5

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
 };