catchup-library-web 2.6.1 → 2.6.3

package/dist/index.js

@@ -3819,7 +3819,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex flex-col", children: processedBodies.map((body, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -4943,6 +4943,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, option, element) => {
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedOption(option);
     setDraggedElement(element);
@@ -5060,6 +5061,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               {
                 ref: draggedOption === option ? dragElementRef : null,
                 className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+                style: { touchAction: "none" },
                 onMouseDown: (e) => handleMouseDown(e, option),
                 onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
                 onTouchMove: handleTouchMove,
@@ -5431,6 +5433,7 @@ var GroupingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5540,6 +5543,7 @@ var GroupingActivityMaterialContent = ({
           {
             ref: draggedValue === materialValue ? dragElementRef : null,
             className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+            style: { touchAction: "none" },
             onMouseDown: (e) => handleMouseDown(e, materialValue),
             onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
             onTouchMove: handleTouchMove,
@@ -5874,6 +5878,7 @@ var MatchingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5987,6 +5992,7 @@ var MatchingActivityMaterialContent = ({
             {
               ref: draggedValue === materialValue ? dragElementRef : null,
               className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+              style: { touchAction: "none" },
               onMouseDown: (e) => handleMouseDown(e, materialValue),
               onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
               onTouchMove: handleTouchMove,
@@ -6572,7 +6578,7 @@ var OpenEndedActivityMaterialContent = ({
           src: answerMapAnswer,
           alt: "document",
           size: "custom",
-          className: "w-[80%] rounded-catchup-xlarge"
+          className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
         }
       ) });
     } else if (fileType === "PDF") {
@@ -6614,7 +6620,7 @@ var OpenEndedActivityMaterialContent = ({
         src: answerMapAnswer,
         alt: "document",
         size: "custom",
-        className: "w-[80%] rounded-catchup-xlarge"
+        className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
       }
     ) }) : fileType === "PDF" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
@@ -6771,6 +6777,7 @@ var OrderingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialKey, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedKey(materialKey);
     setDraggedElement(element);
@@ -6902,6 +6909,7 @@ var OrderingActivityMaterialContent = ({
                     ref: draggedKey === materialKey ? dragElementRef : null,
                     "data-ordering-drop-zone": materialKey,
                     className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
+                    style: { touchAction: "none" },
                     onMouseDown: (e) => handleMouseDown(e, materialKey),
                     onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
                     onMouseLeave: () => setDropTargetKey(null),

package/dist/index.mjs

@@ -3585,7 +3585,7 @@ var ActivityBodyContent = ({
       key
     });
   }).filter(Boolean);
-  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col h-full overflow-y-auto", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx21("div", { className: "flex flex-col", children: processedBodies.map((body, index) => /* @__PURE__ */ jsx21(
     ShowBodyMediaByContentType_default,
     {
       index,
@@ -4709,6 +4709,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     setMousePosition({ x: 0, y: 0 });
   };
   const handleTouchStart = (e, option, element) => {
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedOption(option);
     setDraggedElement(element);
@@ -4826,6 +4827,7 @@ var FillInTheBlanksActivityMaterialContent = ({
               {
                 ref: draggedOption === option ? dragElementRef : null,
                 className: `${draggedOption === option ? "opacity-40" : selectedOption === option ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+                style: { touchAction: "none" },
                 onMouseDown: (e) => handleMouseDown(e, option),
                 onTouchStart: (e) => handleTouchStart(e, option, e.currentTarget),
                 onTouchMove: handleTouchMove,
@@ -5197,6 +5199,7 @@ var GroupingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5306,6 +5309,7 @@ var GroupingActivityMaterialContent = ({
           {
             ref: draggedValue === materialValue ? dragElementRef : null,
             className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+            style: { touchAction: "none" },
             onMouseDown: (e) => handleMouseDown(e, materialValue),
             onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
             onTouchMove: handleTouchMove,
@@ -5640,6 +5644,7 @@ var MatchingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialValue, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -5753,6 +5758,7 @@ var MatchingActivityMaterialContent = ({
             {
               ref: draggedValue === materialValue ? dragElementRef : null,
               className: `${draggedValue === materialValue ? "opacity-40" : selectedValue === materialValue ? "ring-2 ring-blue-500" : "opacity-100"} transition-all duration-200`,
+              style: { touchAction: "none" },
               onMouseDown: (e) => handleMouseDown(e, materialValue),
               onTouchStart: (e) => handleTouchStart(e, materialValue, e.currentTarget),
               onTouchMove: handleTouchMove,
@@ -6338,7 +6344,7 @@ var OpenEndedActivityMaterialContent = ({
           src: answerMapAnswer,
           alt: "document",
           size: "custom",
-          className: "w-[80%] rounded-catchup-xlarge"
+          className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
         }
       ) });
     } else if (fileType === "PDF") {
@@ -6380,7 +6386,7 @@ var OpenEndedActivityMaterialContent = ({
         src: answerMapAnswer,
         alt: "document",
         size: "custom",
-        className: "w-[80%] rounded-catchup-xlarge"
+        className: "w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
       }
     ) }) : fileType === "PDF" ? /* @__PURE__ */ jsx39("div", { className: "flex flex-col justify-center items-center my-5", children: /* @__PURE__ */ jsx39(BasePDF_default, { file: answerMapAnswer }) }) : null });
   };
@@ -6537,6 +6543,7 @@ var OrderingActivityMaterialContent = ({
   };
   const handleTouchStart = (e, materialKey, element) => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedKey(materialKey);
     setDraggedElement(element);
@@ -6668,6 +6675,7 @@ var OrderingActivityMaterialContent = ({
                     ref: draggedKey === materialKey ? dragElementRef : null,
                     "data-ordering-drop-zone": materialKey,
                     className: `flex-1 ${draggedKey === materialKey ? "opacity-40" : selectedKey === materialKey ? "ring-2 ring-blue-500" : "opacity-100"} ${dropTargetKey === materialKey && draggedKey !== materialKey ? "ring-2 ring-blue-400 bg-blue-50" : ""} transition-all duration-200`,
+                    style: { touchAction: "none" },
                     onMouseDown: (e) => handleMouseDown(e, materialKey),
                     onMouseEnter: () => draggedKey && draggedKey !== materialKey && setDropTargetKey(materialKey),
                     onMouseLeave: () => setDropTargetKey(null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/body-contents/ActivityBodyContent.tsx

@@ -107,7 +107,7 @@ const ActivityBodyContent = ({
     .filter(Boolean);
 
   return (
-    <div className="flex flex-col h-full overflow-y-auto">
+    <div className="flex flex-col">
       {processedBodies.map((body, index) => (
         <ShowBodyMediaByContentType
           key={`body-${body.key}-${index}`}

package/src/components/activities/material-contents/FillInTheBlanksActivityMaterialContent.tsx

@@ -122,6 +122,7 @@ const FillInTheBlanksActivityMaterialContent = ({
     option: any,
     element: HTMLElement,
   ): void => {
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedOption(option);
     setDraggedElement(element);
@@ -273,6 +274,7 @@ const FillInTheBlanksActivityMaterialContent = ({
                     ? "ring-2 ring-blue-500"
                     : "opacity-100"
               } transition-all duration-200`}
+              style={{ touchAction: "none" }}
               onMouseDown={(e) => handleMouseDown(e, option)}
               onTouchStart={(e) => handleTouchStart(e, option, e.currentTarget)}
               onTouchMove={handleTouchMove}

package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx

@@ -201,6 +201,7 @@ const GroupingActivityMaterialContent = ({
     element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -366,6 +367,7 @@ const GroupingActivityMaterialContent = ({
                         ? "ring-2 ring-blue-500"
                         : "opacity-100"
                   } transition-all duration-200`}
+                  style={{ touchAction: "none" }}
                   onMouseDown={(e) => handleMouseDown(e, materialValue)}
                   onTouchStart={(e) =>
                     handleTouchStart(e, materialValue, e.currentTarget)

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx

@@ -198,6 +198,7 @@ const MatchingActivityMaterialContent = ({
     element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedValue(materialValue);
     setDraggedElement(element);
@@ -365,6 +366,7 @@ const MatchingActivityMaterialContent = ({
                       ? "ring-2 ring-blue-500"
                       : "opacity-100"
                 } transition-all duration-200`}
+                style={{ touchAction: "none" }}
                 onMouseDown={(e) => handleMouseDown(e, materialValue)}
                 onTouchStart={(e) =>
                   handleTouchStart(e, materialValue, e.currentTarget)

package/src/components/activities/material-contents/OpenEndedActivityMaterialContent.tsx

@@ -29,7 +29,7 @@ const OpenEndedActivityMaterialContent = ({
             src={answerMapAnswer}
             alt="document"
             size="custom"
-            className="w-[80%] rounded-catchup-xlarge"
+            className="w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
           />
         </div>
       );
@@ -74,7 +74,7 @@ const OpenEndedActivityMaterialContent = ({
               src={answerMapAnswer}
               alt="document"
               size="custom"
-              className="w-[80%] rounded-catchup-xlarge"
+              className="w-[80%] rounded-catchup-xlarge max-h-[50vh] object-contain"
             />
           </div>
         ) : fileType === "PDF" ? (

package/src/components/activities/material-contents/OrderingActivityMaterialContent.tsx

@@ -95,6 +95,7 @@ const OrderingActivityMaterialContent = ({
     element: HTMLElement,
   ): void => {
     if (!checkCanAnswerQuestion()) return;
+    e.preventDefault();
     const touch = e.touches[0];
     setDraggedKey(materialKey);
     setDraggedElement(element);
@@ -286,6 +287,7 @@ const OrderingActivityMaterialContent = ({
                     ? "ring-2 ring-blue-400 bg-blue-50"
                     : ""
                 } transition-all duration-200`}
+                style={{ touchAction: "none" }}
                 onMouseDown={(e) => handleMouseDown(e, materialKey)}
                 onMouseEnter={() =>
                   draggedKey &&