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

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, createElement, useState, useId, useRef, useEffect, useCallback, createContext, useContext } from 'react';
+import React, { forwardRef, createElement, useState, useId, useRef, useCallback, useEffect, createContext, useContext } from 'react';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -73,13 +73,15 @@ const formatNumeric = (value) => {
 };
 /**
  * Utility function to validate phone numbers
- * Validates phone numbers with 1-15 digits, starting with a non-zero digit
+ * Validates phone numbers with 1-17 digits, optionally starting with + symbol
  * @param value - Phone number string to validate
  * @returns Boolean indicating if the phone number is valid
  */
 function isValidPhoneNumber(value) {
     const trimmedValue = value.trim();
-    const phoneRegex = /^[0-9]\d{1,17}$/;
+    // Allow + at the beginning, followed by 1-17 digits
+    // Or just 1-17 digits without +
+    const phoneRegex = /^(\+\d{1,17}|\d{1,17})$/;
     return phoneRegex.test(trimmedValue);
 }
 
@@ -515,7 +517,7 @@ const Select = forwardRef(({ options = [], value, onChange, placeholder = "Selec
         ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
         : options;
     // Calculate dropdown position based on available space
-    const calculateDropdownPosition = () => {
+    const calculateDropdownPosition = useCallback(() => {
         if (!containerRef.current)
             return;
         const containerRect = containerRef.current.getBoundingClientRect();
@@ -546,7 +548,7 @@ const Select = forwardRef(({ options = [], value, onChange, placeholder = "Selec
         else {
             setDropdownPosition("bottom");
         }
-    };
+    }, [filteredOptions.length, searchable, maxHeight]);
     // Alternative calculation using actual dropdown element when available
     const calculateDropdownPositionWithElement = () => {
         if (!containerRef.current || !dropdownRef.current)
@@ -596,7 +598,13 @@ const Select = forwardRef(({ options = [], value, onChange, placeholder = "Selec
                 calculateDropdownPositionWithElement();
             });
         }
-    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+    }, [
+        isOpen,
+        filteredOptions.length,
+        searchable,
+        maxHeight,
+        calculateDropdownPosition,
+    ]);
     // Recalculate position on window resize
     useEffect(() => {
         const handleResize = () => {
@@ -610,7 +618,7 @@ const Select = forwardRef(({ options = [], value, onChange, placeholder = "Selec
             window.removeEventListener("resize", handleResize);
             window.removeEventListener("scroll", handleResize);
         };
-    }, [isOpen]);
+    }, [isOpen, calculateDropdownPosition]);
     // Handle keyboard navigation
     const handleKeyDown = (event) => {
         if (disabled)
@@ -1719,7 +1727,7 @@ const DropdownMultiSelect = ({ options, name, control, placeholder = "Select opt
             }), error && jsx("p", { className: "mt-1 text-sm text-ews-error", children: error })] }));
 };
 
-const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
+const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, customSrc, alt = "MEDECINE 360 Logo", clickable = false, }) => {
     const sizes = {
         sm: "h-8",
         md: "h-12",
@@ -1732,21 +1740,47 @@ const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false,
         lg: "h-12 w-12",
         xl: "h-16 w-16",
     };
-    // Get the appropriate logo image based on variant
-    // For iconOnly, always use favicon.ico
-    const logoSrc = iconOnly
-        ? "/favicon.ico"
-        : variant === "white"
-            ? "/image/logoWhite.png"
-            : variant === "fullWhite"
-                ? "/image/logoFullWhite.png"
-                : variant === "favicon"
-                    ? "/favicon.ico"
-                    : "/image/logo.png";
+    // Get the appropriate logo image based on variant or custom source
+    // For iconOnly, always use favicon.ico unless customSrc is provided
+    const logoSrc = customSrc ||
+        (iconOnly
+            ? "/favicon.ico"
+            : variant === "white"
+                ? "/image/logoWhite.png"
+                : variant === "fullWhite"
+                    ? "/image/logoFullWhite.png"
+                    : variant === "favicon"
+                        ? "/favicon.ico"
+                        : "/image/logo.png");
+    const isClickable = clickable || !!onClick;
     if (iconOnly) {
-        return (jsx("div", { className: cn("flex items-center justify-center", iconSizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "w-full h-full object-contain" }) }));
+        return (jsx("div", { className: cn("flex items-center justify-center", iconSizes[size], isClickable && "cursor-pointer", className), onClick: onClick, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, onKeyDown: isClickable
+                ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onClick?.();
+                    }
+                }
+                : undefined, children: jsx("img", { src: logoSrc, alt: alt, className: "object-contain w-full h-full", onError: (e) => {
+                    // Fallback to favicon if image fails to load
+                    if (logoSrc !== "/favicon.ico") {
+                        e.target.src = "/favicon.ico";
+                    }
+                } }) }));
     }
-    return (jsx("div", { className: cn("flex items-center", sizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "h-full w-auto object-contain" }) }));
+    return (jsx("div", { className: cn("flex items-center", sizes[size], isClickable && "cursor-pointer", className), onClick: onClick, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, onKeyDown: isClickable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick?.();
+                }
+            }
+            : undefined, children: jsx("img", { src: logoSrc, alt: alt, className: "object-contain w-auto h-full", onError: (e) => {
+                // Fallback to favicon if image fails to load
+                if (logoSrc !== "/favicon.ico") {
+                    e.target.src = "/favicon.ico";
+                }
+            } }) }));
 };
 
 const PROMED_THEME = {