@streamlayer/react-ui 0.90.0 → 0.91.0

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

@@ -2,15 +2,17 @@ import { GamificationOverlay as o } from "./index.js";
 import "react/jsx-runtime";
 import "@linaria/react";
 import "@nanostores/react";
-import "../../../../index-jRXrW6ie.js";
-import "../../../../index-uEuzH3jr.js";
+import "../../../../useClipboardCopy-E5rEe6It.js";
 import "react";
+import "../../../../index-uEuzH3jr.js";
+import "../../../gamification/copyNotification/index.js";
+import "../../../icons/index.js";
+import "../../../gamification/copyNotification/styles.js";
 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 "../../../gamification/user-statistics/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";

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

@@ -1,19 +1,21 @@
 import { jsxs as e, Fragment as d, jsx as t } from "react/jsx-runtime";
-import { styled as a } from "@linaria/react";
+import { styled as l } from "@linaria/react";
 import { useStore as n } from "@nanostores/react";
-import { r as s } from "../../../../index-jRXrW6ie.js";
+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 "../../../../index-uEuzH3jr.js";
 import "react";
+import "../../../../index-uEuzH3jr.js";
+import "../../../gamification/copyNotification/index.js";
+import "../../../icons/index.js";
+import "../../../gamification/copyNotification/styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../../gamification/constants.js";
 import "../../../gamification/detail/header/styles.js";
-import "../../../icons/index.js";
 import "../../../../utils/common.js";
 import "../../../gamification/user-statistics/components/rank/index.js";
 import "../../../gamification/user-statistics/components/rank/styles.js";
@@ -77,11 +79,11 @@ import "../../../button/index.js";
 import "../../../button/styles.js";
 import "../../../gamification/question/list/styles.js";
 import "./UserSummary.js";
-const I = () => x, c = /* @__PURE__ */ a(I())({
+const I = () => x, c = /* @__PURE__ */ l(I())({
   name: "OpenedContainer",
   class: "oar61gl",
   propsAsIs: !0
-}), O = /* @__PURE__ */ a("div")({
+}), O = /* @__PURE__ */ l("div")({
   name: "UserContainer",
   class: "u14zaal4",
   propsAsIs: !1
@@ -91,12 +93,12 @@ const I = () => x, c = /* @__PURE__ */ a(I())({
 }) => {
   const o = r + m;
   return o === 0 ? 0 : Math.round(r / o * 100);
-}, Lr = ({
+}, Yr = ({
   gamification: r,
   scrollStore: m,
   className: o,
   appNode: i,
-  scrollNode: l
+  scrollNode: a
 }) => {
   const u = n(r.openedQuestion.$store), p = n(r.openedUser);
   return /* @__PURE__ */ e(d, {
@@ -119,13 +121,14 @@ const I = () => x, c = /* @__PURE__ */ a(I())({
         })]
       })
     }), i.current), /* @__PURE__ */ t(S, {
+      appNode: i,
       scrollStore: m,
-      scrollNode: l,
+      scrollNode: a,
       className: o,
       gamification: r
     })]
   });
 };
 export {
-  Lr as GamificationOverlay
+  Yr as GamificationOverlay
 };

package/lib/ui/app/Notifications/Onboarding/index.js

@@ -2,17 +2,19 @@ import { jsx as t, jsxs as V, Fragment as b } from "react/jsx-runtime";
 import { cx as f } from "@linaria/core";
 import { styled as m } from "@linaria/react";
 import { useRef as v, useState as H, useLayoutEffect as M, useEffect as w } from "react";
-import { r as Z } from "../../../../index-jRXrW6ie.js";
+import { r as Z } from "../../../../useClipboardCopy-E5rEe6It.js";
 import { FeatureType as y } from "@streamlayer/sdk-web-types";
 import { Onboarding as k } from "../../../gamification/onboarding/index.js";
 import { ShowIn as x } from "../../../show-in/index.js";
 import { Onboarding as u } from "./Notification/index.js";
 import "../../../../index-uEuzH3jr.js";
+import "../../../gamification/copyNotification/index.js";
+import "../../../icons/index.js";
+import "../../../gamification/copyNotification/styles.js";
 import "react-virtualized-auto-sizer";
 import "../../../gamification/onboarding/slides/onboarding-instructions/index.js";
 import "../../../gamification/onboarding/slides/onboarding-instructions/styles.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
-import "../../../icons/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
 import "../../../gamification/onboarding/slides/onboarding-rules/index.js";
 import "../../../gamification/onboarding/slides/onboarding-rules/styles.js";
@@ -101,7 +103,7 @@ const S = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
       gamification: p
     })
   });
-}, r2 = ({
+}, o2 = ({
   sdk: a,
   notification: C,
   saveHeight: r,
@@ -147,5 +149,5 @@ const S = "data:image/svg+xml,%3csvg%20width='92'%20height='19'%20viewBox='0%200
   });
 };
 export {
-  r2 as Onboarding
+  o2 as Onboarding
 };

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

@@ -1,7 +1,7 @@
-import { jsxs as h, Fragment as v, jsx as s } from "react/jsx-runtime";
+import { jsxs as h, Fragment as v, jsx as m } from "react/jsx-runtime";
 import { useStore as O } from "@nanostores/react";
 import { useState as a, useMemo as S, useEffect as g, useRef as T, useCallback as R } from "react";
-import { r as C } from "../../../index-jRXrW6ie.js";
+import { r as C } from "../../../useClipboardCopy-E5rEe6It.js";
 import { NotificationType as c } from "@streamlayer/sdk-web-notifications";
 import { QuestionTypeData as D } from "../../gamification/constants.js";
 import { Notification as b } from "../../gamification/question/notification/index.js";
@@ -9,11 +9,13 @@ import { PredictionResult as E } from "../../gamification/question/notification/
 import { Onboarding as P } from "./Onboarding/index.js";
 import { Pill as x, HiddenContainer as I, Container as B, InnerContainer as H, NotificationRefreshing as q } from "./styles.js";
 import "../../../index-uEuzH3jr.js";
+import "../../gamification/copyNotification/index.js";
+import "../../icons/index.js";
+import "@linaria/react";
+import "../../gamification/copyNotification/styles.js";
 import "@streamlayer/sdk-web-types";
 import "../../gamification/question/notification/insight/index.js";
 import "../../video-player/index.js";
-import "../../icons/index.js";
-import "@linaria/react";
 import "../../video-player/styles.js";
 import "../../gamification/question/notification/insight/styles.js";
 import "../../gamification/question/notification/styles.js";
@@ -44,7 +46,7 @@ import "./Onboarding/Notification/styles.js";
 import "../../gamification/question/notification/pill/index.js";
 import "../../gamification/question/notification/pill/styles.js";
 const w = (p) => {
-  const [t, o] = a(0), e = T(null), m = R((i) => {
+  const [t, o] = a(0), e = T(null), s = R((i) => {
     e.current = i;
   }, []);
   g(() => {
@@ -55,62 +57,62 @@ const w = (p) => {
   const r = R((i) => {
     o(i);
   }, []);
-  return [m, t, r];
+  return [s, t, r];
 }, Q = ({
   sdk: p,
   notification: t,
   appNode: o
 }) => {
   var i, n;
-  const [e, m, r] = w(t.id);
+  const [e, s, r] = w(t.id);
   return t.type === c.QUESTION ? /* @__PURE__ */ h(v, {
-    children: [/* @__PURE__ */ s(I, {
+    children: [/* @__PURE__ */ m(I, {
       ref: e,
       style: {
         position: "absolute"
       },
-      children: /* @__PURE__ */ s(b, {
+      children: /* @__PURE__ */ m(b, {
         ...t
       })
     }), /* @__PURE__ */ h(B, {
       style: {
-        height: t.hiding ? 0 : m
+        height: t.hiding ? 0 : s
       },
       hiding: t.hiding,
-      children: [/* @__PURE__ */ s(H, {
+      children: [/* @__PURE__ */ m(H, {
         style: {
           height: "100%"
         },
-        children: /* @__PURE__ */ s(b, {
+        children: /* @__PURE__ */ m(b, {
           ...t
         })
-      }), /* @__PURE__ */ s(q, {}, t.id)]
+      }), /* @__PURE__ */ m(q, {}, t.id)]
     })]
-  }) : t.type === c.QUESTION_RESOLVED && ((n = (i = t.data) == null ? void 0 : i.question) != null && n.predictionResult) ? /* @__PURE__ */ s(E, {
+  }) : t.type === c.QUESTION_RESOLVED && ((n = (i = t.data) == null ? void 0 : i.question) != null && n.predictionResult) ? /* @__PURE__ */ m(E, {
     style: {
-      height: t.hiding ? 0 : m
+      height: t.hiding ? 0 : s
     },
     saveHeight: r,
     close: t.close,
     hiding: t.hiding,
     ...t.data.question
-  }) : t.type === c.ONBOARDING && o.current ? /* @__PURE__ */ s(P, {
+  }) : t.type === c.ONBOARDING && o.current ? /* @__PURE__ */ m(P, {
     style: {
-      height: t.hiding ? 0 : m
+      height: t.hiding ? 0 : s
     },
     saveHeight: r,
     sdk: p,
     notification: t,
     appNode: o
   }) : null;
-}, Et = ({
+}, xt = ({
   sdk: p,
   scrollNode: t,
   appNode: o,
   scrollStore: e
 }) => {
   var f, y;
-  const [m] = a(p.getNotificationsStore()), r = O(m), {
+  const [s] = a(p.getNotificationsStore()), r = O(s), {
     tabsShown: i
   } = O(e, {
     keys: ["tabsShown"]
@@ -127,11 +129,11 @@ const w = (p) => {
   }, [l, e]), g(() => e.listen((u) => {
     u.scrollPosition === 0 && d(null);
   }), [e]), /* @__PURE__ */ h(v, {
-    children: [!n && l && /* @__PURE__ */ s(Q, {
+    children: [!n && l && /* @__PURE__ */ m(Q, {
       appNode: o,
       sdk: p,
       notification: l
-    }), n && o.current && C.createPortal(/* @__PURE__ */ s(x, {
+    }), n && o.current && C.createPortal(/* @__PURE__ */ m(x, {
       title: `New ${((y = D[(f = n.data) == null ? void 0 : f.questionType]) == null ? void 0 : y.label) || "notification"}`,
       onClick: () => {
         var u;
@@ -145,5 +147,5 @@ const w = (p) => {
   });
 };
 export {
-  Et as SDKNotifications
+  xt as SDKNotifications
 };

package/lib/ui/app/masters.js

@@ -21,14 +21,16 @@ import "@linaria/react";
 import "../navigation/index.js";
 import "../../index_ej4hfx-w40geAFS.js";
 import "../../masters_m6itlr-w40geAFS.js";
-import "../../index-jRXrW6ie.js";
+import "../../useClipboardCopy-E5rEe6It.js";
 import "../../index-uEuzH3jr.js";
+import "../gamification/copyNotification/index.js";
+import "../icons/index.js";
+import "../gamification/copyNotification/styles.js";
 import "@streamlayer/sdk-web-notifications";
 import "../gamification/constants.js";
 import "../gamification/question/notification/index.js";
 import "../gamification/question/notification/insight/index.js";
 import "../video-player/index.js";
-import "../icons/index.js";
 import "../video-player/styles.js";
 import "../gamification/question/notification/insight/styles.js";
 import "../gamification/question/notification/styles.js";
@@ -78,7 +80,7 @@ const K = ({ sdk: t, className: p, scrollStore: e, appNode: r, scrollNode: a })
       sdk: t
     }
   );
-}, Jt = ({ sdk: t, overlays: p, children: e }) => {
+}, Qt = ({ sdk: t, overlays: p, children: e }) => {
   const [r, a] = F(), o = g(null), { sdkEnabled: s, sdkReady: n, activeOverlay: i, activateAndLoadOverlay: l, activateEventWithId: f, deactivate: u, isLogged: v } = x(t);
   return h(() => {
     import("./Features/Gamification/gamification-feature.js");
@@ -111,5 +113,5 @@ const K = ({ sdk: t, className: p, scrollStore: e, appNode: r, scrollNode: a })
   ] });
 };
 export {
-  Jt as MastersApp
+  Qt as MastersApp
 };

package/lib/ui/app/useClipboardCopy.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useClipboardCopy: (appNode: React.MutableRefObject<HTMLDivElement | null>) => [(link: string | undefined) => Promise<void>, import("react").ReactPortal | null];

package/lib/ui/app/useClipboardCopy.js

@@ -0,0 +1,11 @@
+import "react/jsx-runtime";
+import "react";
+import { u } from "../../useClipboardCopy-E5rEe6It.js";
+import "../gamification/copyNotification/index.js";
+import "../../index-uEuzH3jr.js";
+import "../icons/index.js";
+import "@linaria/react";
+import "../gamification/copyNotification/styles.js";
+export {
+  u as useClipboardCopy
+};

package/lib/ui/gamification/onboarding/index.js

@@ -7,7 +7,11 @@ import { OnboardingRules as z } from "./slides/onboarding-rules/index.js";
 import { Container as E, OnboardingHeader as F, CloseBtn as G, IconClose as H, Content as M, OnboardingFooter as P, OnboardingActionBtn as R } from "./styles.js";
 import "./slides/onboarding-instructions/styles.js";
 import "@linaria/react";
+import "../../../useClipboardCopy-E5rEe6It.js";
+import "../../../index-uEuzH3jr.js";
+import "../copyNotification/index.js";
 import "../../icons/index.js";
+import "../copyNotification/styles.js";
 import "./slides/onboarding-invite-card/styles.js";
 import "./slides/onboarding-rules/styles.js";
 import "../../button/index.js";
@@ -16,48 +20,48 @@ const a = {
   steps: !1,
   rules: !1,
   inviteCard: !1
-}, s = ({
+}, oi = ({
   gamification: u,
-  steps: n,
+  steps: i,
   rules: t,
-  rulesBtnLabel: d,
+  rulesBtnLabel: m,
   rulesTitle: b,
-  primaryColor: m,
+  primaryColor: d,
   inviteLink: C,
   socialLinks: S,
-  inviteCardTitle: y,
-  inviteCardSubtext: O,
+  inviteCardTitle: p,
+  inviteCardSubtext: y,
   inviteCardBtnLabel: c,
-  onClose: v
+  onClose: O
 }) => {
-  const [r, f] = h(0), [i, e] = h(a);
+  const [r, f] = h(0), [n, e] = h(a);
   k(() => {
-    n != null && n.length ? e({ ...a, steps: !0 }) : t != null && t.length ? e({ ...a, rules: !0 }) : e({ ...a, inviteCard: !0 });
+    i != null && i.length ? e({ ...a, steps: !0 }) : t != null && t.length ? e({ ...a, rules: !0 }) : e({ ...a, inviteCard: !0 });
   }, []);
-  const I = D(() => i.steps && r === 0 ? "Continue" : i.rules ? d || "Got it" : i.inviteCard ? c || "Play Now" : "Next", [i, r, d, c]), p = T(() => {
-    n != null && n.length && r < n.length - 1 ? f((l) => ++l) : t != null && t.length && i.steps ? e({ ...a, rules: !0 }) : i.rules && e({ ...a, inviteCard: !0 });
-  }, [r, n == null ? void 0 : n.length, t == null ? void 0 : t.length, i, f, e]), x = async () => {
+  const v = D(() => n.steps && r === 0 ? "Continue" : n.rules ? m || "Got it" : n.inviteCard ? c || "Play Now" : "Next", [n, r, m, c]), I = T(() => {
+    i != null && i.length && r < i.length - 1 ? f((l) => ++l) : t != null && t.length && n.steps ? e({ ...a, rules: !0 }) : n.rules && e({ ...a, inviteCard: !0 });
+  }, [r, i == null ? void 0 : i.length, t == null ? void 0 : t.length, n, f, e]), x = async () => {
     await u.onboardingStatus.submitInplay();
   };
   return /* @__PURE__ */ o(j, { children: ({ width: l, height: N }) => /* @__PURE__ */ g(E, { style: { width: l, height: N }, children: [
-    /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(G, { onClick: v, children: /* @__PURE__ */ o(H, { name: "icon-close-btn-gray" }) }) }),
+    /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(G, { onClick: O, children: /* @__PURE__ */ o(H, { name: "icon-close-btn-gray" }) }) }),
     /* @__PURE__ */ g(M, { children: [
-      i.steps && (n == null ? void 0 : n.length) && /* @__PURE__ */ o(w, { stepsCount: n.length, currentStep: r, ...n[r] }),
-      i.rules && /* @__PURE__ */ o(z, { rules: t, rulesTitle: b, primaryColor: m }),
-      i.inviteCard && /* @__PURE__ */ o(
+      n.steps && (i == null ? void 0 : i.length) && /* @__PURE__ */ o(w, { stepsCount: i.length, currentStep: r, ...i[r] }),
+      n.rules && /* @__PURE__ */ o(z, { rules: t, rulesTitle: b, primaryColor: d }),
+      n.inviteCard && /* @__PURE__ */ o(
         A,
         {
           inviteLink: C,
-          inviteCardTitle: y,
-          inviteCardSubtext: O,
-          primaryColor: m,
+          inviteCardTitle: p,
+          inviteCardSubtext: y,
+          primaryColor: d,
           socialLinks: S
         }
       )
     ] }),
-    /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(R, { onClick: i.inviteCard ? x : p, children: I }) })
+    /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(R, { onClick: n.inviteCard ? x : I, children: v }) })
   ] }) });
 };
 export {
-  s as Onboarding
+  oi as Onboarding
 };

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { icons } from '../../../../icons';
 export type OnboardingInviteCardProps = {
+    appNode: React.MutableRefObject<HTMLDivElement | null>;
     inviteLink?: string;
     inviteCardTitle?: string;
     inviteCardSubtext?: string;

package/lib/ui/gamification/onboarding/slides/onboarding-invite-card/index.js

@@ -1,40 +1,42 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { SvgIcon as m } from "../../../../icons/index.js";
-import { Container as p, IconContainer as C, InviteGameIcon as b, Content as g, Heading as I, Subtext as s, LinkContainer as y, LinkInfo as f, LinkTitle as k, LinkAddress as x, LinkIcon as S, SocialLinksContainer as L, SocialLink as u, SocialLinkLabel as v } from "./styles.js";
-import "@linaria/react";
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { u as I } from "../../../../../useClipboardCopy-E5rEe6It.js";
+import { SvgIcon as f } from "../../../../icons/index.js";
+import { Container as g, IconContainer as k, InviteGameIcon as s, Content as b, Heading as y, Subtext as u, LinkContainer as L, LinkInfo as S, LinkTitle as x, LinkAddress as v, LinkIcon as j, SocialLinksContainer as A, SocialLink as G, SocialLinkLabel as H } from "./styles.js";
 import "react";
-const O = ({
-  inviteLink: e,
-  socialLinks: o,
-  inviteCardTitle: t,
-  inviteCardSubtext: a,
-  primaryColor: l,
+import "../../../../../index-uEuzH3jr.js";
+import "../../../copyNotification/index.js";
+import "../../../copyNotification/styles.js";
+import "@linaria/react";
+const E = ({
+  appNode: t,
+  inviteLink: r,
+  socialLinks: i,
+  inviteCardTitle: c,
+  inviteCardSubtext: l,
+  primaryColor: a,
   className: d
-}) => /* @__PURE__ */ r(p, { className: d, children: [
-  /* @__PURE__ */ n(C, { style: { backgroundColor: l }, children: /* @__PURE__ */ n(b, { name: "invite-game-icon" }) }),
-  /* @__PURE__ */ r(g, { children: [
-    /* @__PURE__ */ n(I, { children: t || "" }),
-    /* @__PURE__ */ n(s, { children: a || "" })
-  ] }),
-  e && /* @__PURE__ */ r(y, { onClick: async () => {
-    if (e)
-      try {
-        await navigator.clipboard.writeText(e);
-      } catch (i) {
-        console.error("Unable to copy to clipboard", i);
-      }
-  }, children: [
-    /* @__PURE__ */ r(f, { children: [
-      /* @__PURE__ */ n(k, { children: "Invite link" }),
-      /* @__PURE__ */ n(x, { children: e })
+}) => {
+  const [m, p] = I(t);
+  return /* @__PURE__ */ o(g, { className: d, children: [
+    /* @__PURE__ */ n(k, { style: { backgroundColor: a }, children: /* @__PURE__ */ n(s, { name: "invite-game-icon" }) }),
+    /* @__PURE__ */ o(b, { children: [
+      /* @__PURE__ */ n(y, { children: c || "" }),
+      /* @__PURE__ */ n(u, { children: l || "" })
     ] }),
-    /* @__PURE__ */ n(S, { name: "icon-copy" })
-  ] }),
-  o && o.length > 0 && /* @__PURE__ */ n(L, { children: o.map(({ icon: i, link: c, label: h }) => /* @__PURE__ */ r(u, { href: c, target: "_blank", children: [
-    /* @__PURE__ */ n(m, { name: i }),
-    /* @__PURE__ */ n(v, { children: h })
-  ] }, c)) })
-] });
+    r && /* @__PURE__ */ o(L, { onClick: () => m(r), children: [
+      /* @__PURE__ */ o(S, { children: [
+        /* @__PURE__ */ n(x, { children: "Invite link" }),
+        /* @__PURE__ */ n(v, { children: r })
+      ] }),
+      /* @__PURE__ */ n(j, { name: "icon-copy" })
+    ] }),
+    i && i.length > 0 && /* @__PURE__ */ n(A, { children: i.map(({ icon: h, link: e, label: C }) => /* @__PURE__ */ o(G, { href: e, target: "_blank", children: [
+      /* @__PURE__ */ n(f, { name: h }),
+      /* @__PURE__ */ n(H, { children: C })
+    ] }, e)) }),
+    p
+  ] });
+};
 export {
-  O as OnboardingInviteCard
+  E as OnboardingInviteCard
 };