catchup-library-web 1.20.4 → 1.20.6

package/dist/index.d.mts

@@ -68,12 +68,12 @@ declare const FullCard: ({ backgroundColor, borderColor, opacity, usePadding, ch
 
 declare const BaseCard: ({ children }: IBaseCardProps) => react_jsx_runtime.JSX.Element;
 
-declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
 interface IBaseImageProps {
     size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "5xlarge" | "6xlarge" | "custom";
     className?: string;
     widthClassName?: string;
     heightClassName?: string;
+    imageClassName?: string;
     src?: string;
     hidden?: boolean;
     alt?: string;
@@ -88,6 +88,8 @@ interface IBaseImageProps {
     borderRadius?: string;
 }
 
+declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
+
 interface IBaseLoadingProps {
     height?: number;
     width?: number;

package/dist/index.d.ts

@@ -68,12 +68,12 @@ declare const FullCard: ({ backgroundColor, borderColor, opacity, usePadding, ch
 
 declare const BaseCard: ({ children }: IBaseCardProps) => react_jsx_runtime.JSX.Element;
 
-declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
 interface IBaseImageProps {
     size?: "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge" | "4xlarge" | "5xlarge" | "6xlarge" | "custom";
     className?: string;
     widthClassName?: string;
     heightClassName?: string;
+    imageClassName?: string;
     src?: string;
     hidden?: boolean;
     alt?: string;
@@ -88,6 +88,8 @@ interface IBaseImageProps {
     borderRadius?: string;
 }
 
+declare const BaseImage: react.ForwardRefExoticComponent<IBaseImageProps & react.RefAttributes<HTMLImageElement>>;
+
 interface IBaseLoadingProps {
     height?: number;
     width?: number;

package/dist/index.js

@@ -476,6 +476,7 @@ var BaseImage = (0, import_react2.forwardRef)(
       className,
       widthClassName,
       heightClassName,
+      imageClassName,
       src,
       hidden,
       alt,
@@ -505,6 +506,7 @@ var BaseImage = (0, import_react2.forwardRef)(
     let currentClassName;
     let currentWidthClassName;
     let currentHeightClassName;
+    let currentImageClassName = "w-full h-full object-contain";
     if (size === "xsmall") {
       currentWidthClassName = "w-4";
       currentHeightClassName = "h-4";
@@ -539,6 +541,9 @@ var BaseImage = (0, import_react2.forwardRef)(
       currentClassName = className;
       currentWidthClassName = widthClassName;
       currentHeightClassName = heightClassName;
+      if (imageClassName) {
+        currentImageClassName = imageClassName;
+      }
     }
     return loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       BaseLoading_default,
@@ -556,7 +561,7 @@ var BaseImage = (0, import_react2.forwardRef)(
           "img",
           {
             ref,
-            className: `w-full h-full object-contain ${borderRadius || ""}`,
+            className: `${currentImageClassName} ${borderRadius}`,
             src,
             alt,
             onLoad,
@@ -572,7 +577,6 @@ var BaseImage = (0, import_react2.forwardRef)(
     );
   }
 );
-BaseImage.displayName = "BaseImage";
 var BaseImage_default = BaseImage;
 
 // src/components/buttons/PrimaryButton.tsx
@@ -3917,6 +3921,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 +4213,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 +4234,7 @@ var InputGroup = ({
               defaultValue,
               placeholder: errorText ? errorText : placeholder,
               value,
-              onChange,
+              onChange: handleTextOnChange,
               onFocus,
               onKeyDown
             }

package/dist/index.mjs

@@ -260,6 +260,7 @@ var BaseImage = forwardRef(
       className,
       widthClassName,
       heightClassName,
+      imageClassName,
       src,
       hidden,
       alt,
@@ -289,6 +290,7 @@ var BaseImage = forwardRef(
     let currentClassName;
     let currentWidthClassName;
     let currentHeightClassName;
+    let currentImageClassName = "w-full h-full object-contain";
     if (size === "xsmall") {
       currentWidthClassName = "w-4";
       currentHeightClassName = "h-4";
@@ -323,6 +325,9 @@ var BaseImage = forwardRef(
       currentClassName = className;
       currentWidthClassName = widthClassName;
       currentHeightClassName = heightClassName;
+      if (imageClassName) {
+        currentImageClassName = imageClassName;
+      }
     }
     return loading ? /* @__PURE__ */ jsx5(
       BaseLoading_default,
@@ -340,7 +345,7 @@ var BaseImage = forwardRef(
           "img",
           {
             ref,
-            className: `w-full h-full object-contain ${borderRadius || ""}`,
+            className: `${currentImageClassName} ${borderRadius}`,
             src,
             alt,
             onLoad,
@@ -356,7 +361,6 @@ var BaseImage = forwardRef(
     );
   }
 );
-BaseImage.displayName = "BaseImage";
 var BaseImage_default = BaseImage;
 
 // src/components/buttons/PrimaryButton.tsx
@@ -3701,6 +3705,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 +3997,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 +4018,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.06",
   "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"

package/src/components/images/BaseImage.tsx

@@ -1,5 +1,6 @@
 import { useState, forwardRef } from "react";
 import BaseLoading from "../loading/BaseLoading";
+import { IBaseImageProps } from "../../properties/ImageProperties";
 
 const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
   (props, ref) => {
@@ -8,6 +9,7 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
       className,
       widthClassName,
       heightClassName,
+      imageClassName,
       src,
       hidden,
       alt,
@@ -41,6 +43,8 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
     let currentClassName;
     let currentWidthClassName;
     let currentHeightClassName;
+    let currentImageClassName = "w-full h-full object-contain";
+
     if (size === "xsmall") {
       currentWidthClassName = "w-4";
       currentHeightClassName = "h-4";
@@ -75,6 +79,9 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
       currentClassName = className;
       currentWidthClassName = widthClassName;
       currentHeightClassName = heightClassName;
+      if (imageClassName) {
+        currentImageClassName = imageClassName;
+      }
     }
 
     return loading ? (
@@ -95,7 +102,7 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
       >
         <img
           ref={ref}
-          className={`w-full h-full object-contain ${borderRadius || ""}`}
+          className={`${currentImageClassName} ${borderRadius}`}
           src={src}
           alt={alt}
           onLoad={onLoad}
@@ -110,36 +117,4 @@ const BaseImage = forwardRef<HTMLImageElement, IBaseImageProps>(
   }
 );
 
-BaseImage.displayName = "BaseImage";
-
-interface IBaseImageProps {
-  size?:
-    | "xsmall"
-    | "small"
-    | "medium"
-    | "large"
-    | "xlarge"
-    | "2xlarge"
-    | "3xlarge"
-    | "4xlarge"
-    | "5xlarge"
-    | "6xlarge"
-    | "custom";
-  className?: string;
-  widthClassName?: string;
-  heightClassName?: string;
-  src?: string;
-  hidden?: boolean;
-  alt?: string;
-  showLoading?: boolean;
-  onLoad?: () => void;
-  onClick?: (e: any) => void;
-  dataToolTipId?: string;
-  dataToolTipContent?: string;
-  dataToolTipPlace?: string;
-  dataToolTipVariant?: string;
-  dataToolTipHTML?: string;
-  borderRadius?: string;
-}
-
 export default BaseImage;

package/src/properties/ImageProperties.ts

@@ -1,12 +1,23 @@
 export interface IBaseImageProps {
-  ref?: any;
-  size: string;
+  size?:
+    | "xsmall"
+    | "small"
+    | "medium"
+    | "large"
+    | "xlarge"
+    | "2xlarge"
+    | "3xlarge"
+    | "4xlarge"
+    | "5xlarge"
+    | "6xlarge"
+    | "custom";
   className?: string;
   widthClassName?: string;
   heightClassName?: string;
-  src: string;
+  imageClassName?: string;
+  src?: string;
   hidden?: boolean;
-  alt: string;
+  alt?: string;
   showLoading?: boolean;
   onLoad?: () => void;
   onClick?: (e: any) => void;
@@ -15,4 +26,5 @@ export interface IBaseImageProps {
   dataToolTipPlace?: string;
   dataToolTipVariant?: string;
   dataToolTipHTML?: string;
+  borderRadius?: string;
 }