catchup-library-web 1.20.26 → 1.20.28

package/dist/index.js

@@ -4424,46 +4424,67 @@ var import_react13 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var MediaDropdown = ({ id, answer, optionList }) => {
   const [showDropdown, setShowDropdown] = (0, import_react13.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-    "div",
-    {
-      className: "w-full relative",
-      onMouseEnter: () => {
-        setShowDropdown(true);
-      },
-      onMouseLeave: () => {
+  const dropdownRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowDropdown(false);
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "ul",
+      }
+    };
+    if (showDropdown) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [showDropdown]);
+  const handleToggleDropdown = (e) => {
+    e.stopPropagation();
+    setShowDropdown((prev) => !prev);
+  };
+  const handleOptionClick = (option, e) => {
+    e.stopPropagation();
+    if (option.onClick) {
+      option.onClick(e);
+    }
+    setShowDropdown(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: dropdownRef, className: "w-full relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        className: "w-full flex flex-col items-center justify-center cursor-pointer",
+        onClick: handleToggleDropdown,
+        children: answer
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "ul",
+      {
+        className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
+        children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          "li",
           {
-            className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-            children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-              "li",
-              {
-                className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-                    "div",
-                    {
-                      className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
-                      onClick: option.onClick,
-                      children: option.media
-                    }
-                  ),
-                  index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
-                ]
-              },
-              option.id
-            ))
-          }
-        )
-      ]
-    },
-    id
-  );
+            className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                "div",
+                {
+                  className: `w-full flex flex-col my-2 cursor-pointer ${option.divClassNames ? option.divClassNames : ""}`,
+                  onClick: (e) => handleOptionClick(option, e),
+                  children: option.media
+                }
+              ),
+              index !== optionList.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+            ]
+          },
+          option.id
+        ))
+      }
+    )
+  ] }, id);
 };
 var MediaDropdown_default = MediaDropdown;
 

package/dist/index.mjs

@@ -4103,7 +4103,7 @@ var InputGroup = ({
 var InputGroup_default = InputGroup;
 
 // src/components/activities/material-contents/DropdownActivityMaterialContent.tsx
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { useState as useState15 } from "react";
 
 // src/utilization/AppUtilization.ts
@@ -4204,55 +4204,76 @@ var getColorByIndex = (index) => {
 };
 
 // src/components/dropdowns/MediaDropdown.tsx
-import { useState as useState13 } from "react";
+import { useState as useState13, useEffect as useEffect4, useRef as useRef2 } from "react";
 import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
 var MediaDropdown = ({ id, answer, optionList }) => {
   const [showDropdown, setShowDropdown] = useState13(false);
-  return /* @__PURE__ */ jsxs13(
-    "div",
-    {
-      className: "w-full relative",
-      onMouseEnter: () => {
-        setShowDropdown(true);
-      },
-      onMouseLeave: () => {
+  const dropdownRef = useRef2(null);
+  useEffect4(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowDropdown(false);
-      },
-      children: [
-        /* @__PURE__ */ jsx23("div", { className: "w-full flex flex-col items-center justify-center", children: answer }),
-        /* @__PURE__ */ jsx23(
-          "ul",
+      }
+    };
+    if (showDropdown) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [showDropdown]);
+  const handleToggleDropdown = (e) => {
+    e.stopPropagation();
+    setShowDropdown((prev) => !prev);
+  };
+  const handleOptionClick = (option, e) => {
+    e.stopPropagation();
+    if (option.onClick) {
+      option.onClick(e);
+    }
+    setShowDropdown(false);
+  };
+  return /* @__PURE__ */ jsxs13("div", { ref: dropdownRef, className: "w-full relative", children: [
+    /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: "w-full flex flex-col items-center justify-center cursor-pointer",
+        onClick: handleToggleDropdown,
+        children: answer
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      "ul",
+      {
+        className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
+        children: optionList.map((option, index) => /* @__PURE__ */ jsxs13(
+          "li",
           {
-            className: `absolute ${showDropdown ? "opacity-100 visible" : "opacity-0 invisible"} flex flex-col items-center w-[300px] rounded-catchup-xlarge border-3 transition-all duration-300 border-catchup-blue bg-catchup-white px-4 py-4 translate-x-1/2 right-1/2 mt-2 z-10`,
-            children: optionList.map((option, index) => /* @__PURE__ */ jsxs13(
-              "li",
-              {
-                className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
-                children: [
-                  /* @__PURE__ */ jsx23(
-                    "div",
-                    {
-                      className: `w-full flex flex-col my-2 ${option.divClassNames ? option.divClassNames : ""}`,
-                      onClick: option.onClick,
-                      children: option.media
-                    }
-                  ),
-                  index !== optionList.length - 1 ? /* @__PURE__ */ jsx23("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
-                ]
-              },
-              option.id
-            ))
-          }
-        )
-      ]
-    },
-    id
-  );
+            className: `${option.listItemClassNames ? option.listItemClassNames : ""}`,
+            children: [
+              /* @__PURE__ */ jsx23(
+                "div",
+                {
+                  className: `w-full flex flex-col my-2 cursor-pointer ${option.divClassNames ? option.divClassNames : ""}`,
+                  onClick: (e) => handleOptionClick(option, e),
+                  children: option.media
+                }
+              ),
+              index !== optionList.length - 1 ? /* @__PURE__ */ jsx23("div", { className: "w-full border my-1 border-catchup-light-blue rounded-catchup-full" }) : null
+            ]
+          },
+          option.id
+        ))
+      }
+    )
+  ] }, id);
 };
 var MediaDropdown_default = MediaDropdown;
 
 // src/components/activities/material-contents/ShowMaterialMediaByContentType.tsx
-import { useEffect as useEffect4, useRef as useRef2, useState as useState14 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState14 } from "react";
 import Modal3 from "react-modal";
 import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var ShowMaterialMediaByContentType = ({
@@ -4264,9 +4285,9 @@ var ShowMaterialMediaByContentType = ({
   const [showFullScreen, setShowFullScreen] = useState14(false);
   const [selectedFullScreenItem, setSelectedFullScreenItem] = useState14(null);
   const [isLoaded, setIsLoaded] = useState14(false);
-  const imageRef = useRef2(null);
-  const videoRef = useRef2(null);
-  useEffect4(() => {
+  const imageRef = useRef3(null);
+  const videoRef = useRef3(null);
+  useEffect5(() => {
     setIsLoaded(false);
   }, []);
   const RenderShowFullScreenItem = () => {
@@ -4405,7 +4426,7 @@ var DropdownActivityMaterialContent = ({
   showCorrectAnswer
 }) => {
   const [updated, setUpdated] = useState15(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "DROPDOWN"
@@ -4418,7 +4439,7 @@ var DropdownActivityMaterialContent = ({
     onChange(answer, 0, Object.keys(materialMap[0])[0]);
     setUpdated(true);
   }, [showCorrectAnswer]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!updated) return;
     setUpdated(false);
   }, [updated]);
@@ -4548,7 +4569,7 @@ var DropdownActivityMaterialContent = ({
 var DropdownActivityMaterialContent_default = DropdownActivityMaterialContent;
 
 // src/components/activities/DropdownActivityContent.tsx
-import { useState as useState16, useEffect as useEffect6 } from "react";
+import { useState as useState16, useEffect as useEffect7 } from "react";
 import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var DropdownActivityContent = ({
   answer,
@@ -4571,7 +4592,7 @@ var DropdownActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  useEffect6(() => {
+  useEffect7(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const handleDropdownAnswerOnChange = (answerObj, key, value) => {
@@ -4624,7 +4645,7 @@ var DropdownActivityContent_default = DropdownActivityContent;
 // src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx
 import { InlineMath as InlineMath4 } from "react-katex";
 import { useState as useState17 } from "react";
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { useDrop as useDrop2 } from "react-dnd";
 
 // src/components/dnds/DraggableItem.tsx
@@ -4661,7 +4682,7 @@ var DraggableItem = ({
 var DraggableItem_default = DraggableItem;
 
 // src/components/dnds/DroppableItem.tsx
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 import { useDrop } from "react-dnd";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var DroppableItem = ({
@@ -4672,7 +4693,7 @@ var DroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const [, drop] = useDrop({
     accept: type,
     hover() {
@@ -4735,10 +4756,10 @@ var FillInTheBlanksActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect7(() => {
+  useEffect8(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!showCorrectAnswer) return;
     const foundAnswer = answer.data.find(
       (answerData) => answerData.type === "FILL_IN_THE_BLANKS"
@@ -4925,7 +4946,7 @@ var FillInTheBlanksActivityMaterialContent = ({
 var FillInTheBlanksActivityMaterialContent_default = FillInTheBlanksActivityMaterialContent;
 
 // src/components/activities/FillInTheBlanksActivityContent.tsx
-import { useState as useState18, useEffect as useEffect8 } from "react";
+import { useState as useState18, useEffect as useEffect9 } from "react";
 import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 var FillInTheBlanksActivityContent = ({
   answer,
@@ -4955,7 +4976,7 @@ var FillInTheBlanksActivityContent = ({
     );
     return answer.data[foundIndex].answerMap;
   }
-  useEffect8(() => {
+  useEffect9(() => {
     setCurrentAnswerMap(retrieveCurrentAnswerMap());
   }, [answer]);
   const constructAnswerOptionList = () => {
@@ -5025,7 +5046,7 @@ var FillInTheBlanksActivityContent = ({
 var FillInTheBlanksActivityContent_default = FillInTheBlanksActivityContent;
 
 // src/components/activities/material-contents/GroupingActivityMaterialContent.tsx
-import { useEffect as useEffect9, useRef as useRef4, useState as useState19 } from "react";
+import { useEffect as useEffect10, useRef as useRef5, useState as useState19 } from "react";
 import { useDrop as useDrop3 } from "react-dnd";
 import { InlineMath as InlineMath5 } from "react-katex";
 import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -5052,8 +5073,8 @@ var GroupingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const ref = useRef4(null);
-  useEffect9(() => {
+  const ref = useRef5(null);
+  useEffect10(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5074,7 +5095,7 @@ var GroupingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "GROUPING"
@@ -5322,7 +5343,7 @@ var GroupingActivityContent = ({
 var GroupingActivityContent_default = GroupingActivityContent;
 
 // src/components/activities/material-contents/MatchingActivityMaterialContent.tsx
-import { useEffect as useEffect10, useRef as useRef5, useState as useState20 } from "react";
+import { useEffect as useEffect11, useRef as useRef6, useState as useState20 } from "react";
 import { useDrop as useDrop4 } from "react-dnd";
 import { InlineMath as InlineMath6 } from "react-katex";
 import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -5349,8 +5370,8 @@ var MatchingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  const itemsRef = useRef5(null);
-  useEffect10(() => {
+  const itemsRef = useRef6(null);
+  useEffect11(() => {
     const shuffleArray2 = (array) => {
       if (!isShuffled) {
         const copyArray = JSON.parse(JSON.stringify(array));
@@ -5369,7 +5390,7 @@ var MatchingActivityMaterialContent = ({
     });
     setShuffledMaterialList(shuffleArray2(materialList));
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "MATCHING"
@@ -6094,12 +6115,12 @@ var OpenEndedActivityContent = ({
 var OpenEndedActivityContent_default = OpenEndedActivityContent;
 
 // src/components/activities/material-contents/OrderingActivityMaterialContent.tsx
-import { useEffect as useEffect12, useState as useState22 } from "react";
+import { useEffect as useEffect13, useState as useState22 } from "react";
 import { useDrop as useDrop6 } from "react-dnd";
 import { InlineMath as InlineMath9 } from "react-katex";
 
 // src/hooks/useScreenSize.ts
-import { useState as useState21, useEffect as useEffect11 } from "react";
+import { useState as useState21, useEffect as useEffect12 } from "react";
 var useScreenSize = () => {
   const [containerSize, setContainerSize] = useState21({
     width: 0,
@@ -6109,7 +6130,7 @@ var useScreenSize = () => {
     width: window.innerWidth,
     height: window.innerHeight
   });
-  useEffect11(() => {
+  useEffect12(() => {
     const handleResize = () => {
       setScreenSize({
         width: window.innerWidth,
@@ -6134,7 +6155,7 @@ var useScreenSize = () => {
 var useScreenSize_default = useScreenSize;
 
 // src/components/dnds/DraggableDroppableItem.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef7 } from "react";
 import { useDrag as useDrag2, useDrop as useDrop5 } from "react-dnd";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var DraggableDroppableItem = ({
@@ -6146,7 +6167,7 @@ var DraggableDroppableItem = ({
   target,
   setTarget
 }) => {
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   const [, drop] = useDrop5({
     accept: type,
     hover() {
@@ -6209,7 +6230,7 @@ var OrderingActivityMaterialContent = ({
       canDrop: monitor.canDrop()
     })
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (!screenSize) return;
     if (screenSize.width <= 1024) {
       setView("TABLET");
@@ -6217,7 +6238,7 @@ var OrderingActivityMaterialContent = ({
       setView("PC");
     }
   }, [screenSize]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!showCorrectAnswer) return;
     const answerMap2 = answer.data.find(
       (answerData) => answerData.type === "ORDERING"
@@ -6405,7 +6426,7 @@ var OrderingActivityContent = ({
 var OrderingActivityContent_default = OrderingActivityContent;
 
 // src/components/activities/material-contents/TrueFalseActivityMaterialContent.tsx
-import { useEffect as useEffect13, useState as useState23 } from "react";
+import { useEffect as useEffect14, useState as useState23 } from "react";
 import { InlineMath as InlineMath10 } from "react-katex";
 import { Fragment as Fragment10, jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 var TrueFalseActivityMaterialContent = ({
@@ -6420,7 +6441,7 @@ var TrueFalseActivityMaterialContent = ({
 }) => {
   const { screenSize } = useScreenSize_default();
   const [shuffleOptionList, setShuffleOptionList] = useState23([]);
-  useEffect13(() => {
+  useEffect14(() => {
     const optionList = [];
     optionList.push(...materialMap.trueList);
     optionList.push(...materialMap.falseList);
@@ -6430,7 +6451,7 @@ var TrueFalseActivityMaterialContent = ({
       setShuffleOptionList(shuffleArray(optionList));
     }
   }, []);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!showCorrectAnswer) return;
     answer.data.find(
       (answerData) => answerData.type === "TRUE_FALSE"
@@ -6740,7 +6761,7 @@ var ActivityEvaluationRubricContent = ({
 var ActivityEvaluationRubricContent_default = ActivityEvaluationRubricContent;
 
 // src/components/activities/ActivityPreviewByData.tsx
-import { useEffect as useEffect14, useState as useState24 } from "react";
+import { useEffect as useEffect15, useState as useState24 } from "react";
 
 // src/components/boxes/SelectionBox.tsx
 import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
@@ -6795,11 +6816,11 @@ var ActivityPreviewByData = ({
   const [key, setKey] = useState24((/* @__PURE__ */ new Date()).getTime());
   const [selectedType, setSelectedType] = useState24(null);
   const [optionList, setOptionList] = useState24([]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
     let foundTypeOption;
@@ -6814,7 +6835,7 @@ var ActivityPreviewByData = ({
       setSelectedType(typeOptionList[0].id);
     }
   }, [typeOptionList, lockedType]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!data) return;
     if (!typeOptionList) return;
     if (typeOptionList.length === 0) return;
@@ -6997,7 +7018,7 @@ var ActivityPreviewByData = ({
 var ActivityPreviewByData_default = ActivityPreviewByData;
 
 // src/components/activities/ActivityPreviewByAnswerData.tsx
-import { useEffect as useEffect15, useState as useState25 } from "react";
+import { useEffect as useEffect16, useState as useState25 } from "react";
 import { Fragment as Fragment12, jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
 var ActivityPreviewByAnswerData = ({
   data,
@@ -7016,7 +7037,7 @@ var ActivityPreviewByAnswerData = ({
   const [selectedType, setSelectedType] = useState25(null);
   const [optionList, setOptionList] = useState25([]);
   const [answer, setAnswer] = useState25({ data: [] });
-  useEffect15(() => {
+  useEffect16(() => {
     if (!data) return;
     setKey((/* @__PURE__ */ new Date()).getTime());
   }, [data]);
@@ -7029,7 +7050,7 @@ var ActivityPreviewByAnswerData = ({
     }
     return null;
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (!data) return;
     const constructAnswerBasedOnData2 = () => {
       const newAnswer = { data: [] };
@@ -7068,7 +7089,7 @@ var ActivityPreviewByAnswerData = ({
     };
     constructAnswerBasedOnData2();
   }, [data, lockedType]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!data || !answer.data.length) return;
     let currentTypeOptionList = typeOptionList || answer.data.map((item) => ({
       id: item.type,
@@ -7235,7 +7256,7 @@ var LeftTextRightInputGroup = ({
 var LeftTextRightInputGroup_default = LeftTextRightInputGroup;
 
 // src/components/groups/PageTravelGroup.tsx
-import { useEffect as useEffect16, useState as useState26 } from "react";
+import { useEffect as useEffect17, useState as useState26 } from "react";
 import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
 var PageTravelGroup = ({
   isImageProcessing,
@@ -7247,11 +7268,11 @@ var PageTravelGroup = ({
 }) => {
   const [totalPageNumber, setTotalPageNumber] = useState26(0);
   const [newPageNumber, setNewPageNumber] = useState26(0);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!initialTotalPageNumber) return;
     setTotalPageNumber(initialTotalPageNumber);
   }, [initialTotalPageNumber]);
-  useEffect16(() => {
+  useEffect17(() => {
     setNewPageNumber(pageNumber + 1);
   }, [pageNumber]);
   return /* @__PURE__ */ jsxs40("div", { className: "flex-1 flex flex-row justify-center items-center flex-wrap", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.20.26",
+  "version": "1.20.28",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -13,7 +13,9 @@
   "dependencies": {
     "@types/lodash": "^4.17.20",
     "lodash": "^4.17.21",
-    "mathlive": "^0.105.3"
+    "mathlive": "^0.105.3",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-touch-backend": "^16.0.1"
   },
   "peerDependencies": {
     "i18next": ">=22.0.0",

package/src/components/dropdowns/MediaDropdown.tsx

@@ -1,21 +1,53 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { IDropdownProps } from "../../properties/DropdownProperties";
 
 const MediaDropdown = ({ id, answer, optionList }: IDropdownProps) => {
   const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  return (
-    <div
-      key={id}
-      className="w-full relative"
-      onMouseEnter={() => {
-        setShowDropdown(true);
-      }}
-      onMouseLeave={() => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setShowDropdown(false);
-      }}
-    >
-      <div className="w-full flex flex-col items-center justify-center">
+      }
+    };
+
+    if (showDropdown) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("touchstart", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [showDropdown]);
+
+  const handleToggleDropdown = (e: React.MouseEvent | React.TouchEvent) => {
+    e.stopPropagation();
+    setShowDropdown((prev) => !prev);
+  };
+
+  const handleOptionClick = (
+    option: any,
+    e: React.MouseEvent | React.TouchEvent
+  ) => {
+    e.stopPropagation();
+    if (option.onClick) {
+      option.onClick(e);
+    }
+    setShowDropdown(false);
+  };
+
+  return (
+    <div key={id} ref={dropdownRef} className="w-full relative">
+      <div
+        className="w-full flex flex-col items-center justify-center cursor-pointer"
+        onClick={handleToggleDropdown}
+      >
         {answer}
       </div>
       <ul
@@ -31,10 +63,10 @@ const MediaDropdown = ({ id, answer, optionList }: IDropdownProps) => {
             }`}
           >
             <div
-              className={`w-full flex flex-col my-2 ${
+              className={`w-full flex flex-col my-2 cursor-pointer ${
                 option.divClassNames ? option.divClassNames : ""
               }`}
-              onClick={option.onClick}
+              onClick={(e) => handleOptionClick(option, e)}
             >
               {option.media}
             </div>