@streamlayer/react-ui 1.9.0 → 1.10.0

package/lib/app/masters/masters.js

@@ -1,25 +1,25 @@
 import { jsx as n, jsxs as v } from "react/jsx-runtime";
 import { useStore as C } from "@nanostores/react";
-import { SDKContainer as x, SDKScrollContainer as A } from "../styles.js";
-import { useSdkFeature as F } from "../useSdkFeature.js";
-import { useSdkResponsive as M } from "../useSdkResponsive.js";
-import { useSdkScroll as b } from "../useSdkScroll.js";
-import { useAnalyticsListener as d, newTabLinkListener as D, appScrollListener as I, appClickListener as B } from "../../hooks/analytics.js";
-import { useRef as S, useMemo as T, useEffect as j } from "react";
+import { SDKContainer as x, SDKScrollContainer as A } from "./styles.js";
+import { useSdkScroll as F } from "./useSdkScroll.js";
+import { useSdkFeature as M } from "../useSdkFeature.js";
+import { useAnalyticsListener as d, newTabLinkListener as b, appScrollListener as D, appClickListener as I } from "../../hooks/analytics.js";
+import { useRef as S, useMemo as B, useEffect as T } from "react";
 import { resetCss as p } from "../../ui/theme/theme.js";
-import { ActiveFeature as k, StandaloneFeature as E } from "./Features/index.js";
-import { MastersNavigation as K } from "./Navigation/MastersNavigation/index.js";
-import { SDKNotifications as O } from "./Notifications/index.js";
-import { useMastersApp as R } from "./useMastersApp.js";
-import { MastersContext as w } from "./useMastersContext.js";
+import { ActiveFeature as j, StandaloneFeature as k } from "./Features/index.js";
+import { MastersNavigation as E } from "./Navigation/MastersNavigation/index.js";
+import { SDKNotifications as K } from "./Notifications/index.js";
+import { useMastersApp as O } from "./useMastersApp.js";
+import { MastersContext as R } from "./useMastersContext.js";
+import { useSdkResponsive as w } from "./useSdkResponsive.js";
 import { StreamLayerMastersThemeProvider as ce } from "../../ui/theme/masters.js";
 import { ChannelsButtonId as P } from "../../ui/navigation/button/Channels.js";
 import { LeaderBoardButtonId as G } from "../../ui/navigation/button/LeaderBoard.js";
 import { FeaturedGroupsButtonId as V } from "../../ui/navigation/button/FeaturedGroups.js";
 const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, responsiveStore: o }) => {
-  const [, r] = F(e);
+  const [, r] = M(e);
   return /* @__PURE__ */ n(
-    k,
+    j,
     {
       className: i,
       scrollNode: s,
@@ -35,7 +35,7 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
   return s ? Array.from(s, (o) => {
     const r = e.getFeature(o);
     return r ? /* @__PURE__ */ n(
-      E,
+      k,
       {
         className: i,
         appNode: l,
@@ -47,24 +47,24 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
     ) : null;
   }) : null;
 }, ie = ({ sdk: e, overlays: i, children: l }) => {
-  const t = S(null), s = S(null), [o] = M(t), [r, f] = b(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = R(e);
-  d(t, { enabled: a, event: "click", listener: D }), d(r, {
+  const t = S(null), s = S(null), [o] = w(t), [r, f] = F(t, o), { sdkEnabled: a, sdkReady: c, activeOverlay: m, activateAndLoadOverlay: h, activateEventWithId: N, deactivate: g, isLogged: y } = O(e);
+  d(t, { enabled: a, event: "click", listener: b }), d(r, {
     enabled: a,
     event: "scrollend",
-    listener: I,
+    listener: D,
     useDomNode: !0
   }), d(r, {
     enabled: a,
     event: "click",
-    listener: B,
+    listener: I,
     useDomNode: !0
   });
-  const L = T(() => ({ sdk: e }), [e]);
-  return j(() => {
+  const L = B(() => ({ sdk: e }), [e]);
+  return T(() => {
     import("./Features/Gamification/gamification-feature.js");
-  }, []), /* @__PURE__ */ n(w.Provider, { value: L, children: /* @__PURE__ */ v(x, { ref: t, children: [
+  }, []), /* @__PURE__ */ n(R.Provider, { value: L, children: /* @__PURE__ */ v(x, { ref: t, children: [
     a && /* @__PURE__ */ n(
-      K,
+      E,
       {
         ref: s,
         sdkReady: c,
@@ -80,7 +80,7 @@ const W = ({ sdk: e, className: i, scrollStore: l, appNode: t, scrollNode: s, re
     ),
     /* @__PURE__ */ v(A, { className: "sl-hide-on-modal", ref: r, "data-nav": a.toString(), children: [
       c && /* @__PURE__ */ n(
-        O,
+        K,
         {
           sdk: e,
           scrollNode: r,

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

@@ -0,0 +1,20 @@
+export declare const SDKContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+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: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const TabsContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const LeaderboardContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const TabsNavContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
+export declare const UserSummaryContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/{styles.js → masters/styles.js}

@@ -1,44 +1,44 @@
 import { styled as s } from "@linaria/react";
 const i = /* @__PURE__ */ s("div")({
   name: "SDKContainer",
-  class: "s2j5adf",
+  class: "s8zgqze",
   propsAsIs: !1
-}), c = /* @__PURE__ */ s("div")({
+}), p = /* @__PURE__ */ s("div")({
   name: "SDKScrollContainer",
-  class: "st9ayqn",
+  class: "s6t897k",
   propsAsIs: !1
 }), a = /* @__PURE__ */ s("div")({
   name: "SDKContentContainer",
-  class: "s6rlym7",
+  class: "sw7pkvp",
   propsAsIs: !1
 }), e = () => a, n = /* @__PURE__ */ s(e())({
   name: "SDKWhiteContainer",
-  class: "s1trfff0",
+  class: "s14gkn7u",
   propsAsIs: !0
-}), l = /* @__PURE__ */ s("div")({
+}), c = /* @__PURE__ */ s("div")({
   name: "TabsContainer",
-  class: "t87r8je",
+  class: "t1yxstm9",
   propsAsIs: !1
-}), o = () => n, p = /* @__PURE__ */ s(o())({
+}), o = () => n, l = /* @__PURE__ */ s(o())({
   name: "LeaderboardContainer",
-  class: "l1aiq1lq",
+  class: "ldpty1s",
   propsAsIs: !0
-}), r = () => n, C = /* @__PURE__ */ s(r())({
+}), t = () => n, C = /* @__PURE__ */ s(t())({
   name: "TabsNavContainer",
-  class: "t1o5m8d1",
+  class: "t136a59y",
   propsAsIs: !0
 }), m = /* @__PURE__ */ s("div")({
   name: "UserSummaryContainer",
-  class: "uqh0y7s",
+  class: "u11vnm9m",
   propsAsIs: !1
 });
 export {
-  p as LeaderboardContainer,
+  l as LeaderboardContainer,
   i as SDKContainer,
   a as SDKContentContainer,
-  c as SDKScrollContainer,
+  p as SDKScrollContainer,
   n as SDKWhiteContainer,
-  l as TabsContainer,
+  c as TabsContainer,
   C as TabsNavContainer,
   m as UserSummaryContainer
 };

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

@@ -0,0 +1,15 @@
+import { AppNodeRef } from '..';
+import { MapStore } from 'nanostores';
+import { BREAKPOINTS } from '../../ui/theme/constants';
+type BREAKPOINTS_KEYS = keyof typeof BREAKPOINTS;
+type ResponsiveData = {
+    screen: {
+        name: BREAKPOINTS_KEYS;
+        size: (typeof BREAKPOINTS)[BREAKPOINTS_KEYS];
+    };
+    sdkInView: boolean;
+    sdkInDesktopView: boolean;
+};
+export type ResponsiveStore = MapStore<ResponsiveData>;
+export declare const useSdkResponsive: (appNode: AppNodeRef) => [ResponsiveStore];
+export {};

package/lib/app/masters/useSdkResponsive.js

@@ -0,0 +1,45 @@
+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-CZvwzN5o.js";
+const d = Object.keys(r), i = () => {
+  const n = 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]) {
+      e = s;
+      break;
+    }
+  }
+  return {
+    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.xl, v = (n) => {
+  const [e] = m(() => {
+    const t = i();
+    return l({
+      screen: i(),
+      sdkInView: w(n),
+      sdkInDesktopView: k(t.size)
+    });
+  });
+  return u(() => {
+    const t = c(() => {
+      e.setKey("sdkInView", w(n));
+    }, 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);
+    };
+  }, [e, n]), [e];
+};
+export {
+  v as useSdkResponsive
+};

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

@@ -0,0 +1,12 @@
+import { ScrollNodeRef, AppNodeRef } from '..';
+import { MapStore } from 'nanostores';
+import { ResponsiveStore } from './useSdkResponsive';
+type ScrollData = {
+    scrollPosition: number;
+    tabsShown?: boolean;
+    scrollDirection: 'forward' | 'backward';
+};
+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 {};

package/lib/app/masters/useSdkScroll.js

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

package/lib/app/useSdkResponsive.d.ts

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

package/lib/app/useSdkResponsive.js

@@ -1,13 +1,13 @@
-import c from "lodash.throttle";
-import { useState as m, useEffect as u } from "react";
+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 l } from "../index-CZvwzN5o.js";
-const d = Object.keys(r), i = () => {
-  const n = window.innerWidth;
+import { m as u } from "../index-CZvwzN5o.js";
+const o = Object.keys(r), c = () => {
+  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 = o.length - 1; n > 0; n--) {
+    const s = o[n];
+    if (!(t < r[s]) && t >= r[s]) {
       e = s;
       break;
     }
@@ -16,30 +16,28 @@ const d = Object.keys(r), i = () => {
     name: e,
     size: r[e]
   };
-}, w = (n) => {
+}, d = (t) => {
   var e;
-  return (((e = n.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
-}, k = (n) => n >= r.xl, v = (n) => {
-  const [e] = m(() => {
-    const t = i();
-    return l({
-      screen: i(),
-      sdkInView: w(n),
-      sdkInDesktopView: k(t.size)
-    });
-  });
-  return u(() => {
-    const t = c(() => {
-      e.setKey("sdkInView", w(n));
-    }, 200), s = c(() => {
-      const o = i();
-      e.setKey("screen", o), e.setKey("sdkInDesktopView", k(o.size));
+  return (((e = t.current) == null ? void 0 : e.getBoundingClientRect().y) || 0) < -68;
+}, w = () => window.matchMedia("(orientation: landscape)").matches, h = (t) => {
+  const [e] = m(() => u({
+    screen: c(),
+    sdkInView: d(t),
+    sdkInDesktopView: w()
+  }));
+  return a(() => {
+    const n = i(() => {
+      e.setKey("sdkInView", d(t));
+    }, 200), s = i(() => {
+      const k = c();
+      e.setKey("screen", k), e.setKey("sdkInDesktopView", w());
     }, 200);
-    return window.addEventListener("scroll", t), window.addEventListener("resize", s), () => {
-      window.removeEventListener("scroll", t), window.removeEventListener("resize", s);
+    return 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
+  w as checkSdkInDesktopView,
+  h as useSdkResponsive
 };

package/lib/app/useSdkScroll.js

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