catchup-library-web 2.6.14 → 2.6.16

package/dist/index.js

@@ -4987,6 +4987,16 @@ var FillInTheBlanksActivityMaterialContent = ({
   (0, import_react19.useEffect)(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, [optionList]);
+  (0, import_react19.useEffect)(() => {
+    if (!draggedOption) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedOption]);
   (0, import_react19.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -5088,6 +5098,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     "div",
     {
       className: "flex flex-col h-full",
+      style: { touchAction: draggedOption ? "none" : "auto" },
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
@@ -5410,6 +5421,16 @@ var GroupingActivityMaterialContent = ({
   const ref = (0, import_react21.useRef)(null);
   const dropZoneRefs = (0, import_react21.useRef)({});
   const hasShuffledRef = (0, import_react21.useRef)(false);
+  (0, import_react21.useEffect)(() => {
+    if (!draggedValue) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedValue]);
   (0, import_react21.useEffect)(() => {
     if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
@@ -5576,7 +5597,7 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col h-full", style: { touchAction: draggedValue ? "none" : "auto" }, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
@@ -5863,6 +5884,16 @@ var MatchingActivityMaterialContent = ({
   const itemsRef = (0, import_react22.useRef)(null);
   const dropZoneRefs = (0, import_react22.useRef)({});
   const hasShuffledRef = (0, import_react22.useRef)(false);
+  (0, import_react22.useEffect)(() => {
+    if (!draggedValue) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedValue]);
   (0, import_react22.useEffect)(() => {
     if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
@@ -6021,7 +6052,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col h-full", style: { touchAction: draggedValue ? "none" : "auto" }, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "div",
       {
@@ -6829,6 +6860,16 @@ var OrderingActivityMaterialContent = ({
     y: 0
   });
   const [displayAnswerMap, setDisplayAnswerMap] = (0, import_react25.useState)(answerMap);
+  (0, import_react25.useEffect)(() => {
+    if (!draggedKey) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedKey]);
   (0, import_react25.useEffect)(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -6924,6 +6965,7 @@ var OrderingActivityMaterialContent = ({
     "div",
     {
       className: "flex flex-col h-full",
+      style: { touchAction: draggedKey ? "none" : "auto" },
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [

package/dist/index.mjs

@@ -4749,6 +4749,16 @@ var FillInTheBlanksActivityMaterialContent = ({
   useEffect8(() => {
     setShuffleOptionList(shuffleArray(optionList));
   }, [optionList]);
+  useEffect8(() => {
+    if (!draggedOption) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedOption]);
   useEffect8(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -4850,6 +4860,7 @@ var FillInTheBlanksActivityMaterialContent = ({
     "div",
     {
       className: "flex flex-col h-full",
+      style: { touchAction: draggedOption ? "none" : "auto" },
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [
@@ -5172,6 +5183,16 @@ var GroupingActivityMaterialContent = ({
   const ref = useRef5(null);
   const dropZoneRefs = useRef5({});
   const hasShuffledRef = useRef5(false);
+  useEffect10(() => {
+    if (!draggedValue) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedValue]);
   useEffect10(() => {
     if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
@@ -5338,7 +5359,7 @@ var GroupingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", style: { touchAction: draggedValue ? "none" : "auto" }, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx32(
       "div",
       {
@@ -5625,6 +5646,16 @@ var MatchingActivityMaterialContent = ({
   const itemsRef = useRef6(null);
   const dropZoneRefs = useRef6({});
   const hasShuffledRef = useRef6(false);
+  useEffect11(() => {
+    if (!draggedValue) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedValue]);
   useEffect11(() => {
     if (hasShuffledRef.current) return;
     const shuffleArray2 = (array) => {
@@ -5783,7 +5814,7 @@ var MatchingActivityMaterialContent = ({
     }
   };
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
-  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col h-full", onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col h-full", style: { touchAction: draggedValue ? "none" : "auto" }, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, children: [
     draggedValue && mousePosition.x > 0 && /* @__PURE__ */ jsx34(
       "div",
       {
@@ -6591,6 +6622,16 @@ var OrderingActivityMaterialContent = ({
     y: 0
   });
   const [displayAnswerMap, setDisplayAnswerMap] = useState24(answerMap);
+  useEffect14(() => {
+    if (!draggedKey) return;
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedKey]);
   useEffect14(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap = {};
@@ -6686,6 +6727,7 @@ var OrderingActivityMaterialContent = ({
     "div",
     {
       className: "flex flex-col h-full",
+      style: { touchAction: draggedKey ? "none" : "auto" },
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
       children: [

package/package.json

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

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

@@ -42,6 +42,17 @@ const FillInTheBlanksActivityMaterialContent = ({
     setShuffleOptionList(shuffleArray(optionList));
   }, [optionList]);
 
+  useEffect(() => {
+    if (!draggedOption) return;
+    const preventScroll = (e: TouchEvent) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedOption]);
+
   useEffect(() => {
     if (showCorrectAnswer) {
       // Create correct answer map where each key maps to the first correct answer
@@ -177,6 +188,7 @@ const FillInTheBlanksActivityMaterialContent = ({
   return (
     <div
       className="flex flex-col h-full"
+      style={{ touchAction: draggedOption ? "none" : "auto" }}
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >

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

@@ -36,6 +36,17 @@ const GroupingActivityMaterialContent = ({
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
   const hasShuffledRef = useRef<boolean>(false);
 
+  useEffect(() => {
+    if (!draggedValue) return;
+    const preventScroll = (e: TouchEvent) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedValue]);
+
   useEffect(() => {
     if (hasShuffledRef.current) return;
 
@@ -255,7 +266,7 @@ const GroupingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
 
   return (
-    <div className="flex flex-col h-full" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+    <div className="flex flex-col h-full" style={{ touchAction: draggedValue ? "none" : "auto" }} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
       {/* Floating drag preview for mouse */}
       {draggedValue && mousePosition.x > 0 && (
         <div

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

@@ -36,6 +36,17 @@ const MatchingActivityMaterialContent = ({
   const dropZoneRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
   const hasShuffledRef = useRef<boolean>(false);
 
+  useEffect(() => {
+    if (!draggedValue) return;
+    const preventScroll = (e: TouchEvent) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedValue]);
+
   useEffect(() => {
     // Only shuffle once, ever
     if (hasShuffledRef.current) return;
@@ -254,7 +265,7 @@ const MatchingActivityMaterialContent = ({
   const filteredMaterialList = retrieveFilteredMaterialList(displayAnswerMap);
 
   return (
-    <div className="flex flex-col h-full" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
+    <div className="flex flex-col h-full" style={{ touchAction: draggedValue ? "none" : "auto" }} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
       {draggedValue && mousePosition.x > 0 && (
         <div
           className="fixed pointer-events-none z-50 opacity-80"

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

@@ -31,6 +31,17 @@ const OrderingActivityMaterialContent = ({
   });
   const [displayAnswerMap, setDisplayAnswerMap] = useState<any>(answerMap);
 
+  useEffect(() => {
+    if (!draggedKey) return;
+    const preventScroll = (e: TouchEvent) => {
+      e.preventDefault();
+    };
+    document.addEventListener("touchmove", preventScroll, { passive: false });
+    return () => {
+      document.removeEventListener("touchmove", preventScroll);
+    };
+  }, [draggedKey]);
+
   useEffect(() => {
     if (showCorrectAnswer) {
       const correctAnswerMap: any = {};
@@ -155,6 +166,7 @@ const OrderingActivityMaterialContent = ({
   return (
     <div
       className="flex flex-col h-full"
+      style={{ touchAction: draggedKey ? "none" : "auto" }}
       onMouseMove={handleMouseMove}
       onMouseUp={handleMouseUp}
     >