@ews-admin/global-design-system 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/Input/Input.tsx

@@ -98,6 +98,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       rightAddon,
       id,
       type = "text",
+      onChange,
+      onBlur,
       ...props
     },
     ref
@@ -112,6 +114,27 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
     const actualType = isPasswordInput && showPassword ? "text" : type;
 
+    // Normalize spaces for text-like inputs
+    const shouldNormalize = type !== "password" && type !== "number" && type !== "checkbox";
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (shouldNormalize) {
+        e.target.value = e.target.value.replace(/^\s+/, "").replace(/\s{2,}/g, " ");
+      }
+      onChange?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      if (shouldNormalize && onChange) {
+        const trimmed = e.target.value.replace(/\s+$/, "");
+        if (trimmed !== e.target.value) {
+          e.target.value = trimmed;
+          onChange(e as unknown as React.ChangeEvent<HTMLInputElement>);
+        }
+      }
+      onBlur?.(e);
+    };
+
     // Country code dropdown state
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const dropdownRef = useRef<HTMLDivElement>(null);
@@ -313,6 +336,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               className
             )}
             ref={ref}
+            onChange={handleChange}
+            onBlur={handleBlur}
             {...props}
           />
           {rightAddon && !rightIcon && !shouldShowPasswordToggle && (