@streamlayer/react-ui 1.26.1 → 1.27.0

package/lib/ui/gamification/vote/styles.d.ts

@@ -1,5 +1,9 @@
 export declare const Container: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const QuestionScrollContainer: any;
+export declare const QuestionScrollContainer: {
+    __wyw_meta: unknown;
+} & import('react').FunctionComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown> & {
+    as?: React.ElementType;
+}>;
 export declare const TopShadow: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const BottomShadow: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const SponsorLogo: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
@@ -7,7 +11,28 @@ export declare const Content: import('@linaria/react').StyledComponent<import('r
 export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const OptionsWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Options: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const AlertContainer: any;
+export declare const AlertContainer: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    children: React.ReactNode | React.ReactNode[];
+    style?: React.CSSProperties;
+    className?: string;
+    enabled?: boolean;
+    hiding?: boolean;
+    onAnimationEnd?: React.AnimationEventHandler;
+}>;
 export declare const EarlyPrediction: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const EarlyPredictionIcon: any;
-export declare const SponsorIcon: any;
+export declare const EarlyPredictionIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
+export declare const SponsorIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;

package/lib/ui/gamification/vote/vote-option/index.d.ts

@@ -3,6 +3,7 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     questionVoted: boolean;
     youSelected: boolean;
     isLoading: boolean;
+    firstOption: boolean;
     hasCorrectAnswer?: boolean;
     questionType: QuestionType;
     imageMode?: QuestionImages;
@@ -15,5 +16,7 @@ export type VotingOptionProps = ExtendedQuestionAnswer & {
     markThatVoted: (votedAfterQuestionClosed: boolean) => void;
     onPercentsAnimated?: () => void;
     isEarlyPrediction?: boolean;
+    isAd?: boolean;
+    webos?: boolean;
 };
 export declare const VotingOption: React.FC<VotingOptionProps>;

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,98 +1,106 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useState as j, useLayoutEffect as y } from "react";
-import { QuestionImages as s, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as U } from "../../../animated-counter/index.js";
-import { IconDefault as V, IconContainer as $, IconWrap as F, IconCircle as M, ButtonContainer as z, ButtonPctWrap as G, ButtonPct as H, ButtonBody as J, Title as K, PtsWrap as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { withFocusable as U } from "../../../../app/webos/useTvButton.js";
+import { useState as V, useLayoutEffect as $ } from "react";
+import { QuestionImages as c, QuestionType as o, QuestionStatus as O } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as M } from "../../../animated-counter/index.js";
+import { IconDefault as z, IconContainer as G, IconWrap as H, IconCircle as J, ButtonPctWrap as K, ButtonPct as X, ButtonBody as Y, Title as Z, PtsWrap as _, Pts as q, Indicators as tt, CheckIcon as et, Percentage as nt, ButtonContainer as it } from "./styles.js";
 const E = {
-  [s.CENTERED]: (t) => /* @__PURE__ */ e(V, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [s.TRANSPARENT]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
-  [s.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [s.NONE]: () => null,
-  [s.UNSET]: () => null
-}, tt = ({ questionType: t, hasCorrectAnswer: a, correct: n, youVoted: r, questionVoted: i }) => {
-  if (t === o.POLL && r)
+  [c.CENTERED]: (t) => /* @__PURE__ */ e(z, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [c.TRANSPARENT]: (t) => /* @__PURE__ */ e(G, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(H, { style: { backgroundImage: `url(${t})` } }) }),
+  [c.ROUNDED]: (t) => /* @__PURE__ */ e(J, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [c.NONE]: () => null,
+  [c.UNSET]: () => null
+}, rt = ({ questionType: t, hasCorrectAnswer: a, correct: n, youVoted: i, questionVoted: r }) => {
+  if (t === o.POLL && i)
     return "voted";
   if (t === o.PREDICTION) {
-    if (!a && i)
-      return r ? "voted" : "unset";
-    if (a && i)
-      return r ? n ? "correct" : "incorrect" : "unset";
-    if (r)
+    if (!a && r)
+      return i ? "voted" : "unset";
+    if (a && r)
+      return i ? n ? "correct" : "incorrect" : "unset";
+    if (i)
       return "correct";
   }
-  return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
-}, et = ({
+  return t === o.TRIVIA && r && i ? n ? "correct" : "incorrect" : "unset";
+}, ot = ({
   questionType: t,
   questionVoted: a,
   correct: n,
-  hasCorrectAnswer: r,
-  questionStatus: i
-}) => t === o.TRIVIA ? a && n : t === o.PREDICTION ? a && n && r || i === S.RESOLVED && n : !1, ct = (t) => {
+  hasCorrectAnswer: i,
+  questionStatus: r
+}) => t === o.TRIVIA ? a && n : t === o.PREDICTION ? a && n && i || r === O.RESOLVED && n : !1, at = U(it), mt = (t) => {
   var N;
   const {
     // option props
     id: a,
     icon: n,
-    text: r,
-    percentageDecimal: i,
-    points: D,
+    text: i,
+    percentageDecimal: r,
+    points: w,
     // extra props
-    onVote: O,
+    onVote: D,
     markThatVoted: g,
-    onPercentsAnimated: u,
-    youSelected: h,
-    youVoted: w,
-    questionVoted: c,
-    imageMode: P,
-    answerTimeExpired: k,
-    questionStatus: C,
-    isLoading: v,
+    firstOption: k,
+    onPercentsAnimated: l,
+    youSelected: P,
+    youVoted: v,
+    questionVoted: s,
+    imageMode: C,
+    answerTimeExpired: A,
+    questionStatus: p,
+    isLoading: B,
     questionType: d,
-    correct: A,
-    hasCorrectAnswer: x,
+    correct: x,
+    hasCorrectAnswer: L,
     marketClosed: f,
-    isEarlyPrediction: B
-  } = t, [L, R] = j(0), I = tt(t), Q = et({ questionType: d, questionVoted: c, correct: A, hasCorrectAnswer: x, questionStatus: C }), m = f && d === o.PREDICTION, T = c || m, W = d === o.PREDICTION && !c && !f, p = c && !h && I !== "incorrect" && !w;
-  return y(() => {
+    isEarlyPrediction: b,
+    isAd: m,
+    webos: W
+  } = t, [F, R] = V(0), I = rt(t), Q = ot({ questionType: d, questionVoted: s, correct: x, hasCorrectAnswer: L, questionStatus: p }), h = f && d === o.PREDICTION, S = s || h, j = d === o.PREDICTION && !s && !f && !m, T = s && !P && I !== "incorrect" && !v;
+  return $(() => {
     R(0), requestAnimationFrame(() => {
-      R(i);
+      R(r);
     });
-  }, [i]), /* @__PURE__ */ l(
-    z,
+  }, [r]), /* @__PURE__ */ u(
+    at,
     {
       value: a,
-      "data-selected": h,
+      webos: W,
+      autoFocus: k,
+      "data-selected": P,
       "data-answer-state": I,
-      disabled: c || v || k || m,
-      "data-is-not-checked": p,
+      disabled: s || B || A || h,
+      "data-is-not-checked": T,
       "data-a": "intr",
-      onClick: (b) => {
+      onClick: (y) => {
         g(
-          d === o.PREDICTION ? f : C === S.RESOLVED
-        ), O(b);
+          d === o.PREDICTION ? f : p === O.RESOLVED
+        ), D(y);
       },
+      "data-is-ad": m,
       children: [
-        /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
-          H,
+        /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(
+          X,
           {
             "data-answer-state": I,
-            "data-is-not-checked": p,
-            style: { width: `${T ? L : 0}%` },
+            "data-is-not-checked": T,
+            style: { width: `${S ? F : 0}%` },
             onTransitionEnd: () => {
-              m || u == null || u();
-            }
+              h || l == null || l();
+            },
+            "data-is-ad": m
           }
         ) }),
-        /* @__PURE__ */ l(J, { "data-a": "intr", children: [
-          n && P && ((N = E[P]) == null ? void 0 : N.call(E, n)),
-          /* @__PURE__ */ e(K, { "data-a": "intr", children: r }),
-          W && /* @__PURE__ */ l(X, { children: [
-            D,
-            /* @__PURE__ */ e(Y, { children: "pts" })
+        /* @__PURE__ */ u(Y, { "data-a": "intr", children: [
+          n && C && ((N = E[C]) == null ? void 0 : N.call(E, n)),
+          /* @__PURE__ */ e(Z, { "data-a": "intr", children: i }),
+          j && /* @__PURE__ */ u(_, { children: [
+            w,
+            /* @__PURE__ */ e(q, { children: "pts" })
           ] }),
-          T && /* @__PURE__ */ l(Z, { children: [
-            Q && /* @__PURE__ */ e(_, { name: B ? "selectedBetPack" : "selected" }),
-            /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(U, { value: i, suffix: "%" }) })
+          S && /* @__PURE__ */ u(tt, { children: [
+            Q && /* @__PURE__ */ e(et, { name: b ? "selectedBetPack" : "selected" }),
+            /* @__PURE__ */ e(nt, { children: /* @__PURE__ */ e(M, { value: r, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -100,5 +108,5 @@ const E = {
   );
 };
 export {
-  ct as VotingOption
+  mt as VotingOption
 };

package/lib/ui/gamification/vote/vote-option/styles.d.ts

@@ -20,4 +20,10 @@ export declare const Indicators: import('@linaria/react').StyledComponent<import
 export declare const PtsWrap: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Pts: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const Percentage: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
-export declare const CheckIcon: any;
+export declare const CheckIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;

package/lib/ui/gamification/vote/win-bar/styles.d.ts

@@ -1,8 +1,25 @@
-export declare const ShowInContainer: any;
+export declare const ShowInContainer: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    children: React.ReactNode | React.ReactNode[];
+    style?: React.CSSProperties;
+    className?: string;
+    enabled?: boolean;
+    hiding?: boolean;
+    onAnimationEnd?: React.AnimationEventHandler;
+} & {
+    animate?: boolean;
+}>;
 export declare const WinBarContainer: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Content: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const Title: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
-export declare const WinIcon: any;
+export declare const WinIcon: {
+    __wyw_meta: unknown;
+} & import('react').FC<{
+    name: keyof typeof import('../../../icons').icons;
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export declare const Points: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
 export declare const PointsCount: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;
 export declare const PointsUnits: import('@linaria/react').StyledComponent<import('react').ClassAttributes<HTMLSpanElement> & import('react').HTMLAttributes<HTMLSpanElement> & Record<never, unknown>>;

package/lib/ui/icons/index.d.ts

@@ -33,6 +33,7 @@ export declare const icons: {
     'icon-check-white': any;
     'icon-check-green': any;
     'icon-check-circle': any;
+    'icon-correct': any;
     'icon-btn-channels': any;
     'icon-btn-feature-groups': any;
     'icon-btn-leaderboard': any;