catchup-library-web 1.11.4 → 1.11.5

package/package.json

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

package/src/components/groups/InputGroup.tsx

@@ -65,6 +65,7 @@ const InputGroup = ({
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const mathFieldRef = useRef<MathfieldElement>(null);
   const [isMathMode, setIsMathMode] = useState<boolean>(false);
+  const [showMathOverlay, setShowMathOverlay] = useState<boolean>(false);
 
   useEffect(() => {
     if (!textAreaRef) return;
@@ -85,6 +86,24 @@ const InputGroup = ({
     });
   }, [useMath, type, placeholder, title]);
 
+  // Close overlay when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        showMathOverlay &&
+        event.target instanceof Element &&
+        !event.target.closest(".math-overlay")
+      ) {
+        setShowMathOverlay(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showMathOverlay]);
+
   const retrieveNullableOptionList = () => {
     if (!optionList) return [];
     const currentOptionList = {
@@ -133,6 +152,83 @@ const InputGroup = ({
     onFocus && onFocus(syntheticEvent);
   };
 
+  const handleMathModeToggle = (mode: boolean) => {
+    setIsMathMode(mode);
+    setShowMathOverlay(false);
+  };
+
+  const MathModeOverlay = () => {
+    if (!showMathOverlay) return null;
+
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4">
+          <h3 className="text-lg font-semibold mb-4 text-catchup-gray-400">
+            {i18n.t("select_input_mode")}
+          </h3>
+          <div className="space-y-3">
+            <button
+              className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
+                !isMathMode
+                  ? "border-catchup-blue-400 bg-catchup-blue-50"
+                  : "border-catchup-gray-100 hover:border-catchup-gray-200"
+              }`}
+              onClick={() => handleMathModeToggle(false)}
+            >
+              <div className="flex items-center space-x-3">
+                <div className="w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center">
+                  {!isMathMode && (
+                    <div className="w-2 h-2 rounded-full bg-catchup-blue-400"></div>
+                  )}
+                </div>
+                <div className="text-left">
+                  <p className="font-medium text-catchup-gray-400">
+                    {i18n.t("text_mode")}
+                  </p>
+                  <p className="text-sm text-catchup-gray-300">
+                    Regular text input
+                  </p>
+                </div>
+              </div>
+            </button>
+            <button
+              className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
+                isMathMode
+                  ? "border-catchup-blue-400 bg-catchup-blue-50"
+                  : "border-catchup-gray-100 hover:border-catchup-gray-200"
+              }`}
+              onClick={() => handleMathModeToggle(true)}
+            >
+              <div className="flex items-center space-x-3">
+                <div className="w-4 h-4 rounded-full border-2 border-catchup-blue-400 flex items-center justify-center">
+                  {isMathMode && (
+                    <div className="w-2 h-2 rounded-full bg-catchup-blue-400"></div>
+                  )}
+                </div>
+                <div className="text-left">
+                  <p className="font-medium text-catchup-gray-400">
+                    {i18n.t("math_mode")}
+                  </p>
+                  <p className="text-sm text-catchup-gray-300">
+                    Mathematical expressions
+                  </p>
+                </div>
+              </div>
+            </button>
+          </div>
+          <div className="mt-6 flex justify-end">
+            <button
+              className="px-4 py-2 text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors"
+              onClick={() => setShowMathOverlay(false)}
+            >
+              {i18n.t("cancel")}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const CheckboxInputGroup = () => {
     return (
       <div
@@ -325,13 +421,6 @@ const InputGroup = ({
           onFocus={onFocus}
           onKeyDown={onKeyDown}
         />
-        {/* <div
-          className={`${
-            title ? "absolute top-0 right-0" : "absolute top-3 left-5"
-          }`}
-        >
-          <p className="italic text-catchup-red opacity-70">{errorText}</p>
-        </div> */}
       </div>
     );
   };
@@ -401,20 +490,30 @@ const InputGroup = ({
         </div>
 
         {useMath && (
-          <div className="absolute right-5 -top-2 z-10 bg-catchup-white border border-catchup-gray-100 rounded-md px-2">
-            <div
-              className="flex flex-row items-center gap-x-2 cursor-pointer text-md transition-all duration-300 text-catchup-gray-300"
-              onClick={() => {
-                setIsMathMode(!isMathMode);
-              }}
-            >
-              <div className="flex flex-row items-center gap-x-1">
-                <p className="font-bold">
-                  {isMathMode ? i18n.t("text_mode") : i18n.t("math_mode")}
-                </p>
-              </div>
+          <button
+            className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200"
+            onClick={() => setShowMathOverlay(true)}
+            type="button"
+          >
+            <div className="flex items-center gap-x-1">
+              <span className="text-sm font-medium text-catchup-gray-400">
+                {isMathMode ? "𝑓(x)" : "Aa"}
+              </span>
+              <svg
+                className="w-3 h-3 text-catchup-gray-300"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
+              </svg>
             </div>
-          </div>
+          </button>
         )}
       </div>
     );
@@ -438,7 +537,12 @@ const InputGroup = ({
     }
   };
 
-  return RenderMainContent();
+  return (
+    <>
+      {RenderMainContent()}
+      <MathModeOverlay />
+    </>
+  );
 };
 
 export default InputGroup;