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

package/dist/index.js

@@ -81,7 +81,7 @@ const formatNumeric = (value) => {
  */
 function isValidPhoneNumber(value) {
     const trimmedValue = value.trim();
-    const phoneRegex = /^[0-9]\d{1,14}$/;
+    const phoneRegex = /^[0-9]\d{1,17}$/;
     return phoneRegex.test(trimmedValue);
 }
 
@@ -94,6 +94,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",
@@ -1257,6 +1258,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,6 +1638,89 @@ 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 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, }) => {
     const sizes = {
         sm: "h-8",
@@ -1792,6 +1920,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;