@streamlayer/react-ui 0.46.1 → 0.47.0

package/lib/index.js

@@ -1,16 +1,16 @@
-import { QuestionInApp as yo } from "./ui/notifications/notification/question-inapp/index.js";
-import { Login as Uo } from "./ui/login/index.js";
-import { Onboarding as ko } from "./ui/gamification/onboarding/index.js";
-import { ActivePages as wo, Tab as zo, Tabs as Bo } from "./ui/gamification/tabs/index.js";
-import { LeaderboardItemDetail as Eo } from "./ui/gamification/leaderboard-item-detail/index.js";
-import { Question as Go } from "./ui/gamification/question/index.js";
-import { QuestionList as Jo } from "./ui/gamification/question/list/index.js";
-import { UserStatistics as Mo } from "./ui/gamification/user-statistics/index.js";
-import { Vote as Ro } from "./ui/gamification/vote/index.js";
-import { Demo as Xo } from "./ui/demo/index.js";
-import { Points as Zo } from "./ui/gamification/points/index.js";
-import { StreamLayerThemeProvider as $o } from "./ui/theme/index.js";
-import { ThemeVariables as rr, theme as tr, themeStr as mr } from "./ui/theme/theme.js";
+import { QuestionInApp as Uo } from "./ui/notifications/notification/question-inapp/index.js";
+import { Login as ko } from "./ui/login/index.js";
+import { Onboarding as wo } from "./ui/gamification/onboarding/index.js";
+import { ActivePages as Bo, Tab as Co, Tabs as Eo } from "./ui/gamification/tabs/index.js";
+import { LeaderboardItemDetail as Go } from "./ui/gamification/leaderboard-item-detail/index.js";
+import { Question as Jo } from "./ui/gamification/question/index.js";
+import { QuestionList as Mo } from "./ui/gamification/question/list/index.js";
+import { UserStatistics as Ro } from "./ui/gamification/user-statistics/index.js";
+import { Vote as Xo } from "./ui/gamification/vote/index.js";
+import { Demo as Zo } from "./ui/demo/index.js";
+import { Points as $o } from "./ui/gamification/points/index.js";
+import { StreamLayerThemeProvider as rr } from "./ui/theme/index.js";
+import { ThemeVariables as mr, theme as pr, themeStr as ir } from "./ui/theme/theme.js";
 import "react/jsx-runtime";
 import "react";
 import "./icon-exit-d3f9fc80.js";
@@ -76,9 +76,11 @@ import "./ui/gamification/insight-list/styles.js";
 import "./ui/gamification/detailed-insight/styles.js";
 import "./ui/demo/components/Leaderboard.js";
 import "./ui/gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "./ui/gamification/leaderboard-item/index.js";
 import "./ui/gamification/leaderboard-item/styles.js";
-import "./ui/gamification/leaderboard-list/styles.js";
 import "./ui/demo/styles.js";
 import "./ui/demo/Highlights.js";
 import "./ui/demo/components/Insights.js";
@@ -92,21 +94,21 @@ import "./ui/gamification/points/styles.js";
 import "./ui/theme/breakpoints.js";
 import "@linaria/core";
 export {
-  wo as ActivePages,
-  Xo as Demo,
-  Eo as LeaderboardItemDetail,
-  Uo as Login,
-  ko as Onboarding,
-  Zo as Points,
-  Go as Question,
-  yo as QuestionInApp,
-  Jo as QuestionList,
-  $o as StreamLayerThemeProvider,
-  zo as Tab,
-  Bo as Tabs,
-  rr as ThemeVariables,
-  Mo as UserStatistics,
-  Ro as Vote,
-  tr as theme,
-  mr as themeStr
+  Bo as ActivePages,
+  Zo as Demo,
+  Go as LeaderboardItemDetail,
+  ko as Login,
+  wo as Onboarding,
+  $o as Points,
+  Jo as Question,
+  Uo as QuestionInApp,
+  Mo as QuestionList,
+  rr as StreamLayerThemeProvider,
+  Co as Tab,
+  Eo as Tabs,
+  mr as ThemeVariables,
+  Ro as UserStatistics,
+  Xo as Vote,
+  pr as theme,
+  ir as themeStr
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
-    store: ReturnType<Exclude<Gamification['leaderboardList'], undefined>['getStore']>;
+    leaderboardList: Gamification['leaderboardList'];
 }>;

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

@@ -1,40 +1,29 @@
-import { jsx as e, jsxs as l, Fragment as u } from "react/jsx-runtime";
-import { useStore as b } from "@nanostores/react";
+import { jsxs as c, Fragment as n, jsx as m } from "react/jsx-runtime";
+import { useStore as d } from "@nanostores/react";
 import { useState as f } from "react";
-import { LeaderboardItemDetail as I } from "../../../gamification/leaderboard-item-detail/index.js";
-import { LeaderboardList as v } from "../../../gamification/leaderboard-list/index.js";
+import { LeaderboardItemDetail as l } from "../../../gamification/leaderboard-item-detail/index.js";
+import { LeaderboardList as I } from "../../../gamification/leaderboard-list/index.js";
 import "../../../gamification/common-header/index.js";
 import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../../gamification/leaderboard-item-detail/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-import "../../../gamification/leaderboard-list/styles.js";
-const z = ({ store: s }) => {
-  const { data: i = [], loading: d } = b(s), [r, p] = f(void 0);
-  if (d)
-    return /* @__PURE__ */ e("div", { children: "wait leader board..." });
-  const o = (t) => {
-    var a;
-    const n = (a = i.find((c) => {
-      var m;
-      return ((m = c.attributes) == null ? void 0 : m.userId) === t;
-    })) == null ? void 0 : a.attributes;
-    p(n);
+const q = ({ leaderboardList: o }) => {
+  const { data: r } = d(o.$store), [t, i] = f(void 0), e = (p) => {
+    const a = r.find((s) => s.userId === p);
+    i(a);
   };
-  return /* @__PURE__ */ l(u, { children: [
-    r && /* @__PURE__ */ e(I, { comeBack: () => o(null), ...r }),
-    !r && /* @__PURE__ */ e(
-      v,
-      {
-        items: i.filter((t) => t.attributes).map((t) => t.attributes),
-        openItemDetail: o
-      }
-    )
+  return /* @__PURE__ */ c(n, { children: [
+    t && /* @__PURE__ */ m(l, { comeBack: () => e(null), ...t }),
+    !t && /* @__PURE__ */ m(I, { fetchMore: o.fetchMore, items: r, openItemDetail: e })
   ] });
 };
 export {
-  z as Leaderboard
+  q as Leaderboard
 };

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

@@ -1,10 +1,10 @@
-import { jsxs as e, Fragment as p, jsx as r } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { SDKWhiteContainer as n, SDKContentContainer as a } from "../../styles.js";
-import { ActivePages as m, Tabs as u } from "../../../gamification/tabs/index.js";
-import { Leaderboard as S } from "./Leaderboard.js";
-import { QuestionsList as d } from "./QuestionsList.js";
-import { UserSummary as g } from "./UserSummary.js";
+import { jsxs as m, Fragment as s, jsx as r } from "react/jsx-runtime";
+import { useState as n } from "react";
+import { SDKWhiteContainer as a, SDKContentContainer as e } from "../../styles.js";
+import { ActivePages as i, Tabs as d } from "../../../gamification/tabs/index.js";
+import { Leaderboard as u } from "./Leaderboard.js";
+import { QuestionsList as l } from "./QuestionsList.js";
+import { UserSummary as c } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
@@ -14,10 +14,12 @@ import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-import "../../../gamification/leaderboard-list/styles.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
 import "@streamlayer/sdk-web-types";
@@ -33,17 +35,17 @@ 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 V = ({ gamification: t }) => {
-  const [o, i] = s(m.HOME);
-  return /* @__PURE__ */ e(p, { children: [
-    /* @__PURE__ */ e(n, { children: [
-      /* @__PURE__ */ r(u, { activePage: o, toggleActivePage: i }),
-      o === m.HOME && /* @__PURE__ */ r(g, { store: t.userSummary.getStore() })
+const Y = ({ gamification: t }) => {
+  const [o, p] = n(i.HOME);
+  return /* @__PURE__ */ m(s, { children: [
+    /* @__PURE__ */ m(a, { children: [
+      /* @__PURE__ */ r(d, { activePage: o, toggleActivePage: p }),
+      o === i.HOME && /* @__PURE__ */ r(c, { store: t.userSummary.getStore() })
     ] }),
-    o === m.HOME && /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(d, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
-    o === m.LEADERBOARD && /* @__PURE__ */ r(S, { store: t.leaderboardList.getStore() })
+    o === i.HOME && /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { openQuestion: t.openQuestion, store: t.questions.getStore() }) }),
+    o === i.LEADERBOARD && /* @__PURE__ */ r(e, { style: { flex: "1 1 auto" }, children: /* @__PURE__ */ r(u, { leaderboardList: t.leaderboardList }) })
   ] });
 };
 export {
-  V as Tabs
+  Y as Tabs
 };

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

@@ -2,9 +2,9 @@ import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
 import { styled as e } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
 import { SDKScrollContainer as s } from "../../styles.js";
-import { ShowIn as a } from "../../../show-in/index.js";
-import { Question as d } from "./Question.js";
-import { Tabs as l } from "./Tabs.js";
+import { ShowIn as l } from "../../../show-in/index.js";
+import { Question as a } from "./Question.js";
+import { Tabs as d } from "./Tabs.js";
 import "react";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/vote/index.js";
@@ -29,10 +29,12 @@ import "../../../../icon-exit-d3f9fc80.js";
 import "../../../gamification/common-header/styles.js";
 import "../../../gamification/leaderboard-item-detail/styles.js";
 import "../../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../../gamification/leaderboard-item/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/leaderboard-item/styles.js";
-import "../../../gamification/leaderboard-list/styles.js";
 import "./QuestionsList.js";
 import "../../../gamification/question/list/index.js";
 import "../../../gamification/question/index.js";
@@ -47,28 +49,28 @@ 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 u = e(a)`
+const u = e(l)`
   position: absolute;
   inset: 0;
   top: var(--header-height);
   background: var(--color-neutrals-white);
   z-index: 3;
-`, so = ({
+`, ao = ({
   gamification: o
 }) => {
   const { loading: i, data: t } = n(o.openedQuestion);
   return /* @__PURE__ */ m(p, { children: [
     (i || t) && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-      d,
+      a,
       {
         closeQuestion: o.closeQuestion,
         vote: o.submitAnswer,
         openedQuestion: t
       }
     ) }),
-    /* @__PURE__ */ r(s, { "data-nav": "true", children: /* @__PURE__ */ r(l, { gamification: o }) })
+    /* @__PURE__ */ r(s, { "data-nav": "true", style: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ r(d, { gamification: o }) })
   ] });
 };
 export {
-  so as GamificationOverlay
+  ao as GamificationOverlay
 };

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

@@ -33,10 +33,12 @@ import "../../../icon-exit-d3f9fc80.js";
 import "../../gamification/common-header/styles.js";
 import "../../gamification/leaderboard-item-detail/styles.js";
 import "../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
-import "../../gamification/leaderboard-list/styles.js";
 import "./Gamification/QuestionsList.js";
 import "../../gamification/question/list/index.js";
 import "../../gamification/question/index.js";
@@ -59,7 +61,7 @@ import "../../gamification/insight-list/index.js";
 import "../../gamification/insight/index.js";
 import "../../gamification/insight/styles.js";
 import "../../gamification/insight-list/styles.js";
-const Fr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
+const Gr = ({ sdk: i, feature: r }) => p(() => r ? r.featureConfig.get().type === o.GAMES ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(e, { gamification: r, sdk: i }) }) : r.featureConfig.get().type === o.HIGHLIGHTS ? /* @__PURE__ */ t(m, { sdk: i, feature: r, children: /* @__PURE__ */ t(n, { highlights: r, sdk: i }) }) : null : null, [i, r]);
 export {
-  Fr as ActiveFeature
+  Gr as ActiveFeature
 };

package/lib/ui/app/masters.js

@@ -43,10 +43,12 @@ import "../../icon-exit-d3f9fc80.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../../utils/common.js";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
 import "./Features/Gamification/QuestionsList.js";
 import "../gamification/question/list/index.js";
 import "../gamification/question/index.js";
@@ -77,7 +79,7 @@ import "../navigation/button/styles.js";
 const B = ({ sdk: o }) => {
   const [, m] = k(o);
   return /* @__PURE__ */ t(S, { feature: m, sdk: o });
-}, Qr = ({ sdk: o, overlays: m, children: p, event: n }) => {
+}, Wr = ({ sdk: o, overlays: m, children: p, event: n }) => {
   const { sdkEnabled: i, sdkReady: s, activeOverlay: r, activateAndLoadOverlay: d, enableSdk: l, disableSdk: c } = b(
     o,
     n
@@ -111,5 +113,5 @@ const B = ({ sdk: o }) => {
   ] }) });
 };
 export {
-  Qr as MastersApp
+  Wr as MastersApp
 };

package/lib/ui/demo/Gamification.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as s, Fragment as z } from "react/jsx-runtime";
 import { FeatureStatus as J } from "@streamlayer/sdk-web-interfaces";
-import { useStore as n } from "@nanostores/react";
+import { useStore as p } from "@nanostores/react";
 import { useState as K } from "react";
 import { ActivePages as a, Tabs as N } from "../gamification/tabs/index.js";
 import { UserSummary as V } from "./components/UserSummary.js";
@@ -13,7 +13,7 @@ import "../gamification/insight-list/styles.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/detailed-insight/styles.js";
 import { Leaderboard as Z } from "./components/Leaderboard.js";
-import { DemoContainer as p, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
+import { DemoContainer as m, UserStatisticsContainer as _, QuestionsContainer as $ } from "./styles.js";
 import "../gamification/tabs/styles.js";
 import "@linaria/react";
 import "../gamification/user-statistics/index.js";
@@ -52,23 +52,25 @@ import "../gamification/leaderboard-item-detail/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
-const ot = ({
+const pt = ({
   gamification: r,
   sdk: u
 }) => {
   var d, v, c, b, y, g, S, h, C, G, L, Q, A, E, f, w, x, P, F, O, B, D, R;
-  const T = n(r.status), j = n(r.onboardingStatus), l = n(r.openedQuestion), { slStreamId: o } = n(u.sdkStore), e = n(r.featureSettings), [m, q] = K(a.HOME);
+  const T = p(r.status), j = p(r.onboardingStatus), l = p(r.openedQuestion), { slStreamId: o } = p(u.sdkStore), e = p(r.featureSettings), [n, q] = K(a.HOME);
   if (T !== J.Ready)
     return /* @__PURE__ */ t("div", { children: "wait..." });
   if (o != null && o.loading)
-    return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) });
   if (!(o != null && o.data))
-    return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
   if (!j)
-    return /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
       Y,
       {
         closeFeature: u.closeFeature,
@@ -92,20 +94,20 @@ const ot = ({
   }, U = (i, k) => {
     r.submitAnswer(i, k);
   };
-  return /* @__PURE__ */ s(p, { children: [
-    /* @__PURE__ */ t(N, { activePage: m, toggleActivePage: (i) => {
+  return /* @__PURE__ */ s(m, { children: [
+    /* @__PURE__ */ t(N, { activePage: n, toggleActivePage: (i) => {
       q(i);
     } }),
-    m === a.HOME && /* @__PURE__ */ s(z, { children: [
+    n === a.HOME && /* @__PURE__ */ s(z, { children: [
       /* @__PURE__ */ t(_, { children: r.userSummary && /* @__PURE__ */ t(V, { store: r.userSummary.getStore() }) }),
       /* @__PURE__ */ s($, { children: [
         r.questions && /* @__PURE__ */ t(W, { openQuestion: H, store: r.questions.getStore() }),
         l && /* @__PURE__ */ t(X, { closeQuestion: M, vote: U, openedQuestion: l })
       ] })
     ] }),
-    m === a.LEADERBOARD && r.leaderboardList && /* @__PURE__ */ t(Z, { store: r.leaderboardList.getStore() })
+    n === a.LEADERBOARD && r.leaderboardList && /* @__PURE__ */ t(Z, { store: r.leaderboardList.getStore() })
   ] });
 };
 export {
-  ot as GamificationComponent
+  pt as GamificationComponent
 };

package/lib/ui/demo/Highlights.js

@@ -17,8 +17,10 @@ import { Insights as c } from "./components/Insights.js";
 import { Insight as f } from "./components/Insight.js";
 import "../gamification/common-header/styles.js";
 import "../gamification/leaderboard-item-detail/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
 import "@linaria/react";
 import "@streamlayer/sdk-web-types";
 import "../button/index.js";
@@ -43,7 +45,7 @@ import "../gamification/detailed-insight/index.js";
 import "../gamification/common-header/index.js";
 import "../../icon-exit-d3f9fc80.js";
 import "../gamification/detailed-insight/styles.js";
-const rt = ({ highlights: i, sdk: e }) => {
+const pt = ({ highlights: i, sdk: e }) => {
   const n = m(i.status), r = m(i.openedInsight), { slStreamId: o } = m(e.sdkStore);
   return n !== d.Ready ? /* @__PURE__ */ t("div", { children: "wait..." }) : o != null && o.loading ? /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is loading" }) }) : o != null && o.data ? i.insights === void 0 ? /* @__PURE__ */ t("div", { children: "wait insights..." }) : /* @__PURE__ */ s(p, { children: [
     !r && /* @__PURE__ */ t(c, { highlights: i, store: i.insights.getStore() }),
@@ -58,5 +60,5 @@ const rt = ({ highlights: i, sdk: e }) => {
   ] }) : /* @__PURE__ */ t(p, { children: /* @__PURE__ */ t("div", { children: "Event is forbidden" }) });
 };
 export {
-  rt as HighlightsComponent
+  pt as HighlightsComponent
 };

package/lib/ui/demo/components/Leaderboard.js

@@ -8,21 +8,23 @@ import "../../../icon-exit-d3f9fc80.js";
 import "../../gamification/common-header/styles.js";
 import "@linaria/react";
 import "../../gamification/leaderboard-item-detail/styles.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../../gamification/leaderboard-item/styles.js";
-import "../../gamification/leaderboard-list/styles.js";
-const y = ({ store: s }) => {
-  const { data: r } = u(s), [e, d] = b(void 0);
+const C = ({ store: p }) => {
+  const { data: r } = u(p), [e, s] = b(void 0);
   if (!r)
     return /* @__PURE__ */ i("div", { children: "wait leader board..." });
   const o = (t) => {
     var m;
-    const p = (m = r.find((n) => {
+    const d = (m = r.find((n) => {
       var a;
       return ((a = n.attributes) == null ? void 0 : a.userId) === t;
     })) == null ? void 0 : m.attributes;
-    d(p);
+    s(d);
   };
   return /* @__PURE__ */ c(l, { children: [
     e && /* @__PURE__ */ i(f, { comeBack: () => o(null), ...e }),
@@ -36,5 +38,5 @@ const y = ({ store: s }) => {
   ] });
 };
 export {
-  y as Leaderboard
+  C as Leaderboard
 };

package/lib/ui/demo/components/index.js

@@ -1,10 +1,10 @@
-import { UserSummary as $ } from "./UserSummary.js";
-import { QuestionsList as or } from "./QuestionsList.js";
-import { Question as mr } from "./Question.js";
-import { Onboarding as ir } from "../../gamification/onboarding/index.js";
-import { Insights as sr } from "./Insights.js";
-import { Insight as xr } from "./Insight.js";
-import { Leaderboard as ar } from "./Leaderboard.js";
+import { UserSummary as or } from "./UserSummary.js";
+import { QuestionsList as mr } from "./QuestionsList.js";
+import { Question as ir } from "./Question.js";
+import { Onboarding as sr } from "../../gamification/onboarding/index.js";
+import { Insights as xr } from "./Insights.js";
+import { Insight as ar } from "./Insight.js";
+import { Leaderboard as gr } from "./Leaderboard.js";
 import "react/jsx-runtime";
 import "@nanostores/react";
 import "../../gamification/user-statistics/index.js";
@@ -53,15 +53,17 @@ import "../../gamification/detailed-insight/styles.js";
 import "../../gamification/leaderboard-item-detail/index.js";
 import "../../gamification/leaderboard-item-detail/styles.js";
 import "../../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../../gamification/leaderboard-item/index.js";
 import "../../gamification/leaderboard-item/styles.js";
-import "../../gamification/leaderboard-list/styles.js";
 export {
-  xr as Insight,
-  sr as Insights,
-  ar as Leaderboard,
-  ir as Onboarding,
-  mr as Question,
-  or as QuestionsList,
-  $ as UserSummary
+  ar as Insight,
+  xr as Insights,
+  gr as Leaderboard,
+  sr as Onboarding,
+  ir as Question,
+  mr as QuestionsList,
+  or as UserSummary
 };

package/lib/ui/demo/index.js

@@ -70,9 +70,11 @@ import "../gamification/leaderboard-item-detail/index.js";
 import "../gamification/common-header/index.js";
 import "../gamification/leaderboard-item-detail/styles.js";
 import "../gamification/leaderboard-list/index.js";
+import "react-virtualized-auto-sizer";
+import "react-window";
+import "react-window-infinite-loader";
 import "../gamification/leaderboard-item/index.js";
 import "../gamification/leaderboard-item/styles.js";
-import "../gamification/leaderboard-list/styles.js";
 import "./components/Insights.js";
 import "../gamification/insight-list/index.js";
 import "../gamification/insight/index.js";
@@ -165,7 +167,7 @@ const R = ({ activeFeature: o, sdk: r }) => {
     ] }),
     h
   ] });
-}, lr = ({ sdk: o }) => {
+}, dr = ({ sdk: o }) => {
   const r = f(o.organizationStore()), t = f(o.getUserStore()), a = f(o.getActiveFeature());
   return r.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : r.data ? t.loading ? /* @__PURE__ */ e("div", { children: "authentication..." }) : t.data ? /* @__PURE__ */ l(T, { children: [
     /* @__PURE__ */ e(x, { notificationsStore: o.getNotificationsStore() }),
@@ -173,5 +175,5 @@ const R = ({ activeFeature: o, sdk: r }) => {
   ] }) : /* @__PURE__ */ e(H, { sdk: o }) : /* @__PURE__ */ e("div", { children: "wrong sdk key..." });
 };
 export {
-  lr as Demo
+  dr as Demo
 };

package/lib/ui/gamification/leaderboard-item/index.d.ts

@@ -3,5 +3,6 @@ import type { LeaderboardItem as ILeaderboardItem } from '@streamlayer/sdk-web-t
 export type LeaderboardItemProps = Partial<ILeaderboardItem> & {
     userId: string;
     openItemDetail: () => void;
+    style?: React.CSSProperties;
 };
 export declare const LeaderboardItem: React.FC<LeaderboardItemProps>;

package/lib/ui/gamification/leaderboard-item/index.js

@@ -1,18 +1,25 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { abbreviate as d } from "../../../utils/common.js";
-import { Container as l, RankPosition as c, Avatar as m, AvatarPlaceholder as h, Content as s, NameWrap as p, Name as b, Rank as f, Units as k } from "./styles.js";
+import { abbreviate as l } from "../../../utils/common.js";
+import { Container as c, RankPosition as m, Avatar as h, AvatarPlaceholder as s, Content as p, NameWrap as b, Name as f, Rank as k, Units as v } from "./styles.js";
 import "@linaria/react";
-const j = ({ rank: t, avatar: i, name: n, points: a, openItemDetail: o }) => /* @__PURE__ */ e(l, { onClick: o, children: [
-  /* @__PURE__ */ r(c, { children: t || 0 }),
-  i ? /* @__PURE__ */ r(m, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(h, { children: d(n || "") }),
-  /* @__PURE__ */ e(s, { children: [
-    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(b, { children: n || "" }) }),
-    /* @__PURE__ */ e(f, { children: [
-      /* @__PURE__ */ r(k, { children: "PTS" }),
+const A = ({
+  rank: t,
+  avatar: i,
+  name: n,
+  points: a,
+  openItemDetail: o,
+  style: d
+}) => /* @__PURE__ */ e(c, { onClick: o, style: d, children: [
+  /* @__PURE__ */ r(m, { children: t || 0 }),
+  i ? /* @__PURE__ */ r(h, { alt: "leaderboard-item-avatar", src: i }) : /* @__PURE__ */ r(s, { children: l(n || "") }),
+  /* @__PURE__ */ e(p, { children: [
+    /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(f, { children: n || "" }) }),
+    /* @__PURE__ */ e(k, { children: [
+      /* @__PURE__ */ r(v, { children: "PTS" }),
       a || 0
     ] })
   ] })
 ] });
 export {
-  j as LeaderboardItem
+  A as LeaderboardItem
 };

package/lib/ui/gamification/leaderboard-item/styles.js

@@ -8,13 +8,13 @@ const t = e.div`
   width: 100%;
   min-height: 50px;
   max-height: 50px;
-  background-color: var(--color-bg-transparent-item-vote);
-  color: var(--color-white);
+  background-color: #fff;
+  color: #000;
   font-size: 14px;
   font-weight: 600;
   overflow: hidden;
   cursor: pointer;
-`, r = e.div`
+`, n = e.div`
   width: 28px;
   max-width: 28px;
   display: flex;
@@ -22,7 +22,7 @@ const t = e.div`
   justify-content: center;
   margin-right: 4px;
   overflow: hidden;
-`, n = e.img`
+`, r = e.img`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -36,7 +36,6 @@ const t = e.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-white);
   font-size: 12px;
   flex-shrink: 0;
 `, a = e.div`
@@ -62,19 +61,18 @@ const t = e.div`
   display: flex;
   align-items: center;
   max-width: 75px;
-`, l = e.span`
+`, x = e.span`
   font-size: 10px;
-  color: var(--color-leaderboard-unit);
   margin-right: 4px;
 `;
 export {
-  n as Avatar,
+  r as Avatar,
   o as AvatarPlaceholder,
   t as Container,
   a as Content,
   d as Name,
   p as NameWrap,
   s as Rank,
-  r as RankPosition,
-  l as Units
+  n as RankPosition,
+  x as Units
 };

package/lib/ui/gamification/leaderboard-list/index.d.ts

@@ -3,6 +3,7 @@ import { LeaderboardItemProps } from '../../gamification/leaderboard-item';
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     openItemDetail: (id: string) => void;
+    fetchMore: () => void;
 };
 export declare const LeaderboardList: React.FC<LeaderboardListProps>;
 export {};

package/lib/ui/gamification/leaderboard-list/index.js

@@ -1,10 +1,39 @@
-import { jsx as o } from "react/jsx-runtime";
-import { LeaderboardItem as m } from "../leaderboard-item/index.js";
-import { Container as p } from "./styles.js";
+import { jsx as e } from "react/jsx-runtime";
+import l from "react-virtualized-auto-sizer";
+import { FixedSizeList as u } from "react-window";
+import I from "react-window-infinite-loader";
+import { LeaderboardItem as f } from "../leaderboard-item/index.js";
 import "../../../utils/common.js";
 import "../leaderboard-item/styles.js";
 import "@linaria/react";
-const f = ({ items: e, openItemDetail: t }) => /* @__PURE__ */ o(p, { children: e.map((r) => /* @__PURE__ */ o(m, { ...r, openItemDetail: () => t(r.userId) }, r.userId)) });
+const C = ({ items: r, openItemDetail: i, fetchMore: m }) => /* @__PURE__ */ e(l, { children: ({ width: d, height: n }) => /* @__PURE__ */ e(
+  I,
+  {
+    isItemLoaded: (o) => o < r.length,
+    itemCount: r.length + 1,
+    loadMoreItems: m,
+    children: ({ onItemsRendered: o, ref: p }) => /* @__PURE__ */ e(
+      u,
+      {
+        itemSize: 58,
+        onItemsRendered: o,
+        ref: p,
+        itemCount: r.length,
+        width: d,
+        height: n,
+        children: ({ index: t, style: a }) => /* @__PURE__ */ e(
+          f,
+          {
+            style: a,
+            ...r[t],
+            openItemDetail: () => i(r[t].userId)
+          },
+          r[t].userId
+        )
+      }
+    )
+  }
+) });
 export {
-  f as LeaderboardList
+  C as LeaderboardList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.46.1",
+  "version": "0.47.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -27,16 +27,19 @@
   ],
   "peerDependencies": {
     "@streamlayer/sl-eslib": "^5.52.0",
-    "@streamlayer/feature-gamification": "^0.18.4",
-    "@streamlayer/sdk-web-anonymous-auth": "^0.11.1",
-    "@streamlayer/sdk-web": "^0.28.6",
-    "@streamlayer/sdk-web-core": "^0.16.1",
-    "@streamlayer/sdk-web-features": "^0.10.9",
-    "@streamlayer/sdk-web-interfaces": "^0.18.6",
-    "@streamlayer/sdk-web-notifications": "^0.10.5",
-    "@streamlayer/sdk-web-storage": "^0.3.8",
-    "@streamlayer/sdk-web-types": "^0.16.6",
-    "@streamlayer/sdk-web-api": "^0.1.0"
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "@streamlayer/feature-gamification": "^0.19.0",
+    "@streamlayer/sdk-web-anonymous-auth": "^0.11.2",
+    "@streamlayer/sdk-web": "^0.28.7",
+    "@streamlayer/sdk-web-api": "^0.1.0",
+    "@streamlayer/sdk-web-core": "^0.16.2",
+    "@streamlayer/sdk-web-features": "^0.10.10",
+    "@streamlayer/sdk-web-interfaces": "^0.18.7",
+    "@streamlayer/sdk-web-notifications": "^0.10.6",
+    "@streamlayer/sdk-web-storage": "^0.3.9",
+    "@streamlayer/sdk-web-types": "^0.16.7"
   },
   "nx": {
     "implicitDependencies": [
@@ -60,6 +63,8 @@
     "@storybook/jest": "~0.2.3",
     "@storybook/react": "^7.5.3",
     "@storybook/testing-library": "~0.2.2",
+    "@types/react-window": "^1.8.8",
+    "@types/react-window-infinite-loader": "^1.0.9",
     "esbuild-plugin-babel": "^0.2.3",
     "glob": "^10.3.10",
     "react": "18.2.0",
@@ -73,6 +78,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.24.7"
+    "@streamlayer/react": "^0.24.8"
   }
 }

package/lib/ui/gamification/leaderboard-list/styles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const Container: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/ui/gamification/leaderboard-list/styles.js

@@ -1,18 +0,0 @@
-import { styled as o } from "@linaria/react";
-const t = o.div`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  max-height: 100%;
-  overflow-y: auto;
-  width: 100%;
-  padding: 12px 0px;
-
-  & > div {
-    margin-bottom: 8px;
-  }
-`;
-export {
-  t as Container
-};