@streamlayer/react-ui 1.9.0 → 1.10.0

package/lib/app/app/Advertisement/index.d.ts

@@ -8,6 +8,7 @@ export type StreamLayerSDKAdvertisementProps = {
     sidebar?: 'left' | 'right';
     banner?: 'top' | 'bottom';
     layoutMode?: 'cover' | 'side-by-side';
+    skipAutoClose?: boolean;
 };
 export declare const StreamLayerSDKAdvertisement: React.FC<StreamLayerSDKAdvertisementProps & {
     sdk: StreamLayerSDK;

package/lib/app/app/Advertisement/index.js

@@ -1,99 +1,110 @@
-import { jsx as s } from "react/jsx-runtime";
-import { styled as p } from "@linaria/react";
-import { useStore as f } from "@nanostores/react";
-import { useAnalyticsListener as v } from "../../../hooks/analytics.js";
-import { useRef as y } from "react";
-import { eventBus as c } from "@streamlayer/sdk-web-interfaces";
-import { FeatureType as A, PromotionType as g } from "@streamlayer/sdk-web-types";
-import { AdvertisementUI as b } from "../../../ui/advertisement/index.js";
-const S = /* @__PURE__ */ p("div")({
+import { jsx as m } from "react/jsx-runtime";
+import { cx as b } from "@linaria/core";
+import { styled as g } from "@linaria/react";
+import { useStore as A } from "@nanostores/react";
+import { useAnalyticsListener as h } from "../../../hooks/analytics.js";
+import { useRef as L } from "react";
+import { eventBus as v } from "@streamlayer/sdk-web-interfaces";
+import { FeatureType as I, NotificationPromotionMode as w, PromotionType as T } from "@streamlayer/sdk-web-types";
+import { AdvertisementUI as U } from "../../../ui/advertisement/index.js";
+const N = /* @__PURE__ */ g("div")({
   name: "AdvertisementUIWrap",
   class: "aa6pjif",
   propsAsIs: !1
-}), h = (n) => {
-  const t = n.target;
-  if (t instanceof HTMLAnchorElement && t.target === "_blank") {
-    const r = t.getAttribute("data-promo-id") || "", i = t.getAttribute("data-promo-type") || g.UNSET;
-    t.getAttribute("data-analytics") === "button" && c.emit("advertisement", {
+}), W = (r) => {
+  const e = r.target;
+  if (e instanceof HTMLAnchorElement && e.target === "_blank") {
+    const o = e.getAttribute("data-promo-id") || "", i = e.getAttribute("data-promo-type") || T.UNSET;
+    e.getAttribute("data-analytics") === "button" && v.emit("advertisement", {
       action: "buttonSelect",
       payload: {
-        advertisementId: r,
-        advertisementType: i
+        id: o,
+        type: i
       }
-    }), t.getAttribute("data-analytics") === "banner" && c.emit("advertisement", {
+    }), e.getAttribute("data-analytics") === "banner" && v.emit("advertisement", {
       action: "bannerSelect",
       payload: {
-        advertisementId: r,
-        advertisementType: i
+        id: o,
+        type: i
       }
     });
   }
-}, I = ({
-  gamification: n,
-  layoutMode: t,
-  skipTypeCheck: r,
-  sidebar: i,
-  banner: o,
-  notification: m,
+}, E = ({
+  gamification: r,
+  layoutMode: e,
+  skipAutoClose: o,
+  skipTypeCheck: i,
+  sidebar: n,
+  banner: a,
+  notification: d,
   isMobileScreen: l,
-  persistent: d
+  persistent: c
 }) => {
-  const a = y(null), e = f(n.advertisement.$store);
-  v(a, {
-    enabled: !!e.data,
+  var f, p, u;
+  const s = L(null), t = A(r.advertisement.$store);
+  h(s, {
+    enabled: !!t.data,
     event: "click",
-    listener: h
+    listener: W
   });
-  const u = !o && !i;
-  return e.data === void 0 || !d && e.isViewed ? null : /* @__PURE__ */ s(S, {
-    ref: a,
+  const y = !a && !n;
+  if (t.data === void 0 || !c && t.isViewed)
+    return null;
+  const S = ((u = (p = (f = t == null ? void 0 : t.data) == null ? void 0 : f.notification) == null ? void 0 : p.promotion) == null ? void 0 : u.mode) === w.LOWER_THIRD;
+  return /* @__PURE__ */ m(N, {
+    ref: s,
     style: {
-      height: u ? "auto" : "100%"
+      height: y ? "auto" : "100%"
     },
-    className: l ? "mobile-view" : "",
-    children: /* @__PURE__ */ s(b, {
-      skipTypeCheck: r,
-      sidebar: i,
-      banner: o,
-      advertisement: e.data,
-      close: e.close,
-      layoutMode: t,
-      isNotification: m
+    className: b("SL-AdvertisementUIWrap", l && "mobile-view", S && "SL-AdvertisementUIWrap--lower-third"),
+    children: /* @__PURE__ */ m(U, {
+      skipTypeCheck: i,
+      sidebar: n,
+      banner: a,
+      advertisement: t.data,
+      close: t.close,
+      markAsViewed: r.advertisement.markAsViewed,
+      open: r.advertisement.open,
+      layoutMode: e,
+      isNotification: d,
+      skipAutoClose: o
     })
   });
-}, D = ({
-  sdk: n,
-  sidebar: t,
-  banner: r,
-  skipTypeCheck: i,
-  layoutMode: o,
-  isMobileScreen: m,
+}, H = ({
+  sdk: r,
+  sidebar: e,
+  banner: o,
+  skipAutoClose: i,
+  skipTypeCheck: n,
+  layoutMode: a,
+  isMobileScreen: d,
   persistent: l,
-  notification: d
+  notification: c
 }) => {
-  const a = f(n.featuresList.getStore());
-  if (t && r)
-    return /* @__PURE__ */ s("div", {
+  const s = A(r.featuresList.getStore());
+  if (e && o)
+    return /* @__PURE__ */ m("div", {
       style: {
         color: "red"
       },
       children: "define either sidebar or banner, not both."
     });
-  if (!a)
+  if (!s)
     return null;
-  const e = n.getFeature(A.GAMES);
-  return e ? /* @__PURE__ */ s(I, {
-    gamification: e,
-    sidebar: t,
-    banner: r,
-    layoutMode: o,
-    isMobileScreen: m,
+  const t = r.getFeature(I.GAMES);
+  return t ? /* @__PURE__ */ m(E, {
+    gamification: t,
+    sidebar: e,
+    banner: o,
+    layoutMode: a,
+    isMobileScreen: d,
     persistent: l,
-    notification: d,
-    skipTypeCheck: i
+    notification: c,
+    skipTypeCheck: n,
+    skipAutoClose: i
   }) : null;
 };
 export {
-  S as AdvertisementUIWrap,
-  D as StreamLayerSDKAdvertisement
+  N as AdvertisementUIWrap,
+  H as StreamLayerSDKAdvertisement
 };

package/lib/app/app/Features/Gamification/Question.d.ts

@@ -3,5 +3,6 @@ export declare const Question: React.FC<{
     gamification: Gamification;
     hideSponsor?: boolean;
     className?: string;
+    skipAutoClose?: boolean;
     hideHeader?: boolean;
 }>;

package/lib/app/app/Features/Gamification/Question.js

@@ -1,73 +1,75 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { styled as f } from "@linaria/react";
-import { useStore as m } from "@nanostores/react";
-import { useAppContext as b } from "../../useAppContext.js";
-import { QuestionType as y } from "@streamlayer/sdk-web-types";
-import { VoteHeader as V } from "../../../../ui/gamification/detail/header/index.js";
-import { Sponsor as d } from "../../../../ui/gamification/detail/sponsor/index.js";
-import { Vote as h, VoteSkeleton as x } from "../../../../ui/gamification/vote/index.js";
-import { InsightDetails as S } from "../../../../ui/gamification/vote/insight-details/index.js";
-import { TwitterDetails as g } from "../../../../ui/gamification/vote/twitter-details/index.js";
-const q = /* @__PURE__ */ f("div")({
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
+import { styled as v } from "@linaria/react";
+import { useStore as d } from "@nanostores/react";
+import { useAppContext as T } from "../../useAppContext.js";
+import { QuestionType as V } from "@streamlayer/sdk-web-types";
+import { VoteHeader as h } from "../../../../ui/gamification/detail/header/index.js";
+import { Sponsor as x } from "../../../../ui/gamification/detail/sponsor/index.js";
+import { Vote as S, VoteSkeleton as g } from "../../../../ui/gamification/vote/index.js";
+import { InsightDetails as q } from "../../../../ui/gamification/vote/insight-details/index.js";
+import { TwitterDetails as D } from "../../../../ui/gamification/vote/twitter-details/index.js";
+const w = /* @__PURE__ */ v("div")({
   name: "QuestionContainer",
   class: "q14ckf9e",
   propsAsIs: !1
-}), v = ({
+}), A = ({
   openedQuestion: t
 }) => {
-  var s, i;
+  var r, s;
   const {
     sdk: o
-  } = b();
-  return ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "insight" ? /* @__PURE__ */ r(S, {
+  } = T();
+  return ((r = t == null ? void 0 : t.attributes) == null ? void 0 : r.attributes.case) === "insight" ? /* @__PURE__ */ e(q, {
     ...t.attributes.attributes.value,
     controlVideo: o == null ? void 0 : o.controlVideoPlayer
-  }) : ((i = t == null ? void 0 : t.attributes) == null ? void 0 : i.attributes.case) === "tweet" ? /* @__PURE__ */ r(g, {
+  }) : ((s = t == null ? void 0 : t.attributes) == null ? void 0 : s.attributes.case) === "tweet" ? /* @__PURE__ */ e(D, {
     ...t.attributes.attributes.value,
     controlVideo: o == null ? void 0 : o.controlVideoPlayer
   }) : null;
-}, D = ({
+}, C = ({
   extendedQuestion: t,
   vote: o,
-  close: s
+  close: r
 }) => {
   const {
-    loading: i,
-    data: e
+    loading: s,
+    data: i
   } = t;
-  return e ? /* @__PURE__ */ r(h, {
+  return i ? /* @__PURE__ */ e(S, {
     vote: o,
-    close: s,
-    openedQuestion: e,
-    isLoading: !!i
-  }) : /* @__PURE__ */ r(x, {});
-}, E = ({
+    close: r,
+    openedQuestion: i,
+    isLoading: !!s
+  }) : /* @__PURE__ */ e(g, {});
+}, z = ({
   gamification: t,
-  hideSponsor: o,
+  skipAutoClose: o,
+  hideSponsor: r,
   className: s,
   hideHeader: i
 }) => {
-  var u, a, c;
-  const e = m(t.openedQuestion.$store), n = m(t.openedQuestion.$extendedStore);
-  if (!e)
+  var u, c, m, p, f;
+  const n = d(t.openedQuestion.$store), l = d(t.openedQuestion.$extendedStore);
+  if (!n)
     return null;
-  const l = e.type;
-  return /* @__PURE__ */ p(q, {
+  const a = n.type, b = ((c = (u = l.data) == null ? void 0 : u.options) == null ? void 0 : c.options.case) === "factoid" ? l.data.options.options.value.closeTimer : void 0;
+  return /* @__PURE__ */ y(w, {
     className: s,
-    children: [!i && /* @__PURE__ */ r(V, {
+    children: [!i && /* @__PURE__ */ e(h, {
+      closeTimer: o ? void 0 : b,
       close: t.closeQuestion,
-      type: ((u = e.attributes) == null ? void 0 : u.type) || y.UNSET
-    }), l === "question" && /* @__PURE__ */ r(D, {
+      type: ((m = n.attributes) == null ? void 0 : m.type) || V.UNSET
+    }), a === "question" && /* @__PURE__ */ e(C, {
       vote: t.submitAnswer,
       close: t.closeQuestion,
-      extendedQuestion: n
-    }), l !== "question" && /* @__PURE__ */ r(v, {
-      openedQuestion: e
-    }), !o && /* @__PURE__ */ r(d, {
-      sponsorLogo: (c = (a = n.data) == null ? void 0 : a.sponsorship) == null ? void 0 : c.logo
+      extendedQuestion: l
+    }), a !== "question" && /* @__PURE__ */ e(A, {
+      openedQuestion: n
+    }), !r && /* @__PURE__ */ e(x, {
+      sponsorLogo: (f = (p = l.data) == null ? void 0 : p.sponsorship) == null ? void 0 : f.logo
     })]
   });
 };
 export {
-  E as Question
+  z as Question
 };

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

@@ -1,30 +1,31 @@
-import { jsxs as h, jsx as e, Fragment as x } from "react/jsx-runtime";
-import { useStore as u } from "@nanostores/react";
-import { TabsContainer as D, TabsNavContainer as T, SDKWhiteContainer as v, UserSummaryContainer as C, SDKContentContainer as A, LeaderboardContainer as I } from "../../../styles.js";
-import { scrollIntoAppView as P } from "../../../useSdkScroll.js";
-import { useState as S, useTransition as V, useEffect as E } from "react";
+import { jsxs as h, jsx as e, Fragment as T } from "react/jsx-runtime";
+import { cx as x } from "@linaria/core";
+import { useStore as p } from "@nanostores/react";
+import { TabsContainer as D, TabsNavContainer as v, SDKWhiteContainer as C, UserSummaryContainer as S, SDKContentContainer as A, LeaderboardContainer as I } from "../../styles.js";
+import { scrollIntoAppView as L } from "../../../useSdkScroll.js";
+import { useState as P, useTransition as V, useEffect as E } from "react";
 import { ActivePages as a, Tabs as K } from "../../../../ui/gamification/tabs/index.js";
-import { Leaderboard as L } from "./Leaderboard.js";
-import { QuestionsList as F } from "./QuestionsList.js";
-import { UserSummary as O } from "./UserSummary.js";
-const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
-  const { tabsShown: d } = u(t, { keys: ["tabsShown"] }), [i, w] = S(a.HOME), [, y] = V(), { sdkInDesktopView: m, screen: g } = u(n, { keys: ["sdkInDesktopView"] }), k = (r) => {
+import { Leaderboard as F } from "./Leaderboard.js";
+import { QuestionsList as O } from "./QuestionsList.js";
+import { UserSummary as Q } from "./UserSummary.js";
+const G = ({ gamification: r, className: u, scrollStore: t, scrollNode: l, appNode: c, style: b, responsiveStore: n }) => {
+  const { tabsShown: m } = p(t, { keys: ["tabsShown"] }), [i, w] = P(a.HOME), [, y] = V(), { sdkInDesktopView: d, screen: g } = p(n, { keys: ["sdkInDesktopView"] }), k = (s) => {
     y(() => {
-      var p;
-      w(r), m === !1 && (((p = c.current) == null ? void 0 : p.getBoundingClientRect().y) || 0) < 0 && P(c, g.size, { behavior: "instant" });
+      var f;
+      w(s), d === !1 && (((f = c.current) == null ? void 0 : f.getBoundingClientRect().y) || 0) < 0 && L(c, g.size, { behavior: "instant" });
     });
   };
-  E(() => t.subscribe((r) => {
-    if (r.scrollPosition === 0) {
+  E(() => t.subscribe((s) => {
+    if (s.scrollPosition === 0) {
       t.setKey("tabsShown", !0);
       return;
     }
-    n.get().sdkInDesktopView ? t.setKey("tabsShown", r.scrollDirection === "backward") : t.setKey("tabsShown", r.scrollDirection === "forward");
+    n.get().sdkInDesktopView ? t.setKey("tabsShown", s.scrollDirection === "backward") : t.setKey("tabsShown", s.scrollDirection === "forward");
   }), [t, n]);
   let o = "0px";
-  return m ? o = d ? "0px" : "calc(8px - var(--header-height) - var(--header-offset))" : o = d ? "calc(var(--header-height) + var(--header-offset) - 2px)" : "0px", /* @__PURE__ */ h(D, { className: f, style: b, children: [
+  return d ? o = m ? "0px" : "calc(var(--header-height) - var(--header-offset))" : o = m ? "calc(var(--header-height) + var(--header-offset))" : "0px", /* @__PURE__ */ h(D, { className: x(u, "SL-Tabs"), style: b, children: [
     /* @__PURE__ */ e(
-      T,
+      v,
       {
         style: {
           top: o
@@ -32,13 +33,13 @@ const q = ({ gamification: s, className: f, scrollStore: t, scrollNode: l, appNo
         children: /* @__PURE__ */ e(K, { activePage: i, toggleActivePage: k })
       }
     ),
-    i === a.HOME && /* @__PURE__ */ h(x, { children: [
-      /* @__PURE__ */ e(v, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(O, { userSummary: s.userSummary }) }) }),
-      /* @__PURE__ */ e(A, { style: { flex: 1 }, children: /* @__PURE__ */ e(F, { openQuestion: s.openQuestion, store: s.feedList.getStore() }) })
+    i === a.HOME && /* @__PURE__ */ h(T, { children: [
+      /* @__PURE__ */ e(C, { style: { paddingTop: "8px" }, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(Q, { userSummary: r.userSummary }) }) }),
+      /* @__PURE__ */ e(A, { style: { flex: 1 }, children: /* @__PURE__ */ e(O, { openQuestion: r.openQuestion, store: r.feedList.getStore() }) })
     ] }),
-    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(L, { scrollStore: t, scrollNode: l, gamification: s }) })
+    i === a.LEADERBOARD && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(F, { scrollStore: t, scrollNode: l, gamification: r }) })
   ] });
 };
 export {
-  q as Tabs
+  G as Tabs
 };

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

@@ -1,7 +1,7 @@
 import { jsx as n, jsxs as f } from "react/jsx-runtime";
 import { styled as m } from "@linaria/react";
 import { useStore as l } from "@nanostores/react";
-import { SDKWhiteContainer as h } from "../../../styles.js";
+import { SDKWhiteContainer as h } from "../../styles.js";
 import { useHideTransition as C } from "../../../../hooks/showIn.js";
 import { VoteHeader as k } from "../../../../ui/gamification/detail/header/index.js";
 import { UserStatistics as S } from "../../../../ui/gamification/user-statistics/index.js";

package/lib/app/app/Insight/index.d.ts

@@ -6,11 +6,13 @@ export declare const QuestionWrap: {
     gamification: Gamification;
     hideSponsor?: boolean;
     className?: string;
+    skipAutoClose?: boolean;
     hideHeader?: boolean;
 }>;
 export type StreamLayerSDKInsightProps = {
     hideHeader?: boolean;
     persistent?: boolean;
+    skipAutoClose?: boolean;
 };
 export declare const StreamLayerSDKInsight: React.FC<StreamLayerSDKInsightProps & {
     sdk: StreamLayerSDK;

package/lib/app/app/Insight/index.js

@@ -1,23 +1,24 @@
-import { jsx as c } from "react/jsx-runtime";
-import { styled as Q } from "@linaria/react";
-import { useStore as d } from "@nanostores/react";
-import { useRef as i, useEffect as l } from "react";
-import { FeatureType as m } from "@streamlayer/sdk-web-types";
-import { Question as S } from "../Features/Gamification/Question.js";
-const y = () => S, I = /* @__PURE__ */ Q(y())({
+import { jsx as d } from "react/jsx-runtime";
+import { styled as i } from "@linaria/react";
+import { useStore as Q } from "@nanostores/react";
+import { useRef as l, useEffect as m } from "react";
+import { FeatureType as S } from "@streamlayer/sdk-web-types";
+import { Question as y } from "../Features/Gamification/Question.js";
+const I = () => y, b = /* @__PURE__ */ i(I())({
   name: "QuestionWrap",
   class: "q10hhsxv",
   propsAsIs: !0
-}), b = ({
+}), v = ({
   gamification: e,
   persistent: o,
-  hideHeader: p,
+  skipAutoClose: p,
+  hideHeader: f,
   insightId: r
 }) => {
-  const t = i(""), n = d(e.openedQuestion.$store);
-  return l(() => r ? (!o || e.isOpenedQuestion(r) || (t.current = r, e.getFeedItem(r).then((u) => {
-    var f;
-    t.current === r && ((f = u == null ? void 0 : u.attributes) == null ? void 0 : f.attributes.case) === "insight" && e.openQuestion(r, u);
+  const t = l(""), n = Q(e.openedQuestion.$store);
+  return m(() => r ? (!o || e.isOpenedQuestion(r) || (t.current = r, e.getFeedItem(r).then((u) => {
+    var c;
+    t.current === r && ((c = u == null ? void 0 : u.attributes) == null ? void 0 : c.attributes.case) === "insight" && e.openQuestion(r, u);
   })), () => {
     t.current = "";
   }) : (e.activeQuestionId.subscribe(({
@@ -26,28 +27,31 @@ const y = () => S, I = /* @__PURE__ */ Q(y())({
     var u;
     s && ((u = s.feedItem) == null ? void 0 : u.type) === "insight" && (!o || e.isOpenedQuestion(s.feedItem.id) || (t.current = s.feedItem.id, e.openQuestion(s.feedItem.id, s.feedItem))), !s && t.current && (e.closeQuestion(t.current), t.current = "");
   }), () => {
-  }), [e, o, r]), n ? /* @__PURE__ */ c(I, {
-    hideHeader: p,
+  }), [e, o, r]), n ? /* @__PURE__ */ d(b, {
+    skipAutoClose: p,
+    hideHeader: f,
     gamification: e,
     hideSponsor: !0
   }) : null;
-}, h = ({
+}, A = ({
   sdk: e,
   persistent: o,
-  insightId: p,
+  skipAutoClose: p,
+  insightId: f,
   hideHeader: r
 }) => {
-  if (!d(e.featuresList.getStore()))
+  if (!Q(e.featuresList.getStore()))
     return null;
-  const n = e.getFeature(m.GAMES);
-  return n ? /* @__PURE__ */ c(b, {
-    insightId: p,
+  const n = e.getFeature(S.GAMES);
+  return n ? /* @__PURE__ */ d(v, {
+    insightId: f,
     persistent: o,
     hideHeader: r,
-    gamification: n
+    gamification: n,
+    skipAutoClose: p
   }) : null;
 };
 export {
-  I as QuestionWrap,
-  h as StreamLayerSDKInsight
+  b as QuestionWrap,
+  A as StreamLayerSDKInsight
 };

package/lib/app/app/Navigation/SDKPillNode.d.ts

@@ -0,0 +1 @@
+export declare const SDKPillNode: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;

package/lib/app/app/Navigation/SDKPillNode.js

@@ -0,0 +1,9 @@
+import { styled as s } from "@linaria/react";
+const l = /* @__PURE__ */ s("div")({
+  name: "SDKPillNode",
+  class: "sze5zj7",
+  propsAsIs: !1
+});
+export {
+  l as SDKPillNode
+};