@100mslive/roomkit-react 0.1.20-alpha.1 → 0.2.0

package/src/Prebuilt/components/Polls/CreateQuestions/{QuestionForm.jsx → QuestionForm.tsx}

@@ -1,21 +1,47 @@
 // @ts-check
 import React, { useCallback, useRef, useState } from 'react';
+import {
+  HMSPollQuestionCreateParams,
+  HMSPollQuestionOptionCreateParams,
+  HMSPollQuestionType,
+} from '@100mslive/react-sdk';
 import { AddCircleIcon, TrashIcon } from '@100mslive/react-icons';
-import { Box, Button, Dropdown, Flex, Input, Switch, Text, Tooltip } from '../../../../';
+import { Button, Dropdown, Flex, IconButton, Input, Switch, Text, TextArea, Tooltip } from '../../../..';
+// @ts-ignore
 import { DialogDropdownTrigger } from '../../../primitives/DropdownTrigger';
+// @ts-ignore
 import { DeleteQuestionModal } from './DeleteQuestionModal';
+// @ts-ignore
 import { useDropdownSelection } from '../../hooks/useDropdownSelection';
+// @ts-ignore
 import { isValidTextInput } from '../../../common/utils';
+import { Line } from '../common/Line';
+// @ts-ignore
 import { MultipleChoiceOptionInputs } from '../common/MultipleChoiceOptions';
+// @ts-ignore
 import { SingleChoiceOptionInputs } from '../common/SingleChoiceOptions';
 import { QUESTION_TYPE, QUESTION_TYPE_TITLE } from '../../../common/constants';
 
-export const QuestionForm = ({ question, index, length, onSave, removeQuestion, isQuiz }) => {
+export const QuestionForm = ({
+  question,
+  index,
+  length,
+  onSave,
+  removeQuestion,
+  isQuiz,
+}: {
+  question: HMSPollQuestionCreateParams & { draftID: number };
+  index: number;
+  length: number;
+  onSave: (optionParams: HMSPollQuestionCreateParams & { draftID: number; saved: boolean }) => void;
+  removeQuestion: () => void;
+  isQuiz: boolean;
+}) => {
   const ref = useRef(null);
   const selectionBg = useDropdownSelection();
   const [openDelete, setOpenDelete] = useState(false);
   const [open, setOpen] = useState(false);
-  const [type, setType] = useState(question.type || QUESTION_TYPE.SINGLE_CHOICE);
+  const [type, setType] = useState<HMSPollQuestionType>(question.type || QUESTION_TYPE.SINGLE_CHOICE);
   const [text, setText] = useState(question.text);
   const [weight, setWeight] = useState(isQuiz ? 10 : 1);
   const [options, setOptions] = useState(
@@ -34,14 +60,14 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
   });
 
   const handleOptionTextChange = useCallback(
-    (index, text) => {
+    (index: number, text: string) => {
       setOptions(options => [...options.slice(0, index), { ...options[index], text }, ...options.slice(index + 1)]);
     },
     [setOptions],
   );
 
   const removeOption = useCallback(
-    index =>
+    (index: number) =>
       setOptions(options => {
         const newOptions = [...options];
         newOptions.splice(index, 1);
@@ -51,7 +77,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
   );
 
   const selectSingleChoiceAnswer = useCallback(
-    answerIndex => {
+    (answerIndex: number) => {
       if (!isQuiz) {
         return;
       }
@@ -66,7 +92,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
   );
 
   const selectMultipleChoiceAnswer = useCallback(
-    (checked, index) => {
+    (checked: boolean, index: number) => {
       if (!isQuiz) {
         return;
       }
@@ -90,6 +116,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
       <Dropdown.Root open={open} onOpenChange={setOpen}>
         <DialogDropdownTrigger
           ref={ref}
+          // @ts-ignore
           title={QUESTION_TYPE_TITLE[type]}
           css={{
             backgroundColor: '$surface_bright',
@@ -98,17 +125,20 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
           open={open}
         />
         <Dropdown.Portal>
+          {/* @ts-ignore */}
           <Dropdown.Content align="start" sideOffset={8} css={{ w: ref.current?.clientWidth, zIndex: 1000 }}>
             {Object.keys(QUESTION_TYPE_TITLE).map(value => {
               return (
                 <Dropdown.Item
                   key={value}
+                  // @ts-ignore
                   onSelect={() => setType(value)}
                   css={{
                     px: '$9',
                     bg: type === value ? selectionBg : undefined,
                   }}
                 >
+                  {/* @ts-ignore */}
                   {QUESTION_TYPE_TITLE[value]}
                 </Dropdown.Item>
               );
@@ -116,20 +146,28 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
           </Dropdown.Content>
         </Dropdown.Portal>
       </Dropdown.Root>
-      <Input
+      <TextArea
+        maxLength={1024}
         placeholder="Ask a question"
         css={{
           mt: '$md',
           backgroundColor: '$surface_bright',
           border: '1px solid $border_bright',
+          minHeight: '$14',
+          resize: 'vertical',
+          maxHeight: '$32',
         }}
-        type="text"
         value={text}
         onChange={event => setText(event.target.value)}
       />
+      <Text variant="xs" css={{ color: '$on_surface_medium', textAlign: 'end', mt: '$4' }}>
+        {text?.length || 0}/1024
+      </Text>
+      <Line />
+      {/* @ts-ignore */}
       {type === QUESTION_TYPE.SINGLE_CHOICE || type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
         <>
-          <Text variant="body2" css={{ my: '$6', c: '$on_surface_medium' }}>
+          <Text variant="body2" css={{ mb: '$6', c: '$on_surface_medium' }}>
             Options
           </Text>
 
@@ -173,7 +211,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
               <AddCircleIcon style={{ position: 'relative', left: '-2px' }} />
 
               <Text
-                variant="body1"
+                variant="sm"
                 css={{
                   ml: '$4',
                   c: 'inherit',
@@ -183,9 +221,10 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
               </Text>
             </Flex>
           )}
+          <Line />
           {isQuiz ? (
             <>
-              <Flex justify="between" align="center" css={{ mt: '$md', gap: '$6', w: '100%' }}>
+              <Flex justify="between" align="center" css={{ gap: '$6', w: '100%' }}>
                 <Text variant="sm" css={{ color: '$on_surface_medium' }}>
                   Point Weightage
                 </Text>
@@ -194,7 +233,7 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
                   value={weight}
                   min={1}
                   max={999}
-                  onChange={e => setWeight(Math.min(e.target.value, 999))}
+                  onChange={e => setWeight(Math.min(Number(e.target.value), 999))}
                   css={{
                     backgroundColor: '$surface_bright',
                     border: '1px solid $border_bright',
@@ -213,21 +252,15 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
         </>
       ) : null}
 
-      <Flex justify="between" align="center" css={{ mt: '$12' }}>
-        <Box
-          css={{
-            color: '$on_surface_medium',
-            cursor: 'pointer',
-            '&:hover': { color: '$on_surface_high' },
-          }}
-        >
+      <Flex justify="end" align="center" css={{ mt: '$12', gap: '$8' }}>
+        <IconButton css={{ border: '1px solid $border_bright' }}>
           <TrashIcon onClick={() => setOpenDelete(!open)} />
-        </Box>
+        </IconButton>
         <Tooltip
           disabled={isValid}
           title={
-            options.length === 0
-              ? 'At least one option is required for a question'
+            options.length < 2
+              ? 'At least two options must be added'
               : `Please fill all the fields ${isQuiz ? 'and mark the correct answer(s)' : ''} to continue`
           }
           boxCss={{ maxWidth: '$40' }}
@@ -257,16 +290,24 @@ export const QuestionForm = ({ question, index, length, onSave, removeQuestion,
   );
 };
 
-export const isValidQuestion = ({ text, type, options, weight, isQuiz = false }) => {
+export const isValidQuestion = ({
+  text,
+  type,
+  options,
+  weight,
+  isQuiz = false,
+}: {
+  text: string;
+  type: string;
+  options: HMSPollQuestionOptionCreateParams[];
+  weight: number;
+  isQuiz?: boolean;
+}) => {
   if (!isValidTextInput(text) || !type) {
     return false;
   }
 
-  // if (![QUESTION_TYPE.SINGLE_CHOICE, QUESTION_TYPE.MULTIPLE_CHOICE].includes(type)) {
-  //   return true;
-  // }
-
-  const everyOptionHasText = options.length > 0 && options.every(option => option && isValidTextInput(option.text, 1));
+  const everyOptionHasText = options.length > 1 && options.every(option => option && isValidTextInput(option.text, 1));
   const hasCorrectAnswer = options.some(option => option.isCorrectAnswer);
 
   if (!isQuiz) {

package/src/Prebuilt/components/Polls/CreateQuestions/{SavedQuestion.jsx → SavedQuestion.tsx}

@@ -1,25 +1,41 @@
-// @ts-check
 import React, { useState } from 'react';
+import { HMSPollQuestion } from '@100mslive/react-sdk';
 import { CheckCircleIcon, TrashIcon } from '@100mslive/react-icons';
-import { Box, Button, Flex, Text } from '../../../../';
+import { Button, Flex, Text } from '../../../../';
+// @ts-ignore
+import IconButton from '../../../IconButton';
 import { DeleteQuestionModal } from './DeleteQuestionModal';
 import { QUESTION_TYPE_TITLE } from '../../../common/constants';
 
-export const SavedQuestion = ({ question, index, length, convertToDraft, removeQuestion }) => {
+export const SavedQuestion = ({
+  question,
+  index,
+  length,
+  convertToDraft,
+  removeQuestion,
+}: {
+  question: HMSPollQuestion & { draftID: number };
+  index: number;
+  length: number;
+  convertToDraft: (draftID: number) => void;
+  removeQuestion: (draftID: number) => void;
+}) => {
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   return (
     <>
       <Text variant="overline" css={{ c: '$on_surface_low', textTransform: 'uppercase' }}>
+        {/* @ts-ignore */}
         Question {index + 1} of {length}: {QUESTION_TYPE_TITLE[question.type]}
       </Text>
       <Text variant="body2" css={{ mt: '$4', mb: '$md' }}>
         {question.text}
       </Text>
-      {question.options.map((option, index) => (
+      {question.options?.map((option, index) => (
         <Flex key={`${option.text}-${index}`} css={{ alignItems: 'center', my: '$xs' }}>
           <Text variant="body2" css={{ c: '$on_surface_medium' }}>
             {option.text}
           </Text>
+          {/* @ts-ignore */}
           {option.isCorrectAnswer && (
             <Flex css={{ color: '$alert_success', mx: '$xs' }}>
               <CheckCircleIcon height={24} width={24} />
@@ -32,18 +48,11 @@ export const SavedQuestion = ({ question, index, length, convertToDraft, removeQ
           Not required to answer
         </Text>
       ) : null}
-      <Flex justify="between" css={{ w: '100%', alignItems: 'center' }}>
-        <Box
-          onClick={() => setOpenDeleteModal(true)}
-          css={{ color: '$on_surface_low', '&:hover': { color: '$on_surface_medium', cursor: 'pointer' } }}
-        >
+      <Flex justify="end" css={{ w: '100%', alignItems: 'center', gap: '$4' }}>
+        <IconButton onClick={() => setOpenDeleteModal(true)} css={{ background: 'none' }}>
           <TrashIcon />
-        </Box>
-        <Button
-          variant="standard"
-          css={{ fontWeight: '$semiBold', p: '$4 $8' }}
-          onClick={() => convertToDraft(question.draftID)}
-        >
+        </IconButton>
+        <Button variant="standard" css={{ fontWeight: '$semiBold' }} onClick={() => convertToDraft(question.draftID)}>
           Edit
         </Button>
       </Flex>

package/src/Prebuilt/components/Polls/Voting/LeaderboardSummary.tsx

@@ -39,7 +39,7 @@ export const LeaderboardSummary = ({ pollID }: { pollID: string }) => {
   useEffect(() => {
     const fetchLeaderboardData = async () => {
       if (!quizLeaderboard && quiz) {
-        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz, 0, 50);
+        const leaderboardData = await hmsActions.interactivityCenter.fetchLeaderboard(quiz.id, 0, 50);
         setQuizLeaderboard(leaderboardData);
       }
     };

package/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -1,24 +1,19 @@
 // @ts-check
 import React, { useCallback, useMemo, useState } from 'react';
 import { selectLocalPeer, selectLocalPeerRoleName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon, CrossCircleIcon } from '@100mslive/react-icons';
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CrossCircleIcon,
+} from '@100mslive/react-icons';
 import { Box, Button, Flex, IconButton, Text } from '../../../../';
 import { checkCorrectAnswer } from '../../../common/utils';
 import { MultipleChoiceOptions } from '../common/MultipleChoiceOptions';
 import { SingleChoiceOptions } from '../common/SingleChoiceOptions';
 import { QUESTION_TYPE } from '../../../common/constants';
 
-// const TextArea = styled('textarea', {
-//   backgroundColor: '$surface_brighter',
-//   border: '1px solid $border_bright',
-//   borderRadius: '$1',
-//   mb: '$md',
-//   color: '$on_surface_high',
-//   resize: 'none',
-//   p: '$2',
-//   w: '100%',
-// });
-
 export const QuestionCard = ({
   pollID,
   isQuiz,
@@ -70,6 +65,7 @@ export const QuestionCard = ({
   // const [textAnswer, setTextAnswer] = useState('');
   const [singleOptionAnswer, setSingleOptionAnswer] = useState();
   const [multipleOptionAnswer, setMultipleOptionAnswer] = useState(new Set());
+  const [showOptions, setShowOptions] = useState(true);
 
   // const stringAnswerExpected = [QUESTION_TYPE.LONG_ANSWER, QUESTION_TYPE.SHORT_ANSWER].includes(type);
 
@@ -174,76 +170,61 @@ export const QuestionCard = ({
         ) : null}
       </Flex>
 
-      <Box css={{ my: '$md' }}>
+      <Flex justify="between" css={{ my: '$md' }}>
         <Text css={{ color: '$on_surface_high' }}>{text}</Text>
-      </Box>
-
-      {/* {type === QUESTION_TYPE.SHORT_ANSWER ? (
-        <Input
-          disabled={!canRespond}
-          placeholder="Enter your answer"
-          onChange={e => setTextAnswer(e.target.value)}
-          css={{
-            w: '100%',
-            backgroundColor: '$surface_brighter',
-            mb: '$md',
-            border: '1px solid $border_default',
-            cursor: localPeerResponse ? 'not-allowed' : 'text',
-          }}
-        />
-      ) : null} */}
-
-      {/* {type === QUESTION_TYPE.LONG_ANSWER ? (
-        <TextArea
-          disabled={!canRespond}
-          placeholder="Enter your answer"
-          onChange={e => setTextAnswer(e.target.value)}
-        />
-      ) : null} */}
-
-      {type === QUESTION_TYPE.SINGLE_CHOICE ? (
-        <SingleChoiceOptions
-          questionIndex={index}
-          isQuiz={isQuiz}
-          canRespond={canRespond}
-          response={localPeerResponse}
-          correctOptionIndex={answer?.option}
-          options={options}
-          setAnswer={setSingleOptionAnswer}
-          totalResponses={result?.totalResponses}
-          showVoteCount={showVoteCount}
-          localPeerResponse={localPeerResponse}
-          isStopped={pollState === 'stopped'}
-        />
-      ) : null}
-
-      {type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
-        <MultipleChoiceOptions
-          questionIndex={index}
-          isQuiz={isQuiz}
-          canRespond={canRespond}
-          response={localPeerResponse}
-          correctOptionIndexes={answer?.options}
-          options={options}
-          selectedOptions={multipleOptionAnswer}
-          setSelectedOptions={setMultipleOptionAnswer}
-          totalResponses={result?.totalResponses}
-          showVoteCount={showVoteCount}
-          localPeerResponse={localPeerResponse}
-          isStopped={pollState === 'stopped'}
-        />
-      ) : null}
+        <Box
+          css={{ color: '$on_surface_medium', '&:hover': { color: '$on_surface_high', cursor: 'pointer' } }}
+          onClick={() => setShowOptions(prev => !prev)}
+        >
+          <ChevronDownIcon
+            style={{ transform: showOptions ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s ease' }}
+          />
+        </Box>
+      </Flex>
 
-      {isLive && (
-        <QuestionActions
-          isValidVote={isValidVote}
-          skippable={skippable}
-          onSkip={handleSkip}
-          onVote={handleVote}
-          response={localPeerResponse}
-          isQuiz={isQuiz}
-        />
-      )}
+      <Box css={{ maxHeight: showOptions ? '$80' : '0', transition: 'max-height 0.3s ease', overflowY: 'hidden' }}>
+        {type === QUESTION_TYPE.SINGLE_CHOICE ? (
+          <SingleChoiceOptions
+            questionIndex={index}
+            isQuiz={isQuiz}
+            canRespond={canRespond}
+            response={localPeerResponse}
+            correctOptionIndex={answer?.option}
+            options={options}
+            setAnswer={setSingleOptionAnswer}
+            totalResponses={result?.totalResponses}
+            showVoteCount={showVoteCount}
+            localPeerResponse={localPeerResponse}
+            isStopped={pollState === 'stopped'}
+          />
+        ) : null}
+        {type === QUESTION_TYPE.MULTIPLE_CHOICE ? (
+          <MultipleChoiceOptions
+            questionIndex={index}
+            isQuiz={isQuiz}
+            canRespond={canRespond}
+            response={localPeerResponse}
+            correctOptionIndexes={answer?.options}
+            options={options}
+            selectedOptions={multipleOptionAnswer}
+            setSelectedOptions={setMultipleOptionAnswer}
+            totalResponses={result?.totalResponses}
+            showVoteCount={showVoteCount}
+            localPeerResponse={localPeerResponse}
+            isStopped={pollState === 'stopped'}
+          />
+        ) : null}
+        {isLive && (
+          <QuestionActions
+            isValidVote={isValidVote}
+            skippable={skippable}
+            onSkip={handleSkip}
+            onVote={handleVote}
+            response={localPeerResponse}
+            isQuiz={isQuiz}
+          />
+        )}
+      </Box>
     </Box>
   );
 };

package/src/Prebuilt/components/Polls/Voting/{StandardVoting.jsx → StandardVoting.tsx}

@@ -1,14 +1,10 @@
-// @ts-check
 import React from 'react';
+import { HMSPoll } from '@100mslive/react-sdk';
 import { PeerParticipationSummary } from './PeerParticipationSummary';
+// @ts-ignore
 import { QuestionCard } from './QuestionCard';
 
-/**
- *
- * @param {{poll: import("@100mslive/react-sdk").HMSPoll}} param0
- * @returns
- */
-export const StandardView = ({ poll }) => {
+export const StandardView = ({ poll }: { poll: HMSPoll }) => {
   if (!poll?.questions) {
     return null;
   }

package/src/Prebuilt/components/Polls/Voting/{TimedVoting.jsx → TimedVoting.tsx}

@@ -1,19 +1,16 @@
-// @ts-check
 import React, { useState } from 'react';
+import { HMSPoll } from '@100mslive/react-sdk';
+// @ts-ignore
 import { QuestionCard } from './QuestionCard';
 
-/**
- *
- * @param {{poll: import("@100mslive/react-sdk").HMSPoll}} param0
- * @returns
- */
-export const TimedView = ({ poll }) => {
+export const TimedView = ({ poll }: { poll: HMSPoll }) => {
   // backend question index starts at 1
   const [currentIndex, setCurrentIndex] = useState(1);
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
   if (!activeQuestion) {
     return null;
   }
+
   return (
     <QuestionCard
       pollID={poll.id}

package/src/Prebuilt/components/Polls/Voting/{Voting.jsx → Voting.tsx}

@@ -1,4 +1,3 @@
-// @ts-check
 import React from 'react';
 import {
   selectLocalPeerID,
@@ -8,15 +7,17 @@ import {
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
-import { Box, Button, Flex, Text } from '../../../../';
+import { Box, Button, Flex, Text } from '../../../..';
+// @ts-ignore
 import { Container } from '../../Streaming/Common';
 import { StandardView } from './StandardVoting';
 import { TimedView } from './TimedVoting';
+// @ts-ignore
 import { usePollViewState } from '../../AppData/useUISettings';
 import { StatusIndicator } from '../common/StatusIndicator';
 import { POLL_VIEWS } from '../../../common/constants';
 
-export const Voting = ({ id, toggleVoting }) => {
+export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => void }) => {
   const actions = useHMSActions();
   const poll = useHMSStore(selectPollByID(id));
   const pollCreatorName = useHMSStore(selectPeerNameByID(poll?.createdBy));

package/src/Prebuilt/components/Polls/common/Line.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Flex } from '../../../../Layout';
+
+export const Line = () => <Flex css={{ w: '100%', borderBottom: '1px solid $border_bright', h: '1px', my: '$8' }} />;

package/src/Prebuilt/components/Polls/common/{OptionInputWithDelete.jsx → OptionInputWithDelete.tsx}

@@ -1,16 +1,28 @@
 import React from 'react';
+import { HMSPollQuestionOption } from '@100mslive/react-sdk';
 import { TrashIcon } from '@100mslive/react-icons';
 import { Input } from '../../../../Input';
+// @ts-ignore
 import IconButton from '../../../IconButton';
 
-export const OptionInputWithDelete = ({ index, option, handleOptionTextChange, removeOption }) => {
+export const OptionInputWithDelete = ({
+  index,
+  option,
+  handleOptionTextChange,
+  removeOption,
+}: {
+  index: number;
+  option: HMSPollQuestionOption;
+  handleOptionTextChange: (index: number, value: string) => void;
+  removeOption: (index: number) => void;
+}) => {
   return (
     <>
       <Input
         placeholder={`Option ${index + 1}`}
         css={{
           w: '100%',
-          backgroundColor: '$surface_default',
+          backgroundColor: '$surface_bright',
           border: '1px solid $border_bright',
         }}
         value={option?.text || ''}

package/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx

@@ -1,7 +1,7 @@
 // @ts-check
 import React from 'react';
 import { CheckCircleIcon } from '@100mslive/react-icons';
-import { Flex, Label, RadioGroup, Text } from '../../../../';
+import { Flex, Label, RadioGroup, Text } from '../../../..';
 import { OptionInputWithDelete } from './OptionInputWithDelete';
 import { VoteCount } from './VoteCount';
 import { VoteProgress } from './VoteProgress';

package/src/Prebuilt/components/Polls/common/{StatusIndicator.jsx → StatusIndicator.tsx}

@@ -1,8 +1,7 @@
-// @ts-check
 import React from 'react';
 import { Flex, Text } from '../../../../';
 
-export const StatusIndicator = ({ isLive }) => {
+export const StatusIndicator = ({ isLive }: { isLive: boolean }) => {
   return (
     <Flex align="center">
       <Flex

package/src/Prebuilt/components/Polls/common/{VoteCount.jsx → VoteCount.tsx}

@@ -1,8 +1,7 @@
-// @ts-check
 import React from 'react';
 import { Flex, Text } from '../../../../';
 
-export const VoteCount = ({ voteCount }) => {
+export const VoteCount = ({ voteCount }: { voteCount: number }) => {
   return (
     <Flex css={{ alignItems: 'center' }}>
       {voteCount ? (

package/src/Prebuilt/components/Polls/common/{VoteProgress.jsx → VoteProgress.tsx}

@@ -1,9 +1,10 @@
 import React from 'react';
+import { HMSPollQuestionOption } from '@100mslive/react-sdk';
 import { Progress } from '../../../../';
 
-export const VoteProgress = ({ option, totalResponses }) => {
+export const VoteProgress = ({ option, totalResponses }: { option: HMSPollQuestionOption; totalResponses: number }) => {
   const showProgress = typeof option.voteCount === 'number' && typeof totalResponses === 'number' && totalResponses > 0;
-  const progressValue = (100 * option.voteCount) / totalResponses;
+  const progressValue = (100 * (option.voteCount || 0)) / totalResponses;
 
   return showProgress ? (
     <Progress.Root value={progressValue} css={{ mt: '$4' }}>

package/src/Prebuilt/components/Polls/common/{VoterList.jsx → VoterList.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Avatar, Flex, Text } from '../../../../';
 
-export const VoterList = ({ voters }) => {
+export const VoterList = ({ voters }: { voters: string[] }) => {
   return voters.map((voter, index) => (
     <Flex align="center" key={`${voter}-${index}`} css={{ gap: '$4', py: '$2' }}>
       <Avatar

package/src/Prebuilt/components/TileMenu/TileMenu.jsx

@@ -18,6 +18,7 @@ import { StyledMenuTile } from '../../../TileMenu';
 import { ChangeNameModal } from '../MoreSettings/ChangeNameModal';
 import { TileMenuContent } from './TileMenuContent';
 import { useDropdownList } from '../hooks/useDropdownList';
+import { getDragClassName } from './utils';
 
 /**
  * Taking peerID as peer won't necesarilly have tracks
@@ -48,6 +49,7 @@ const TileMenu = ({
   const peer = useHMSStore(selectPeerByID(peerID));
   const [showNameChangeModal, setShowNameChangeModal] = useState(false);
   useDropdownList({ open, name: 'TileMenu' });
+  const dragClassName = getDragClassName();
 
   if (!(removeOthers || toggleAudio || toggleVideo || setVolume || showPinAction) && hideSimulcastLayers) {
     return null;
@@ -75,7 +77,7 @@ const TileMenu = ({
           data-testid="participant_menu_btn"
           css={{ bg: `${theme.colors.background_dim.value}A3`, p: '$2', w: 'unset', h: 'unset' }}
           onClick={e => e.stopPropagation()}
-          className={isMobile ? '__cancel-drag-event' : ''}
+          className={dragClassName}
         >
           <VerticalMenuIcon width={20} height={20} />
         </StyledMenuTile.Trigger>