sag_components 2.0.0-beta185 → 2.0.0-beta187

package/dist/index.esm.js

@@ -35610,7 +35610,7 @@ const Input$2 = _ref => {
     disabled,
     isDarkerBackground = false,
     width,
-    height = '50px',
+    height = "50px",
     error,
     errorMessage,
     labelColor,
@@ -35624,7 +35624,7 @@ const Input$2 = _ref => {
     maxLength
   } = _ref;
   const [isFocused, setIsFocused] = useState(false);
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const inputRef = useRef(null);
   const containerRef = useRef(null);
@@ -35645,9 +35645,14 @@ const Input$2 = _ref => {
       inputRef?.current?.focus();
     }
     onChange({
-      newValue: e.target.value || ''
+      newValue: e.target.value || ""
     });
   };
+  const handleContainerClick = e => {
+    if (onClick && typeof onClick === "function") {
+      onClick(e);
+    }
+  };
   const handleFocus = () => {
     setIsFocused(true);
     if (inputRef?.current) {
@@ -35671,18 +35676,18 @@ const Input$2 = _ref => {
     });
   };
   const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return getIcon(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
+    if (!leftIcon || leftIcon === "none") return "";
+    return getIcon(leftIcon, "14px", "14px", error ? "red" : labelColor, disabled, "pointer", leftIconOnClickHandler);
   };
   const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return getIcon(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
+    if (!rightIcon || rightIcon === "none") return "";
+    return getIcon(rightIcon, "14px", "14px", error ? "red" : labelColor, disabled, "pointer", rightIconOnClickHandler);
   };
   const toggleShowPassword = () => {
     setShowPassword(!showPassword);
   };
   const getPasswordIcon = () => {
-    if (!password) return '';
+    if (!password) return "";
     if (showPassword) {
       return /*#__PURE__*/React$1.createElement(IconWrapper$1, {
         className: "passwordEyeSlash",
@@ -35690,16 +35695,16 @@ const Input$2 = _ref => {
         onClick: toggleShowPassword
       }, /*#__PURE__*/React$1.createElement(FaEyeSlash, {
         onClick: toggleShowPassword,
-        color: error ? 'red' : labelColor
+        color: error ? "red" : labelColor
       }));
     }
-    return getIcon('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
+    return getIcon("eye", "14px", "14px", error ? "red" : labelColor, disabled, "pointer", toggleShowPassword);
   };
 
   // Calculate dynamic height for multiline inputs
   const calculateHeight = () => {
     if (!multiline) return height;
-    const baseHeight = size === 'small' ? 32 : 52;
+    const baseHeight = size === "small" ? 32 : 52;
     const lineHeight = 20;
     const padding = 10;
     return `${baseHeight + (rows - 1) * lineHeight + padding}px`;
@@ -35712,7 +35717,8 @@ const Input$2 = _ref => {
     size: size,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
-    multiline: multiline
+    multiline: multiline,
+    onClick: handleContainerClick
   }, /*#__PURE__*/React$1.createElement(InputContainer, {
     className: "InputContainer",
     labelColor: labelColor,
@@ -35738,7 +35744,7 @@ const Input$2 = _ref => {
     isFocused: isFocused,
     labelColor: labelColor,
     hasValue: inputValue,
-    leftIcon: !multiline ? leftIcon : 'none',
+    leftIcon: !multiline ? leftIcon : "none",
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
     error: error,
@@ -35748,13 +35754,13 @@ const Input$2 = _ref => {
     multiline: multiline
   }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/React$1.createElement("span", {
     style: {
-      color: disabled ? '#D0D0D0' : 'red',
-      height: '16px'
+      color: disabled ? "#D0D0D0" : "red",
+      height: "16px"
     }
   }, "*")), /*#__PURE__*/React$1.createElement(InputElement, {
     className: multiline ? "StyledTextarea" : "StyledInput",
     ref: inputRef,
-    type: password && !showPassword ? 'password' : 'text',
+    type: password && !showPassword ? "password" : "text",
     value: inputValue,
     onChange: handleInputChange,
     onClick: handleLabelClick,
@@ -35762,7 +35768,7 @@ const Input$2 = _ref => {
     onBlur: handleBlur,
     disabled: disabled,
     isDarkerBackground: isDarkerBackground,
-    placeholder: isFocused ? placeHolder : '',
+    placeholder: isFocused ? placeHolder : "",
     error: error,
     height: calculateHeight(),
     isFocused: isFocused,
@@ -35774,10 +35780,10 @@ const Input$2 = _ref => {
     width: width
   }, errorMessage), multiline && maxLength && /*#__PURE__*/React$1.createElement("div", {
     style: {
-      fontSize: '12px',
-      color: inputValue.length > maxLength * 0.9 ? 'orange' : '#666',
-      textAlign: 'right',
-      marginTop: '4px'
+      fontSize: "12px",
+      color: inputValue.length > maxLength * 0.9 ? "orange" : "#666",
+      textAlign: "right",
+      marginTop: "4px"
     }
   }, inputValue.length, "/", maxLength));
 };
@@ -35806,19 +35812,19 @@ Input$2.propTypes = {
   maxLength: PropTypes.number
 };
 Input$2.defaultProps = {
-  placeHolder: 'Type...',
-  label: '',
-  labelEmptyValue: '',
-  size: 'medium',
-  labelColor: '#066768',
+  placeHolder: "Type...",
+  label: "",
+  labelEmptyValue: "",
+  size: "medium",
+  labelColor: "#066768",
   required: true,
-  width: '300px',
+  width: "300px",
   disabled: false,
   error: false,
-  errorMessage: '',
-  selectedValue: '',
-  leftIcon: 'none',
-  rightIcon: 'none',
+  errorMessage: "",
+  selectedValue: "",
+  leftIcon: "none",
+  rightIcon: "none",
   leftIconOnClick: () => {},
   rightIconOnClick: () => {},
   onBlur: () => {},