@ews-admin/global-design-system 1.1.15 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "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

@@ -1,7 +1,28 @@
-import React, { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
 import { Eye, EyeOff } from "../../icons";
 import { cn } from "../../utils";
 
+export interface CountryCodeOption {
+  code: string;
+  country: string;
+}
+
+export interface CountryCodeSelectProps {
+  /**
+   * Array of country code options
+   */
+  options: CountryCodeOption[];
+  /**
+   * Currently selected country code
+   */
+  value: string;
+  /**
+   * Handler for when country code changes
+   */
+  onChange: (code: string) => void;
+}
+
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
@@ -44,6 +65,10 @@ export interface InputProps
    * Whether the input is required (shows red asterisk)
    */
   required?: boolean;
+  /**
+   * Country code dropdown configuration for phone inputs
+   */
+  countryCodeSelect?: CountryCodeSelectProps;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -60,6 +85,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       fullWidth = false,
       showPasswordToggle = false,
       required = false,
+      countryCodeSelect,
       id,
       type = "text",
       ...props
@@ -76,6 +102,25 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
     const actualType = isPasswordInput && showPassword ? "text" : type;
 
+    // Country code dropdown state
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          dropdownRef.current &&
+          !dropdownRef.current.contains(event.target as Node)
+        ) {
+          setIsDropdownOpen(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
     const baseStyles =
       "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 hover:border-ews-primary";
 
@@ -167,7 +212,69 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           </label>
         )}
         <div className="relative">
-          {leftIcon && (
+          {countryCodeSelect && (
+            <div className="absolute inset-y-0 left-0 flex items-center pl-1 z-10" ref={dropdownRef}>
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  className={cn(
+                    "flex items-center gap-1 px-2 py-1 rounded text-ews-gray-700",
+                    "hover:bg-ews-gray-50 transition-colors cursor-pointer",
+                    "focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-0",
+                    "border-0 bg-transparent text-base"
+                  )}
+                >
+                  <span className="font-medium">{countryCodeSelect.value}</span>
+                  <ChevronDown
+                    className={cn(
+                      "w-4 h-4 text-ews-gray-400 transition-transform",
+                      isDropdownOpen && "rotate-180"
+                    )}
+                  />
+                </button>
+
+                {isDropdownOpen && (
+                  <div
+                    className={cn(
+                      "absolute top-full left-0 mt-1 bg-white rounded-md border shadow-lg",
+                      "border-ews-gray-300 min-w-[120px] z-50"
+                    )}
+                    style={{ maxHeight: "200px", overflowY: "auto" }}
+                  >
+                    {countryCodeSelect.options.map((item) => {
+                      const isSelected = item.code === countryCodeSelect.value;
+                      return (
+                        <div
+                          key={item.code}
+                          onClick={() => {
+                            countryCodeSelect.onChange(item.code);
+                            setIsDropdownOpen(false);
+                          }}
+                          className={cn(
+                            "px-3 py-2 text-sm cursor-pointer transition-colors",
+                            isSelected && "bg-ews-primary text-white",
+                            !isSelected && "hover:bg-ews-gray-50"
+                          )}
+                        >
+                          <span className="font-medium">{item.code}</span>
+                          {item.country && (
+                            <span className={cn(
+                              "ml-2 text-xs",
+                              isSelected ? "text-white/80" : "text-ews-gray-500"
+                            )}>
+                              {item.country}
+                            </span>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+          {leftIcon && !countryCodeSelect && (
             <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
               <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {leftIcon}
@@ -181,7 +288,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               baseStyles,
               variants[actualVariant],
               sizes[size],
-              leftIcon && "pl-10",
+              countryCodeSelect && "pl-24",
+              leftIcon && !countryCodeSelect && "pl-10",
               (rightIcon || shouldShowPasswordToggle) && "pr-10",
               className
             )}
@@ -231,3 +339,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 Input.displayName = "Input";
 
 export { Input };
+

package/src/components/Input/index.ts

@@ -1,2 +1,2 @@
 export { Input } from "./Input";
-export type { InputProps } from "./Input";
+export type { CountryCodeOption, CountryCodeSelectProps, InputProps } from "./Input";