@streamlayer/react-ui 0.84.0 → 0.85.0

package/lib/styles_hxnaic-4ed993c7.js

@@ -0,0 +1 @@
+

package/lib/ui/app/Features/Gamification/Leaderboard.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
+import { ScrollStore } from '../../../app/useSdkScroll';
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;
-    hideTabs: (hide: boolean) => void;
+    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollStore: ScrollStore;
 }>;

package/lib/ui/app/Features/Gamification/Leaderboard.js

@@ -1,37 +1,34 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { useStore as i } from "@nanostores/react";
-import n from "lodash.throttle";
-import { useRef as p, useCallback as c } from "react";
-import { LeaderboardList as f } from "../../../gamification/leaderboard/index.js";
-import { Friends as d } from "./Friends.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../gamification/leaderboard/list-item/index.js";
-import "../../../../utils/common.js";
-import "../../../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
+import "react";
 import "../../../icons/index.js";
-import "../../../gamification/leaderboard/styles.js";
+import "../../../gamification/leaderboard/list-item/styles.js";
+import "../../../../styles_hxnaic-4ed993c7.js";
+import { LeaderboardStaticList as s } from "../../../gamification/leaderboard/static.js";
+import { Friends as d } from "./Friends.js";
+import "react-infinite-scroller";
+import "../../../gamification/leaderboard/list-item/index.js";
+import "../../../../utils/common.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-const F = ({ gamification: r, hideTabs: o }) => {
-  const { data: e } = i(r.leaderboardList.$store), s = p(0), m = c(
-    n((t) => {
-      Math.abs(s.current - t.scrollOffset) < 112 || (s.current = t.scrollOffset, o(t.scrollOffset !== 0 && t.scrollDirection === "forward"));
-    }, 200),
-    [o]
-  );
-  return e != null && e.length ? /* @__PURE__ */ l(
-    f,
+const F = ({ gamification: r, scrollNode: o, scrollStore: p }) => {
+  const { data: e, hasMore: m } = i(r.leaderboardList.$store);
+  return e != null && e.length ? /* @__PURE__ */ t(
+    s,
     {
-      fetchMore: r.leaderboardList.fetchMore,
       items: e,
-      onScroll: m,
+      scrollNode: o,
+      scrollStore: p,
+      fetchMore: r.leaderboardList.fetchMore,
+      hasMore: m,
       openItemDetail: r.openUser,
       currentUserId: r.currentUserId.get()
     }
-  ) : /* @__PURE__ */ l(d, { deepLink: r.deepLink });
+  ) : /* @__PURE__ */ t(d, { deepLink: r.deepLink });
 };
 export {
   F as Leaderboard

package/lib/ui/app/Features/Gamification/Tabs.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { type Gamification } from '@streamlayer/feature-gamification';
+import { ScrollStore } from '../../../app/useSdkScroll';
 export declare const Tabs: React.FC<{
     gamification: Gamification;
+    scrollStore: ScrollStore;
+    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    className?: string;
 }>;

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,23 +1,23 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import S from "lodash.throttle";
-import { useState as d, useRef as u, useTransition as E, useCallback as y, useEffect as C } from "react";
-import { SDKWhiteContainer as f, SDKScrollContainer as D, SDKContentContainer as L } from "../../styles.js";
-import { ActivePages as s, Tabs as A } from "../../../gamification/tabs/index.js";
-import { Leaderboard as P } from "./Leaderboard.js";
-import { QuestionsList as R } from "./QuestionsList.js";
-import { UserSummary as w } from "./UserSummary.js";
+import { jsxs as a, jsx as t, Fragment as T } from "react/jsx-runtime";
+import { useState as d, useTransition as b, useEffect as y } from "react";
+import { SDKWhiteContainer as m, SDKContentContainer as x } from "../../styles.js";
+import { ActivePages as e, Tabs as v } from "../../../gamification/tabs/index.js";
+import { Leaderboard as D } from "./Leaderboard.js";
+import { QuestionsList as A } from "./QuestionsList.js";
+import { UserSummary as E } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
-import "../../../gamification/leaderboard/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
+import "../../../icons/index.js";
+import "../../../gamification/leaderboard/list-item/styles.js";
+import "../../../../styles_hxnaic-4ed993c7.js";
+import "../../../gamification/leaderboard/static.js";
+import "react-infinite-scroller";
 import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../../utils/common.js";
-import "../../../gamification/leaderboard/list-item/styles.js";
-import "../../../icons/index.js";
-import "../../../gamification/leaderboard/styles.js";
 import "./Friends.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
@@ -47,76 +47,38 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const Lr = ({
-  gamification: i
-}) => {
-  const [h, b] = d(!1), [o, T] = d(s.HOME), m = u(null), e = u(0), [g, l] = E(), v = (r) => {
-    l(() => T(r));
-  }, p = (r) => {
-    l(() => b(r));
-  }, c = y(S(() => {
-    const r = m.current;
-    if (!r)
-      return;
-    const {
-      scrollTop: n
-    } = r;
-    if (n === 0) {
-      e.current = 0, p(!1);
+const xt = ({ gamification: i, className: c, scrollStore: r, scrollNode: u }) => {
+  const [f, l] = d(!1), [p, h] = d(e.HOME), [, n] = b(), g = (o) => {
+    n(() => h(o));
+  }, s = (o) => {
+    n(() => l(o));
+  };
+  return y(() => r.listen((o) => {
+    if (o.scrollPosition === 0) {
+      s(!1), r.setKey("tabsShown", !1);
       return;
     }
-    if (Math.abs(e.current - n) < 112)
-      return;
-    const x = e.current < n ? "forward" : "backward";
-    e.current = n, p(x === "forward");
-  }, 200), []);
-  return C(() => {
-    const r = m.current;
-    return r ? (o === s.HOME && r.addEventListener("scroll", c), () => {
-      r.removeEventListener("scroll", c);
-    }) : () => {
-    };
-  }, [o, c]), /* @__PURE__ */ a("div", {
-    style: {
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      overflow: "hidden"
-    },
-    children: [g, /* @__PURE__ */ t(f, {
-      style: {
-        paddingBottom: "4px",
-        transition: "margin-top 0.2s ease-in-out",
-        marginTop: h ? "-56px" : "0px"
-      },
-      children: /* @__PURE__ */ t(A, {
-        activePage: o,
-        toggleActivePage: v
-      })
-    }), o === s.HOME && /* @__PURE__ */ a(D, {
-      ref: m,
-      children: [/* @__PURE__ */ t(f, {
+    s(o.scrollDirection === "forward"), r.setKey("tabsShown", o.scrollDirection !== "forward");
+  }), [r]), /* @__PURE__ */ a("div", { className: c, children: [
+    /* @__PURE__ */ t(
+      m,
+      {
         style: {
-          paddingTop: "12px"
+          paddingBottom: "8px",
+          position: "sticky",
+          transition: "top calc(var(--animation-duration) / 2) var(--animation-function)",
+          top: f ? "-60px" : "0px"
         },
-        children: /* @__PURE__ */ t(w, {
-          userSummary: i.userSummary
-        })
-      }), /* @__PURE__ */ t(L, {
-        children: /* @__PURE__ */ t(R, {
-          openQuestion: i.openQuestion,
-          store: i.feedList.getStore()
-        })
-      })]
-    }), o === s.LEADERBOARD && /* @__PURE__ */ t("div", {
-      className: "c1bp9dj2",
-      children: /* @__PURE__ */ t(P, {
-        gamification: i,
-        hideTabs: p
-      })
-    })]
-  });
+        children: /* @__PURE__ */ t(v, { activePage: p, toggleActivePage: g })
+      }
+    ),
+    p === e.HOME && /* @__PURE__ */ a(T, { children: [
+      /* @__PURE__ */ t(m, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(E, { userSummary: i.userSummary }) }),
+      /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(A, { openQuestion: i.openQuestion, store: i.feedList.getStore() }) })
+    ] }),
+    p === e.LEADERBOARD && /* @__PURE__ */ t(m, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(D, { scrollStore: r, scrollNode: u, gamification: i }) })
+  ] });
 };
 export {
-  Lr as Tabs
+  xt as Tabs
 };

package/lib/ui/app/Features/Gamification/gamification-feature.js

@@ -2,13 +2,15 @@ import { GamificationOverlay as o } from "./index.js";
 import "react/jsx-runtime";
 import "@linaria/react";
 import "@nanostores/react";
+import "../../../../index-ba93b6b2.js";
+import "../../../../index-39a0b9b6.js";
+import "react";
 import "../../styles.js";
 import "../../../gamification/detail/header/index.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
-import "react";
 import "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
@@ -48,17 +50,17 @@ import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
 import "./Tabs.js";
-import "lodash.throttle";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
-import "../../../gamification/leaderboard/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
-import "../../../gamification/leaderboard/styles.js";
+import "../../../../styles_hxnaic-4ed993c7.js";
+import "../../../gamification/leaderboard/static.js";
+import "react-infinite-scroller";
+import "../../../gamification/leaderboard/list-item/index.js";
 import "./Friends.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";

package/lib/ui/app/Features/Gamification/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { type Gamification as GamificationClass } from '@streamlayer/feature-gamification';
+import { ScrollStore } from '../../../app/useSdkScroll';
 export declare const GamificationOverlay: React.FC<{
     gamification: GamificationClass;
     className?: string;
+    scrollStore: ScrollStore;
+    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
 }>;

package/lib/ui/app/Features/Gamification/index.js

@@ -1,17 +1,19 @@
-import { jsxs as m, Fragment as a, jsx as o } from "react/jsx-runtime";
-import { styled as s } from "@linaria/react";
-import { useStore as e } from "@nanostores/react";
-import { SDKWhiteContainer as c, SDKScrollContainer as l } from "../../styles.js";
-import { VoteHeader as d } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as u } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as h } from "../../../show-in/index.js";
-import { Question as f } from "./Question.js";
+import { jsxs as e, Fragment as d, jsx as t } from "react/jsx-runtime";
+import { styled as a } from "@linaria/react";
+import { useStore as n } from "@nanostores/react";
+import { r as s } from "../../../../index-ba93b6b2.js";
+import { SDKWhiteContainer as f } from "../../styles.js";
+import { VoteHeader as h } from "../../../gamification/detail/header/index.js";
+import { UserStatistics as x } from "../../../gamification/user-statistics/index.js";
+import { ShowIn as U } from "../../../show-in/index.js";
+import { Question as C } from "./Question.js";
 import { Tabs as S } from "./Tabs.js";
+import "../../../../index-39a0b9b6.js";
+import "react";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
 import "../../../icons/index.js";
-import "react";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -47,17 +49,17 @@ import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
-import "lodash.throttle";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
-import "../../../gamification/leaderboard/index.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
-import "../../../gamification/leaderboard/list-item/index.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
-import "../../../gamification/leaderboard/styles.js";
+import "../../../../styles_hxnaic-4ed993c7.js";
+import "../../../gamification/leaderboard/static.js";
+import "react-infinite-scroller";
+import "../../../gamification/leaderboard/list-item/index.js";
 import "./Friends.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
@@ -73,53 +75,55 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const C = () => h, n = /* @__PURE__ */ s(C())({
+const I = () => U, c = /* @__PURE__ */ a(I())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), U = /* @__PURE__ */ s("div")({
+}), O = /* @__PURE__ */ a("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), x = ({
+}), Q = ({
   correct: r,
-  incorrect: t
+  incorrect: m
 }) => {
-  const i = r + t;
-  return i === 0 ? 0 : Math.round(r / i * 100);
-}, Wr = ({
+  const o = r + m;
+  return o === 0 ? 0 : Math.round(r / o * 100);
+}, Br = ({
   gamification: r,
-  className: t
+  scrollStore: m,
+  className: o,
+  appNode: i,
+  scrollNode: l
 }) => {
-  const i = e(r.openedQuestion.$store), p = e(r.openedUser);
-  return /* @__PURE__ */ m(a, {
-    children: [i && /* @__PURE__ */ o(n, {
-      className: t,
-      children: /* @__PURE__ */ o(f, {
+  const u = n(r.openedQuestion.$store), p = n(r.openedUser);
+  return /* @__PURE__ */ e(d, {
+    children: [u && i.current && s.createPortal(/* @__PURE__ */ t(c, {
+      className: o,
+      children: /* @__PURE__ */ t(C, {
         gamification: r
       })
-    }), p && /* @__PURE__ */ o(n, {
-      className: t,
-      children: /* @__PURE__ */ m(U, {
-        children: [/* @__PURE__ */ o(d, {
+    }), i.current), p && i.current && s.createPortal(/* @__PURE__ */ t(c, {
+      className: o,
+      children: /* @__PURE__ */ e(O, {
+        children: [/* @__PURE__ */ t(h, {
           label: "Friend's Rank",
           close: r.closeUser
-        }), /* @__PURE__ */ o(c, {
-          children: /* @__PURE__ */ o(u, {
+        }), /* @__PURE__ */ t(f, {
+          children: /* @__PURE__ */ t(x, {
             ...p,
-            successRate: x(p)
+            successRate: Q(p)
           })
         })]
       })
-    }), /* @__PURE__ */ o(l, {
-      className: t,
-      "data-nav": "true",
-      children: /* @__PURE__ */ o(S, {
-        gamification: r
-      })
+    }), i.current), /* @__PURE__ */ t(S, {
+      scrollStore: m,
+      scrollNode: l,
+      className: o,
+      gamification: r
     })]
   });
 };
 export {
-  Wr as GamificationOverlay
+  Br as GamificationOverlay
 };

package/lib/ui/app/Features/index.d.ts

@@ -1,9 +1,13 @@
 /// <reference types="react" />
 import { Features } from '@streamlayer/sdk-web-features';
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { ScrollStore } from '../../app/useSdkScroll';
 /** render feature by type */
 export declare const ActiveFeature: React.FC<{
     sdk: StreamLayerSDK;
     feature: Features | null;
+    scrollStore: ScrollStore;
+    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
     className?: string;
 }>;

package/lib/ui/app/Features/index.js

@@ -1,23 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
-import { lazy as o, useMemo as l, Suspense as m } from "react";
-import { FeatureType as p } from "@streamlayer/sdk-web-types";
+import { jsx as i } from "react/jsx-runtime";
+import { lazy as l, useMemo as u, Suspense as f } from "react";
+import { FeatureType as a } from "@streamlayer/sdk-web-types";
 import { FeatureProvider as c } from "./FeatureProvider.js";
 import "@nanostores/react";
 import "@streamlayer/sdk-web-interfaces";
-const u = o(() => import("./Gamification/gamification-feature.js")), s = ({
-  sdk: e,
-  feature: t,
-  className: i
-}) => {
-  const n = l(() => t && t.featureConfig.get().type === p.GAMES ? /* @__PURE__ */ r(c, { className: i, sdk: e, feature: t, children: /* @__PURE__ */ r(u, { className: i, gamification: t, sdk: e }) }) : null, [e, t, i]);
-  return /* @__PURE__ */ r(
-    m,
+const g = l(() => import("./Gamification/gamification-feature.js")), x = ({ sdk: e, feature: t, className: r, scrollStore: n, appNode: o, scrollNode: m }) => {
+  const p = u(() => t && t.featureConfig.get().type === a.GAMES ? /* @__PURE__ */ i(c, { className: r, sdk: e, feature: t, children: /* @__PURE__ */ i(
+    g,
     {
-      fallback: /* @__PURE__ */ r("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
-      children: n
+      appNode: o,
+      scrollStore: n,
+      scrollNode: m,
+      className: r,
+      gamification: t
+    }
+  ) }) : null, [e, t, r, n, m, o]);
+  return /* @__PURE__ */ i(
+    f,
+    {
+      fallback: /* @__PURE__ */ i("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%" }, children: "page loading..." }),
+      children: p
     }
   );
 };
 export {
-  s as ActiveFeature
+  x as ActiveFeature
 };

package/lib/ui/app/Navigation/MastersNavigation/index.js

@@ -11,7 +11,7 @@ import "../../../navigation/button/styles.js";
 import "../../../../LeaderBoard_16p26hz-4ed993c7.js";
 import "../../../navigation/index.js";
 import "../../../../index_4nhkck-4ed993c7.js";
-import "../../../../masters_k70xsy-4ed993c7.js";
+import "../../../../masters_1wv7w2k-4ed993c7.js";
 const b = ({ activeOverlay: o, setActiveOverlay: t, sdkReady: p, className: d }) => /* @__PURE__ */ a(B, { className: d, children: [
   /* @__PURE__ */ r(u, { active: o === i, onClick: () => t(i) }),
   /* @__PURE__ */ r(

package/lib/ui/app/Notifications/index.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import { ScrollStore } from '../../app/useSdkScroll';
 export declare const SDKNotifications: React.FC<{
     sdk: StreamLayerSDK;
+    scrollNode: React.MutableRefObject<HTMLDivElement | null>;
+    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    scrollStore: ScrollStore;
 }>;