@streamlayer/react-ui 0.91.0 → 0.92.0

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

@@ -1,13 +1,13 @@
-import { jsxs as n, jsx as t, Fragment as T } from "react/jsx-runtime";
-import { useState as a, useTransition as g, useEffect as y } from "react";
-import { TabsContainer as x, TabsNavContainer as C, SDKWhiteContainer as D, SDKContentContainer as v, LeaderboardContainer as A } from "../../styles.js";
-import { ActivePages as p, Tabs as E } from "../../../gamification/tabs/index.js";
-import { Leaderboard as L } from "./Leaderboard.js";
-import { QuestionsList as P } from "./QuestionsList.js";
-import { UserSummary as S } from "./UserSummary.js";
+import { jsxs as f, jsx as t, Fragment as v } from "react/jsx-runtime";
+import { useStore as D } from "@nanostores/react";
+import { useState as u, useTransition as P, useEffect as A } from "react";
+import { TabsContainer as E, TabsNavContainer as L, SDKWhiteContainer as K, SDKContentContainer as k, LeaderboardContainer as I } from "../../styles.js";
+import { ActivePages as s, Tabs as O } from "../../../gamification/tabs/index.js";
+import { Leaderboard as Q } from "./Leaderboard.js";
+import { QuestionsList as V } from "./QuestionsList.js";
+import { UserSummary as j } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
-import "@nanostores/react";
 import "../../../../useClipboardCopy-E5rEe6It.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
@@ -53,43 +53,50 @@ 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 Kt = ({ gamification: i, className: d, scrollStore: o, scrollNode: c, appNode: f }) => {
-  const [l, u] = a(!1), [m, b] = a(p.HOME), [, e] = g(), h = (r) => {
-    e(() => b(r));
-  }, s = (r) => {
-    e(() => u(r));
+const Ht = ({ gamification: i, className: b, scrollStore: o, scrollNode: h, appNode: n, style: T, responsiveStore: x, headerNode: y }) => {
+  const [a, g] = u(!1), [e, S] = u(s.HOME), [, l] = P(), { sdkInScrollView: m } = D(x, { keys: ["sdkInScrollView"] }), w = (r) => {
+    l(() => {
+      var c;
+      S(r), m === !1 && ((c = n.current) == null || c.scrollIntoView({ behavior: "instant" }));
+    });
+  }, d = (r) => {
+    l(() => g(r));
   };
-  return y(() => o.listen((r) => {
+  A(() => o.listen((r) => {
     if (r.scrollPosition === 0) {
-      s(!1), o.setKey("tabsShown", !1);
+      d(!1), o.setKey("tabsShown", !1);
       return;
     }
-    s(r.scrollDirection === "forward"), o.setKey("tabsShown", r.scrollDirection !== "forward");
-  }), [o]), /* @__PURE__ */ n(x, { className: d, children: [
+    d(r.scrollDirection === "forward"), o.setKey("tabsShown", r.scrollDirection !== "forward");
+  }), [o]);
+  let p = "0px";
+  m ? p = a ? "-60px" : "0px" : p = a ? "0px" : "68px";
+  const C = m ? n : y;
+  return /* @__PURE__ */ f(E, { className: b, style: T, children: [
     /* @__PURE__ */ t(
-      C,
+      L,
       {
         style: {
-          top: l ? "-60px" : "0px"
+          top: p
         },
-        children: /* @__PURE__ */ t(E, { activePage: m, toggleActivePage: h })
+        children: /* @__PURE__ */ t(O, { activePage: e, toggleActivePage: w })
       }
     ),
-    m === p.HOME && /* @__PURE__ */ n(T, { children: [
-      /* @__PURE__ */ t(D, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(S, { userSummary: i.userSummary }) }),
-      /* @__PURE__ */ t(v, { style: { flex: 1 }, children: /* @__PURE__ */ t(P, { openQuestion: i.openQuestion, store: i.feedList.getStore() }) })
+    e === s.HOME && /* @__PURE__ */ f(v, { children: [
+      /* @__PURE__ */ t(K, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ t(j, { userSummary: i.userSummary }) }),
+      /* @__PURE__ */ t(k, { style: { flex: 1 }, children: /* @__PURE__ */ t(V, { openQuestion: i.openQuestion, store: i.feedList.getStore() }) })
     ] }),
-    m === p.LEADERBOARD && /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(
-      L,
+    e === s.LEADERBOARD && /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
+      Q,
       {
-        appNode: f,
+        renderClipBoardNode: C,
         scrollStore: o,
-        scrollNode: c,
+        scrollNode: h,
         gamification: i
       }
     ) })
   ] });
 };
 export {
-  Kt as Tabs
+  Ht as Tabs
 };

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

@@ -2,8 +2,8 @@ import { GamificationOverlay as o } from "./index.js";
 import "react/jsx-runtime";
 import "@linaria/react";
 import "@nanostores/react";
-import "../../../../useClipboardCopy-E5rEe6It.js";
 import "react";
+import "../../../../useClipboardCopy-E5rEe6It.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../icons/index.js";

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

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

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

@@ -1,14 +1,14 @@
-import { jsxs as e, Fragment as d, jsx as t } from "react/jsx-runtime";
-import { styled as l } from "@linaria/react";
-import { useStore as n } from "@nanostores/react";
-import { r as s } from "../../../../useClipboardCopy-E5rEe6It.js";
-import { SDKWhiteContainer as f } from "../../styles.js";
-import { VoteHeader as h } from "../../../gamification/detail/header/index.js";
-import { UserStatistics as U } from "../../../gamification/user-statistics/index.js";
-import { ShowIn as x } from "../../../show-in/index.js";
-import { Question as C } from "./Question.js";
-import { Tabs as S } from "./Tabs.js";
-import "react";
+import { jsxs as d, jsx as t, Fragment as R } from "react/jsx-runtime";
+import { styled as k } from "@linaria/react";
+import { useStore as f } from "@nanostores/react";
+import { useRef as b, useMemo as v, useEffect as F } from "react";
+import { r as I } from "../../../../useClipboardCopy-E5rEe6It.js";
+import { SDKWhiteContainer as O } from "../../styles.js";
+import { VoteHeader as T } from "../../../gamification/detail/header/index.js";
+import { UserStatistics as P } from "../../../gamification/user-statistics/index.js";
+import { ShowIn as Q } from "../../../show-in/index.js";
+import { Question as j } from "./Question.js";
+import { Tabs as A } from "./Tabs.js";
 import "../../../../index-uEuzH3jr.js";
 import "../../../gamification/copyNotification/index.js";
 import "../../../icons/index.js";
@@ -79,56 +79,93 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const I = () => x, c = /* @__PURE__ */ l(I())({
+const D = () => Q, S = /* @__PURE__ */ k(D())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), O = /* @__PURE__ */ l("div")({
+}), E = /* @__PURE__ */ k("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
-}), Q = ({
+}), M = ({
   correct: r,
-  incorrect: m
+  incorrect: s
 }) => {
-  const o = r + m;
+  const o = r + s;
   return o === 0 ? 0 : Math.round(r / o * 100);
-}, Yr = ({
+}, z = `
+  body {
+    overflow: hidden
+  }
+`, dt = ({
   gamification: r,
-  scrollStore: m,
+  scrollStore: s,
   className: o,
   appNode: i,
-  scrollNode: a
+  scrollNode: C,
+  headerNode: l,
+  responsiveStore: a
 }) => {
-  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
-      })
-    }), 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__ */ t(f, {
-          children: /* @__PURE__ */ t(U, {
-            ...p,
-            successRate: Q(p)
-          })
-        })]
-      })
-    }), i.current), /* @__PURE__ */ t(S, {
+  const c = f(r.openedQuestion.$store), e = f(r.openedUser), {
+    sdkInScrollView: m
+  } = f(a, {
+    keys: ["sdkInScrollView"]
+  }), p = b(0), [U, w] = v(() => {
+    var h;
+    const u = m ? i : l, n = (((h = i.current) == null ? void 0 : h.getBoundingClientRect().y) || 0) < 0;
+    if ((c || e) && u.current) {
+      n && (p.current = window.scrollY);
+      const V = () => (F(() => {
+        const x = setTimeout(() => {
+          var y;
+          (y = i.current) == null || y.scrollIntoView();
+        }, 1e3);
+        return () => {
+          clearTimeout(x), p.current !== 0 && (window.scroll({
+            top: p.current
+          }), p.current = 0);
+        };
+      }, []), /* @__PURE__ */ t("style", {
+        children: z
+      }));
+      return [n, c ? I.createPortal(/* @__PURE__ */ d(S, {
+        className: o,
+        children: [/* @__PURE__ */ t(j, {
+          gamification: r
+        }), n && !m && /* @__PURE__ */ t(V, {})]
+      }), u.current) : e ? I.createPortal(/* @__PURE__ */ t(S, {
+        className: o,
+        children: /* @__PURE__ */ d(E, {
+          children: [/* @__PURE__ */ t(T, {
+            label: "Friend's Rank",
+            close: r.closeUser
+          }), /* @__PURE__ */ t(O, {
+            children: /* @__PURE__ */ t(P, {
+              ...e,
+              successRate: M(e)
+            })
+          })]
+        })
+      }), u.current) : null];
+    }
+    return [n, null];
+  }, [i, o, r, l, c, e, m]);
+  return /* @__PURE__ */ d(R, {
+    children: [w, /* @__PURE__ */ t(A, {
       appNode: i,
-      scrollStore: m,
-      scrollNode: a,
+      headerNode: l,
+      scrollStore: s,
+      scrollNode: C,
       className: o,
-      gamification: r
+      gamification: r,
+      responsiveStore: a,
+      style: !m && !U && w !== null ? {
+        height: "0",
+        overflow: "hidden"
+      } : {}
     })]
   });
 };
 export {
-  Yr as GamificationOverlay
+  dt as GamificationOverlay
 };

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

@@ -1,13 +1,17 @@
 /// <reference types="react" />
 import { Features } from '@streamlayer/sdk-web-features';
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
+import type { AppNodeRef, ScrollNodeRef, HeaderNodeRef } from '../masters';
+import { ResponsiveStore } from '../useSdkResponsive';
 import { ScrollStore } from '../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>;
+    responsiveStore: ResponsiveStore;
+    appNode: AppNodeRef;
+    scrollNode: ScrollNodeRef;
+    headerNode: HeaderNodeRef;
     className?: string;
 }>;

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

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

package/lib/ui/app/Navigation/MastersNavigation/index.d.ts

@@ -4,9 +4,10 @@ import { FeaturedGroupsButtonId } from '../../../navigation/button/FeaturedGroup
 import { LeaderBoardButtonId } from '../../../navigation/button/LeaderBoard';
 export { ChannelsButtonId, LeaderBoardButtonId, FeaturedGroupsButtonId };
 export type AvailableOverlays = typeof ChannelsButtonId | typeof LeaderBoardButtonId | typeof FeaturedGroupsButtonId;
-export declare const MastersNavigation: React.FC<{
+type MastersNavigationProps = {
     activeOverlay: AvailableOverlays;
     setActiveOverlay: (overlay: AvailableOverlays) => void;
     sdkReady: boolean;
     className?: string;
-}>;
+};
+export declare const MastersNavigation: import("react").ForwardRefExoticComponent<MastersNavigationProps & import("react").RefAttributes<HTMLDivElement | null>>;

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

@@ -1,40 +1,44 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { ChannelsButton as u, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
-import { FeaturedGroupsButton as s, FeaturedGroupsButtonId as m } from "../../../navigation/button/FeaturedGroups.js";
-import { LeaderBoardButton as e, LeaderBoardButtonId as n } from "../../../navigation/button/LeaderBoard.js";
-import { Navigation as B } from "../../../navigation/masters.js";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { ChannelsButton as s, ChannelsButtonId as i } from "../../../navigation/button/Channels.js";
+import { FeaturedGroupsButton as u, FeaturedGroupsButtonId as m } from "../../../navigation/button/FeaturedGroups.js";
+import { LeaderBoardButtonId as b } from "../../../navigation/button/LeaderBoard.js";
+import { Navigation as f } from "../../../navigation/masters.js";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
 import "../../../navigation/button/index.js";
 import "../../../navigation/button/styles.js";
-import "../../../../LeaderBoard_fzzlxb-w40geAFS.js";
 import "../../../navigation/index.js";
-import "../../../../index_ej4hfx-w40geAFS.js";
-import "../../../../masters_m6itlr-w40geAFS.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(
-    s,
-    {
-      active: o === m,
-      disabled: !p,
-      onClick: () => {
-        t(m);
+const F = e(
+  ({ activeOverlay: r, setActiveOverlay: t, sdkReady: n, className: p }, a) => /* @__PURE__ */ d(f, { className: p, children: [
+    /* @__PURE__ */ o(
+      s,
+      {
+        active: r === i,
+        onClick: () => t(i)
       }
-    }
-  ),
-  /* @__PURE__ */ r(
-    e,
-    {
-      active: o === n,
-      onClick: () => t(n)
-    }
-  )
-] });
+    ),
+    /* @__PURE__ */ o(
+      u,
+      {
+        active: r === m,
+        disabled: !n,
+        onClick: () => {
+          t(m);
+        }
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        ref: a
+      }
+    )
+  ] })
+);
 export {
   i as ChannelsButtonId,
   m as FeaturedGroupsButtonId,
-  n as LeaderBoardButtonId,
-  b as MastersNavigation
+  b as LeaderBoardButtonId,
+  F as MastersNavigation
 };

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

@@ -1,17 +1,16 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useStore as s } from "@nanostores/react";
-import { useMemo as m } from "react";
+import { useMemo as e } from "react";
 import { AvailableFeatures as d } from "@streamlayer/sdk-web-features";
 import { Navigation as v } from "../../navigation/index.js";
 import { Button as b } from "../../navigation/button/index.js";
 import "@linaria/react";
-import "../../../index_ej4hfx-w40geAFS.js";
 import "../../navigation/button/styles.js";
-const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
-  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = m(() => {
+const N = ({ customOverlays: p, activeButton: m, sdk: i }) => {
+  const t = s(i.sdkStore.organizationSettings), r = s(i.sdkStore.streamSettings), a = e(() => {
     const o = (r == null ? void 0 : r.data) || (t == null ? void 0 : t.data);
     return o != null && o.overlays ? o.overlays : [];
-  }, [t, r]), c = m(
+  }, [t, r]), c = e(
     () => [
       ...a.filter(({ enableSdkButton: o }) => o).map((o) => ({
         id: o.type,
@@ -26,8 +25,8 @@ const h = ({ customOverlays: p, activeButton: e, sdk: i }) => {
     ].sort((o, l) => o.position - l.position),
     [a, i, p]
   );
-  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === e })) });
+  return /* @__PURE__ */ n(v, { children: c.map((o) => /* @__PURE__ */ n(b, { ...o, active: o.id === m })) });
 };
 export {
-  h as SDKNavigation
+  N as SDKNavigation
 };

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { type StreamLayerSDK } from '@streamlayer/sdk-web-interfaces';
 import { type Notification } from '@streamlayer/sdk-web-notifications';
+import { HeaderNodeRef, type AppNodeRef } from '../../masters';
 export declare const Onboarding: React.FC<{
     sdk: StreamLayerSDK;
     notification: Notification;
     saveHeight: (height: number) => void;
-    appNode: React.MutableRefObject<HTMLDivElement | null>;
+    renderToNode: AppNodeRef | HeaderNodeRef;
     style?: React.CSSProperties;
 }>;