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

package/dist/index.js

@@ -75,13 +75,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,14}$/;
+    // 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);
 }
 
@@ -94,6 +96,7 @@ const Button = React.forwardRef(({ className, variant = "ews-primary", size = "m
         warning: "bg-ews-warning text-white hover:bg-ews-warning-hover",
         error: "bg-ews-error text-white hover:bg-ews-error-hover",
         outline: "bg-transparent text-sm font-medium text-ews-primary hover:text-ews-primary/80",
+        ghost: "border border-ews-primary text-ews-primary hover:bg-ews-primary hover:text-white disabled:border-gray-400 disabled:text-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-ews-primary",
     };
     const sizes = {
         sm: "px-3 py-1.5 text-sm",
@@ -516,7 +519,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         ? options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()))
         : options;
     // Calculate dropdown position based on available space
-    const calculateDropdownPosition = () => {
+    const calculateDropdownPosition = React.useCallback(() => {
         if (!containerRef.current)
             return;
         const containerRect = containerRef.current.getBoundingClientRect();
@@ -547,7 +550,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
         else {
             setDropdownPosition("bottom");
         }
-    };
+    }, [filteredOptions.length, searchable, maxHeight]);
     // Alternative calculation using actual dropdown element when available
     const calculateDropdownPositionWithElement = () => {
         if (!containerRef.current || !dropdownRef.current)
@@ -597,7 +600,13 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
                 calculateDropdownPositionWithElement();
             });
         }
-    }, [isOpen, filteredOptions.length, searchable, maxHeight]);
+    }, [
+        isOpen,
+        filteredOptions.length,
+        searchable,
+        maxHeight,
+        calculateDropdownPosition,
+    ]);
     // Recalculate position on window resize
     React.useEffect(() => {
         const handleResize = () => {
@@ -611,7 +620,7 @@ const Select = React.forwardRef(({ options = [], value, onChange, placeholder =
             window.removeEventListener("resize", handleResize);
             window.removeEventListener("scroll", handleResize);
         };
-    }, [isOpen]);
+    }, [isOpen, calculateDropdownPosition]);
     // Handle keyboard navigation
     const handleKeyDown = (event) => {
         if (disabled)
@@ -1257,6 +1266,50 @@ function useController(props) {
     }), [field, formState, fieldState]);
 }
 
+/**
+ * Component based on `useController` hook to work with controlled component.
+ *
+ * @remarks
+ * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+ *
+ * @param props - the path name to the form field value, and validation rules.
+ *
+ * @returns provide field handler functions, field and form state.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   const { control } = useForm<FormValues>({
+ *     defaultValues: {
+ *       test: ""
+ *     }
+ *   });
+ *
+ *   return (
+ *     <form>
+ *       <Controller
+ *         control={control}
+ *         name="test"
+ *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
+ *           <>
+ *             <input
+ *               onChange={onChange} // send value to hook form
+ *               onBlur={onBlur} // notify when input is touched
+ *               value={value} // return updated value
+ *               ref={ref} // set ref for focus management
+ *             />
+ *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
+ *             <p>{fieldState.isTouched ? "touched" : ""}</p>
+ *           </>
+ *         )}
+ *       />
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+const Controller = (props) => props.render(useController(props));
+
 function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
     const { field, fieldState: { error, invalid }, } = useController({
         name,
@@ -1593,7 +1646,90 @@ const Modal = ({ isOpen, onClose, title, children, variant = "info", primaryActi
     return (jsxRuntime.jsxs("div", { className: "flex fixed inset-0 z-50 justify-center items-center", children: [jsxRuntime.jsx("div", { className: "absolute inset-0 backdrop-blur-sm bg-black/50", onClick: handleOverlayClick }), jsxRuntime.jsxs("div", { className: cn("relative mx-4 w-full max-w-md bg-white rounded-lg shadow-xl transition-all transform", "duration-200 animate-in fade-in-0 zoom-in-95", className), role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-title", children: [jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between p-6 border-b", variantStyles.borderColor), children: [jsxRuntime.jsxs("div", { className: "flex items-center space-x-3", children: [jsxRuntime.jsx("div", { className: cn("p-2 rounded-full", variantStyles.iconBg), children: variantStyles.icon }), jsxRuntime.jsx("h2", { id: "modal-title", className: cn("text-lg font-semibold", variantStyles.titleColor), children: title })] }), jsxRuntime.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 transition-colors hover:text-gray-600", "aria-label": "Close modal", children: jsxRuntime.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntime.jsx("div", { className: cn("p-6", contentClassName), children: jsxRuntime.jsx("div", { className: "leading-relaxed text-gray-700", children: error && variant === "error" ? (jsxRuntime.jsxs("div", { className: "space-y-3", children: [jsxRuntime.jsx("p", { children: error.message }), error.fields && error.fields.length > 0 && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("p", { className: "font-semibold text-gray-900", children: "Erreurs de champ:" }), jsxRuntime.jsx("ul", { className: "mt-2 space-y-1", children: error.fields.map((field, index) => (jsxRuntime.jsxs("li", { className: "text-ews-error", children: ["\u2022 ", field.path, ": ", field.message] }, index))) })] }))] })) : (children) }) }), (primaryAction || secondaryAction) && (jsxRuntime.jsxs("div", { className: "flex justify-end items-center p-6 pt-0 space-x-3", children: [secondaryAction && (jsxRuntime.jsx(Button, { variant: "outline", onClick: onSecondaryAction || onClose, disabled: isLoading, children: secondaryAction })), primaryAction && (jsxRuntime.jsx(Button, { variant: variant === "error" ? "error" : "ews-primary", onClick: onPrimaryAction, loading: isLoading, children: primaryAction }))] }))] })] }));
 };
 
-const Logo = ({ size = "md", showTagline: _showTagline = true, iconOnly = false, variant = "normal", className, onClick, }) => {
+const DropdownMultiSelect = ({ options, name, control, placeholder = "Select options", searchPlaceholder = "Search...", onChange, value: controlledValue, defaultValue, onValidate, disabled = false, error, label, className, }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const dropdownRef = React.useRef(null);
+    const handleToggle = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleClickOutside = (event) => {
+        if (dropdownRef.current &&
+            !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+            setSearchTerm("");
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, []);
+    const removeAccents = (str) => str
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/ç/g, "c")
+        .replace(/é|è|ê|ë/g, "e")
+        .replace(/à|á|â|ã|ä/g, "a")
+        .replace(/î|ï/g, "i")
+        .replace(/ô|ö/g, "o")
+        .replace(/ù|ú|û|ü/g, "u");
+    const getDisplayValue = (value) => {
+        if (typeof value === "string" || typeof value === "number") {
+            return String(value);
+        }
+        return options.find((opt) => opt.value === value)?.label || "";
+    };
+    const filteredOptions = options.filter((option) => removeAccents(option.label.toLowerCase()).includes(removeAccents(searchTerm.toLowerCase())));
+    const renderDropdown = ({ value = [], onChange: fieldOnChange, }) => (jsxRuntime.jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [jsxRuntime.jsxs("button", { type: "button", onClick: handleToggle, "aria-label": name, disabled: disabled, className: cn("flex w-full items-center justify-between rounded-md border border-ews-gray-300 bg-white px-3 py-2 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-0 disabled:bg-ews-gray-50 disabled:text-ews-gray-500", isOpen ? "rounded-b-none border-b-0" : "rounded-md", error && "border-ews-error focus:ring-ews-error"), children: [jsxRuntime.jsx("span", { className: cn("truncate", !value?.length && "text-ews-gray-500"), children: value?.length > 0
+                            ? value.map((v) => getDisplayValue(v)).join(", ")
+                            : placeholder }), jsxRuntime.jsx("span", { className: cn("ml-2 w-4 h-4 transition-transform transform", isOpen ? "rotate-180" : "rotate-0"), children: jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })] }), isOpen && (jsxRuntime.jsxs("div", { className: "absolute z-50 w-full bg-white rounded-b-md border border-t-0 shadow-lg border-ews-gray-300", children: [jsxRuntime.jsx("div", { className: "p-2 border-b border-ews-gray-200", children: jsxRuntime.jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "p-0 border-0 shadow-none focus:ring-0", size: "sm" }) }), jsxRuntime.jsx("div", { className: "overflow-y-auto max-h-48", children: filteredOptions.length > 0 ? (filteredOptions.map((option) => (jsxRuntime.jsxs("div", { className: "flex items-center p-2 cursor-pointer hover:bg-ews-gray-100", onClick: () => {
+                                const currentValue = value ?? [];
+                                const isSelected = currentValue.some((item) => JSON.stringify(item) === JSON.stringify(option.value));
+                                const newValue = isSelected
+                                    ? currentValue.filter((item) => JSON.stringify(item) !==
+                                        JSON.stringify(option.value))
+                                    : [...currentValue, option.value];
+                                if (onValidate && !onValidate(newValue)) {
+                                    return;
+                                }
+                                fieldOnChange(newValue);
+                                onChange?.(newValue);
+                            }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: (value ?? []).some((item) => JSON.stringify(item) === JSON.stringify(option.value)), onChange: (e) => {
+                                        e.stopPropagation();
+                                        const currentValue = value ?? [];
+                                        const isSelected = currentValue.some((item) => JSON.stringify(item) === JSON.stringify(option.value));
+                                        const newValue = isSelected
+                                            ? currentValue.filter((item) => JSON.stringify(item) !==
+                                                JSON.stringify(option.value))
+                                            : [...currentValue, option.value];
+                                        if (onValidate && !onValidate(newValue)) {
+                                            return;
+                                        }
+                                        fieldOnChange(newValue);
+                                        onChange?.(newValue);
+                                    }, onClick: (e) => e.stopPropagation(), className: "mr-3 w-4 h-4 rounded border-ews-gray-300 text-ews-primary focus:ring-ews-primary" }), jsxRuntime.jsx("label", { className: "text-sm cursor-pointer text-ews-gray-700", children: option.label })] }, getDisplayValue(option.value))))) : (jsxRuntime.jsx("div", { className: "p-2 text-sm text-ews-gray-500", children: "No options found" })) })] }))] }));
+    // Render controlled version with react-hook-form
+    if (control) {
+        return (jsxRuntime.jsx(Controller, { name: name, control: control, render: ({ field: { value, onChange } }) => (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { className: "block mb-1 text-sm font-medium text-ews-gray-700", children: label })), renderDropdown({ value, onChange }), error && jsxRuntime.jsx("p", { className: "mt-1 text-sm text-ews-error", children: error })] })) }));
+    }
+    // Render uncontrolled version
+    return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { className: "block mb-1 text-sm font-medium text-ews-gray-700", children: label })), renderDropdown({
+                value: controlledValue ?? uncontrolledValue,
+                onChange: (newValue) => {
+                    if (controlledValue === undefined) {
+                        setUncontrolledValue(newValue);
+                    }
+                    onChange?.(newValue);
+                },
+            }), error && jsxRuntime.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, customSrc, alt = "MEDECINE 360 Logo", clickable = false, }) => {
     const sizes = {
         sm: "h-8",
         md: "h-12",
@@ -1606,21 +1742,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 (jsxRuntime.jsx("div", { className: cn("flex items-center justify-center", iconSizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "w-full h-full object-contain" }) }));
+        return (jsxRuntime.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: jsxRuntime.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 (jsxRuntime.jsx("div", { className: cn("flex items-center", sizes[size], className), onClick: onClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, children: jsxRuntime.jsx("img", { src: logoSrc, alt: "MEDECINE 360 Logo", className: "h-full w-auto object-contain" }) }));
+    return (jsxRuntime.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: jsxRuntime.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 = {
@@ -1792,6 +1954,7 @@ exports.ArrowRight = ArrowRight;
 exports.Button = Button;
 exports.Check = Check;
 exports.DoctorIcon = DoctorIcon;
+exports.DropdownMultiSelect = DropdownMultiSelect;
 exports.Icon = Icon;
 exports.Input = Input;
 exports.Logo = Logo;