catchup-library-web 1.20.4 → 1.20.5

package/dist/index.js

@@ -3917,6 +3917,15 @@ var InputGroup = ({
       label: option.text
     }));
   };
+  const handleTextOnChange = (e) => {
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
   const handleTextAreaOnChange = (e) => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -4200,7 +4209,14 @@ var InputGroup = ({
   };
   const TextInputGroup = () => {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: value && limit ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+          value.length,
+          " / ",
+          limit
+        ] }) : null })
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "div",
         {
@@ -4214,7 +4230,7 @@ var InputGroup = ({
               defaultValue,
               placeholder: errorText ? errorText : placeholder,
               value,
-              onChange,
+              onChange: handleTextOnChange,
               onFocus,
               onKeyDown
             }

package/dist/index.mjs

@@ -3701,6 +3701,15 @@ var InputGroup = ({
       label: option.text
     }));
   };
+  const handleTextOnChange = (e) => {
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
   const handleTextAreaOnChange = (e) => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -3984,7 +3993,14 @@ var InputGroup = ({
   };
   const TextInputGroup = () => {
     return /* @__PURE__ */ jsxs12("div", { className: "my-1 relative", children: [
-      title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null,
+      /* @__PURE__ */ jsxs12("div", { className: "flex flex-row justify-between items-center", children: [
+        /* @__PURE__ */ jsx22("div", { children: title ? /* @__PURE__ */ jsx22("p", { className: "text-md font-semibold pl-2 py-1 text-catchup-gray-400", children: title }) : null }),
+        /* @__PURE__ */ jsx22("div", { children: value && limit ? /* @__PURE__ */ jsxs12("p", { className: "text-md font-semibold pr-2 py-1 text-catchup-gray-400", children: [
+          value.length,
+          " / ",
+          limit
+        ] }) : null })
+      ] }),
       /* @__PURE__ */ jsx22(
         "div",
         {
@@ -3998,7 +4014,7 @@ var InputGroup = ({
               defaultValue,
               placeholder: errorText ? errorText : placeholder,
               value,
-              onChange,
+              onChange: handleTextOnChange,
               onFocus,
               onKeyDown
             }

package/package.json

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

package/src/components/groups/InputGroup.tsx

@@ -118,6 +118,16 @@ const InputGroup = ({
     }));
   };
 
+  const handleTextOnChange = (e: any) => {
+    if (limit) {
+      if (e.target.value.length <= limit) {
+        onChange && onChange(e);
+      }
+    } else {
+      onChange && onChange(e);
+    }
+  };
+
   const handleTextAreaOnChange = (e: any) => {
     if (!textAreaRef) return;
     if (!textAreaRef.current) return;
@@ -137,10 +147,7 @@ const InputGroup = ({
     const latexValue = mathFieldRef.current.value;
     const wasFocused = mathFieldRef.current === document.activeElement;
     const cursorPosition = mathFieldRef.current.position;
-
     setMathValue(latexValue);
-
-    // Restore focus and cursor position after state update
     if (wasFocused) {
       setTimeout(() => {
         if (mathFieldRef.current) {
@@ -423,7 +430,6 @@ const InputGroup = ({
           onKeyDown={onKeyDown}
         />
 
-        {/* Math constructor button */}
         {useMath && (
           <button
             className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200 z-10"
@@ -455,11 +461,22 @@ const InputGroup = ({
   const TextInputGroup = () => {
     return (
       <div className="my-1 relative">
-        {title ? (
-          <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
-            {title}
-          </p>
-        ) : null}
+        <div className="flex flex-row justify-between items-center">
+          <div>
+            {title ? (
+              <p className="text-md font-semibold pl-2 py-1 text-catchup-gray-400">
+                {title}
+              </p>
+            ) : null}
+          </div>
+          <div>
+            {value && limit ? (
+              <p className="text-md font-semibold pr-2 py-1 text-catchup-gray-400">
+                {value.length} / {limit}
+              </p>
+            ) : null}
+          </div>
+        </div>
 
         <div
           className={`w-full border ${
@@ -483,13 +500,12 @@ const InputGroup = ({
             defaultValue={defaultValue}
             placeholder={errorText ? errorText : placeholder}
             value={value}
-            onChange={onChange}
+            onChange={handleTextOnChange}
             onFocus={onFocus}
             onKeyDown={onKeyDown}
           />
         </div>
 
-        {/* Math constructor button */}
         {useMath && (
           <button
             className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-blue-400 text-white rounded-md px-3 py-1 shadow-sm hover:bg-catchup-blue-500 transition-colors duration-200"