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

package/dist/index.js

@@ -60,6 +60,76 @@ function createEnvConfig(env, overrides) {
     };
 }
 
+/**
+ * Available country codes supported by the platform
+ */
+const COUNTRY_CODES = [
+    { code: "+221", country: "SN" }, // Senegal
+    { code: "+235", country: "TD" }, // Chad
+];
+/**
+ * Determines the default country code based on phone number prefix or country ISO code.
+ * Falls back to "+221" (Senegal) when no match is found.
+ */
+function getDefaultCountryCode(phoneNumber, country) {
+    if (phoneNumber) {
+        const match = COUNTRY_CODES.find(({ code }) => phoneNumber.startsWith(code));
+        if (match)
+            return match.code;
+    }
+    if (country) {
+        const match = COUNTRY_CODES.find(({ country: c }) => c.toUpperCase() === country.toUpperCase());
+        if (match)
+            return match.code;
+    }
+    return "+221";
+}
+/**
+ * Extracts the country code prefix from a phone number and returns both
+ * the detected country code and the local number without the prefix.
+ *
+ * @example
+ * extractCountryCodeFromPhoneNumber("+22177123456") // { countryCode: "+221", cleanedPhoneNumber: "77123456" }
+ * extractCountryCodeFromPhoneNumber("77123456")     // { countryCode: "+221", cleanedPhoneNumber: "77123456" }
+ */
+function extractCountryCodeFromPhoneNumber(phoneNumber, country) {
+    const matched = COUNTRY_CODES.find(({ code }) => phoneNumber.startsWith(code));
+    if (matched) {
+        const cleaned = phoneNumber
+            .replace(new RegExp(`^\\${matched.code}\\s*`), "")
+            .trim();
+        return { countryCode: matched.code, cleanedPhoneNumber: cleaned };
+    }
+    return {
+        countryCode: getDefaultCountryCode(phoneNumber, country),
+        cleanedPhoneNumber: phoneNumber.trim(),
+    };
+}
+/**
+ * Formats a phone number by prepending the country code if not already present.
+ * If the number already starts with a known country code it is returned as-is.
+ * Leading zeros, spaces and dashes are stripped from the local part before formatting.
+ *
+ * @example
+ * formatPhoneNumberWithCountryCode("77123456", "+221")    // "+22177123456"
+ * formatPhoneNumberWithCountryCode("+22177123456", "+221") // "+22177123456" (unchanged)
+ * formatPhoneNumberWithCountryCode("077123456", "+221")   // "+22177123456" (leading 0 stripped)
+ */
+function formatPhoneNumberWithCountryCode(phoneNumber, countryCode = "+221") {
+    const trimmed = phoneNumber?.trim() || "";
+    if (!trimmed)
+        return "";
+    // Already has a known country code — return as-is
+    if (COUNTRY_CODES.some(({ code }) => trimmed.startsWith(code))) {
+        return trimmed;
+    }
+    // Strip leading zeros, spaces, dashes and + signs from the local part
+    const cleaned = trimmed.replace(/^[\s+0-]*/, "").trim();
+    if (!cleaned)
+        return "";
+    return `${countryCode}${cleaned}`;
+}
+
 /**
  * Default currency for price formatting
  */
@@ -32851,29 +32921,23 @@ var isWeb = typeof window !== 'undefined' &&
     typeof document !== 'undefined';
 
 function cloneObject(data) {
-    let copy;
-    const isArray = Array.isArray(data);
-    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
-        copy = new Date(data);
+        return new Date(data);
     }
-    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
-        (isArray || isObject(data))) {
-        copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
-        if (!isArray && !isPlainObject(data)) {
-            copy = data;
-        }
-        else {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    copy[key] = cloneObject(data[key]);
-                }
-            }
-        }
+    const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
+    if (isWeb && (data instanceof Blob || isFileListInstance)) {
+        return data;
     }
-    else {
+    const isArray = Array.isArray(data);
+    if (!isArray && !(isObject(data) && isPlainObject(data))) {
         return data;
     }
+    const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+    for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+            copy[key] = cloneObject(data[key]);
+        }
+    }
     return copy;
 }
 
@@ -32899,6 +32963,8 @@ var get = (object, path, defaultValue) => {
 
 var isBoolean = (value) => typeof value === 'boolean';
 
+var isFunction = (value) => typeof value === 'function';
+
 var set = (object, path, value) => {
     let index = -1;
     const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -32926,45 +32992,21 @@ var set = (object, path, value) => {
 
 const EVENTS = {
     BLUR: 'blur',
-    CHANGE: 'change',
-};
+    CHANGE: 'change'};
 const VALIDATION_MODE = {
     all: 'all',
 };
 
-const HookFormContext = React.createContext(null);
-HookFormContext.displayName = 'HookFormContext';
 /**
- * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
- *
- * @returns return all useForm methods
- *
- * @example
- * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
- * ```
+ * Separate context for `control` to prevent unnecessary rerenders.
+ * Internal hooks that only need control use this instead of full form context.
+ */
+const HookFormControlContext = React.createContext(null);
+HookFormControlContext.displayName = 'HookFormControlContext';
+/**
+ * @internal Internal hook to access only control from context.
  */
-const useFormContext = () => React.useContext(HookFormContext);
+const useFormControlContext = () => React.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -33018,8 +33060,8 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * ```
  */
 function useFormState(props) {
-    const methods = useFormContext();
-    const { control = methods.control, disabled, name, exact } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -33065,10 +33107,10 @@ var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
+        return Object.is(object1, object2);
     }
     if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
+        return Object.is(object1.getTime(), object2.getTime());
     }
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
@@ -33091,7 +33133,7 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
                 (isObject(val1) && isObject(val2)) ||
                 (Array.isArray(val1) && Array.isArray(val2))
                 ? !deepEqual(val1, val2, _internal_visited)
-                : val1 !== val2) {
+                : !Object.is(val1, val2)) {
                 return false;
             }
         }
@@ -33116,8 +33158,8 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
  * ```
  */
 function useWatch(props) {
-    const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React.useRef(defaultValue);
     const _compute = React.useRef(compute);
     const _computeFormValues = React.useRef(undefined);
@@ -33210,20 +33252,20 @@ function useWatch(props) {
  * ```
  */
 function useController(props) {
-    const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
+    const formControl = useFormControlContext();
+    const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
         defaultValue: defaultValueMemo,
-        exact: true,
+        exact,
     });
     const formState = useFormState({
         control,
         name,
-        exact: true,
+        exact,
     });
     const _props = React.useRef(props);
     const _previousNameRef = React.useRef(undefined);
@@ -33271,12 +33313,12 @@ function useController(props) {
     }), [name, control._formValues]);
     const ref = React.useCallback((elm) => {
         const field = get(control._fields, name);
-        if (field && elm) {
+        if (field && field._f && elm) {
             field._f.ref = {
-                focus: () => elm.focus && elm.focus(),
-                select: () => elm.select && elm.select(),
-                setCustomValidity: (message) => elm.setCustomValidity(message),
-                reportValidity: () => elm.reportValidity(),
+                focus: () => isFunction(elm.focus) && elm.focus(),
+                select: () => isFunction(elm.select) && elm.select(),
+                setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+                reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity(),
             };
         }
     }, [control._fields, name]);
@@ -33383,6 +33425,9 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
+const HookFormContext = React.createContext(null);
+HookFormContext.displayName = 'HookFormContext';
+
 function useSelectField({ name, control, options: _options, rules, defaultValue, }) {
     const { field, fieldState: { error, invalid }, } = useController({
         name,
@@ -33872,6 +33917,91 @@ const DropdownMultiSelect = ({ options, name, control, placeholder = "Select opt
             }), error && jsxRuntime.jsx("p", { className: "mt-1 text-sm text-ews-error", children: error })] }));
 };
 
+const DEFAULT_COUNTRY_CODE = "+221";
+/**
+ * Phone number input with integrated country code selector.
+ *
+ * The component stores the **full** phone number (e.g. "+22177123456") as its
+ * form value so that the country code prefix is always preserved on save.
+ * The text field displays only the local part ("77123456") for a clean UX.
+ *
+ * Works with React Hook Form via `Controller` — no extra setup needed.
+ */
+const PhoneInput = React.forwardRef(({ countryCode, onCountryCodeChange, onChange, value, ...props }, ref) => {
+    // internalCode tracks user's explicit dropdown selection when no countryCode
+    // prop is provided and value doesn't carry a recognised prefix.
+    const [internalCode, setInternalCode] = React.useState(DEFAULT_COUNTRY_CODE);
+    const nativeRef = React.useRef(null);
+    // Derive the country code directly from value on every render — no state
+    // sync needed. Falls back to internalCode when value is empty or unrecognised.
+    const codeFromValue = value
+        ? COUNTRY_CODES.find(({ code }) => value.startsWith(code))?.code ?? null
+        : null;
+    const activeCode = countryCode ?? codeFromValue ?? internalCode;
+    const handleCodeChange = (newCode) => {
+        // Update internal or external country code state.
+        if (onCountryCodeChange) {
+            onCountryCodeChange(newCode);
+        }
+        else {
+            setInternalCode(newCode);
+        }
+        // Re-emit the current phone value with the new country code so that
+        // RHF (Controller) and any other onChange listeners stay in sync even
+        // when the user changes the dropdown without retyping the number.
+        const el = nativeRef.current;
+        if (el && onChange) {
+            const numeric = formatNumeric(el.value);
+            const fullValue = numeric ? `${newCode}${numeric}` : "";
+            // Pass the value string directly — RHF's Controller field.onChange
+            // accepts raw values, avoiding unreliable fake-event parsing.
+            onChange(fullValue);
+        }
+    };
+    const toLocalPart = (v) => extractCountryCodeFromPhoneNumber(v || "").cleanedPhoneNumber;
+    // When value prop changes (Controller / direct value prop usage),
+    // update the DOM input directly so the display stays in sync.
+    React.useEffect(() => {
+        const el = nativeRef.current;
+        if (el && value !== undefined) {
+            el.value = toLocalPart(value);
+        }
+    }, [value]);
+    const handleChange = (e) => {
+        // Enforce digits-only in the displayed field.
+        const numeric = formatNumeric(e.target.value);
+        if (e.target.value !== numeric) {
+            e.target.value = numeric;
+        }
+        // Always emit the full phone number (country code + local part) to the form.
+        const fullValue = numeric ? `${activeCode}${numeric}` : "";
+        const syntheticEvent = {
+            ...e,
+            target: { ...e.target, value: fullValue, name: e.target.name },
+        };
+        onChange?.(syntheticEvent);
+    };
+    // Merge the forwarded ref (used by RHF register) with our internal ref.
+    const composedRef = React.useCallback((node) => {
+        nativeRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    // Initial display: strip country code so only the local part is shown.
+    const initialDisplay = value !== undefined ? toLocalPart(value) : undefined;
+    return (jsxRuntime.jsx(Input, { ref: composedRef, type: "tel", 
+        // Use defaultValue (uncontrolled) so React never resets what the user types.
+        // Updates from the value prop are applied imperatively via the useEffect above.
+        defaultValue: initialDisplay, countryCodeSelect: {
+            options: COUNTRY_CODES,
+            value: activeCode,
+            onChange: handleCodeChange,
+        }, onChange: handleChange, ...props }));
+});
+PhoneInput.displayName = "PhoneInput";
+
 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",
@@ -34661,6 +34791,7 @@ exports.BusFront = BusFront;
 exports.BusFrontIcon = BusFront;
 exports.BusIcon = Bus;
 exports.Button = Button;
+exports.COUNTRY_CODES = COUNTRY_CODES;
 exports.Cable = Cable;
 exports.CableCar = CableCar;
 exports.CableCarIcon = CableCar;
@@ -38486,6 +38617,7 @@ exports.PhoneForwardedIcon = PhoneForwarded;
 exports.PhoneIcon = Phone;
 exports.PhoneIncoming = PhoneIncoming;
 exports.PhoneIncomingIcon = PhoneIncoming;
+exports.PhoneInput = PhoneInput;
 exports.PhoneMissed = PhoneMissed;
 exports.PhoneMissedIcon = PhoneMissed;
 exports.PhoneOff = PhoneOff;
@@ -39679,10 +39811,13 @@ exports.cn = cn;
 exports.createEnvConfig = createEnvConfig;
 exports.createLucideIcon = createLucideIcon;
 exports.debounce = debounce;
+exports.extractCountryCodeFromPhoneNumber = extractCountryCodeFromPhoneNumber;
 exports.formatCurrency = formatCurrency;
 exports.formatDate = formatDate;
 exports.formatNumeric = formatNumeric;
+exports.formatPhoneNumberWithCountryCode = formatPhoneNumberWithCountryCode;
 exports.generateId = generateId;
+exports.getDefaultCountryCode = getDefaultCountryCode;
 exports.icons = index;
 exports.isValidPhoneNumber = isValidPhoneNumber;
 exports.useDebounce = useDebounce;