@evolve.ui/core-components 1.0.1 → 1.2.0

package/src/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,515 @@
+import { cn } from '@evolve.ui/theme-system';
+import countryMapping from 'i18n-iso-countries';
+// The import attribute keeps the emitted ESM valid under raw Node (bundlers accept it too)
+import en from 'i18n-iso-countries/langs/en.json' with { type: 'json' };
+import { Dispatch, SetStateAction, useCallback, useMemo, useRef, useState } from 'react';
+import ReactCountryFlag from 'react-country-flag';
+import { createPortal } from 'react-dom';
+import {
+    Country,
+    getCountries,
+    getCountryCallingCode,
+    isPossiblePhoneNumber,
+    isSupportedCountry,
+    isValidPhoneNumber,
+} from 'react-phone-number-input';
+import RPhoneInput from 'react-phone-number-input/input';
+
+import { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';
+import { CaretDown, CaretUp, Close } from '../Icons';
+import { BodyPrimary } from '../Typography/Text/Text';
+import { nodeEnv } from '../utils/nodeEnv';
+import { useDropdownLogic } from './useDropdownLogic';
+
+countryMapping.registerLocale(en);
+
+const countries = getCountries()
+    .map((code) => ({ code, name: countryMapping.getName(code, 'en') }))
+    .filter((country) => Boolean(country.name))
+    .sort((a, b) => (a.name as string).localeCompare(b.name as string));
+
+type Props = {
+    /**
+     * Position of the country dropdown relative to the input.
+     * @default 'below'
+     */
+    dropdownPosition?: 'above' | 'below';
+    /**
+     * The initial country. (Decides the country calling code)
+     */
+    initialCountry?: Country;
+    /**
+     * The initial phone number. (The bit after the country calling code)
+     */
+    initialPhoneNumber?: string;
+    /**
+     * Optional callback for when the input loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * The setter of a `useState<string>` that indicates the country calling code.
+     */
+    onCountryCallingCodeChange?: Dispatch<SetStateAction<string>>;
+    /**
+     * The setter of a `useState<Country>` that indicates whether the phone number is valid.
+     */
+    onCountryChange?: Dispatch<SetStateAction<Country>>;
+    /**
+     * Optional callback for when the input gains focus.
+     */
+    onFocus?: () => void;
+    /**
+     * The setter of a `useState<string>` that indicates the phone number.
+     */
+    onPhoneNumberChange?: Dispatch<SetStateAction<string>>;
+    /**
+     * The setter of a `useState<boolean>` that indicates whether the phone number is valid.
+     */
+    onValidChange?: Dispatch<SetStateAction<boolean>>;
+    placeholder?: string;
+    /**
+     * Whether to show the invalid state.
+     * This is so you can control the invalid visual from outside the component.
+     * Perfect for after trying to submit a form.
+     *
+     * To force an error state use `hasError`
+     */
+    showErrorIfInvalid?: boolean;
+    /**
+     * Position the country dropdown menu absolutely, relative to <body />.
+     * Useful in places like modals where the menu may get cut off
+     */
+    usePortalMenu?: boolean;
+    /**
+     * The validation mode to use.
+     * - `strict`: The phone number must be valid. (Follows certain country rules like don't start with 0)
+     * - `loose`: The phone number must be possible. (Only checks number of digits)
+     *
+     * @default 'strict'
+     */
+    validation?: 'loose' | 'strict';
+} & FormLabelProps;
+
+export const PhoneInput = (unfilteredProps: Props) => {
+    const [
+        formLabelProps,
+        {
+            disabled,
+            dropdownPosition = 'below',
+            initialCountry = 'US',
+            onCountryCallingCodeChange,
+            onCountryChange,
+            onPhoneNumberChange,
+            onValidChange,
+            placeholder = 'Enter Number',
+            showErrorIfInvalid,
+            usePortalMenu,
+            validation = 'strict',
+            ...props
+        },
+    ] = extractFormLabelProps(unfilteredProps);
+
+    if (nodeEnv === 'development') {
+        if (!isSupportedCountry(initialCountry)) {
+            throw new Error(`Country ${initialCountry} is not supported`);
+        }
+    }
+
+    const [country, defaultSetCountry] = useState(initialCountry);
+    const [countryMenuOpen, setCountryMenuOpen] = useState(false);
+    const countryCallingCode = useMemo(() => {
+        const countryCallingCode = getCountryCallingCode(country);
+        onCountryCallingCodeChange?.(countryCallingCode);
+        return countryCallingCode;
+    }, [country, onCountryCallingCodeChange]);
+
+    const initialPhoneNumber = useMemo(() => {
+        if (!props.initialPhoneNumber) {
+            return '';
+        }
+
+        if (!props.initialPhoneNumber.startsWith('+')) {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            return `+${countryCallingCode}${props.initialPhoneNumber}`;
+        }
+
+        return props.initialPhoneNumber;
+
+        // Since it's only initial, rerunning is pointless
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const [phoneNumber, defaultSetPhoneNumber] = useState(initialPhoneNumber);
+
+    const [isValid, setIsValid] = useState(false);
+    const isFormattingNumber = useRef(false);
+
+    const setPhoneNumber = useCallback(
+        (value: string = '') => {
+            if (isFormattingNumber.current) {
+                return;
+            }
+
+            isFormattingNumber.current = true;
+
+            defaultSetPhoneNumber(value);
+            onPhoneNumberChange?.(value);
+            setCountryMenuOpen(false);
+
+            let valid: boolean;
+
+            if (validation === 'strict') {
+                valid = isValidPhoneNumber(value);
+            } else {
+                valid = isPossiblePhoneNumber(value);
+            }
+
+            onValidChange?.(valid);
+
+            if (formLabelProps.hasError) {
+                valid = false;
+            } else if (!showErrorIfInvalid) {
+                valid = true;
+            }
+
+            setIsValid(valid);
+
+            setTimeout(() => {
+                isFormattingNumber.current = false;
+            }, 0);
+        },
+        [formLabelProps.hasError, onPhoneNumberChange, onValidChange, showErrorIfInvalid, validation]
+    );
+
+    const setCountry = useCallback(
+        (value: Country) => {
+            defaultSetCountry(value);
+            onCountryChange?.(value);
+            setPhoneNumber('');
+            inputRef.current?.focus();
+        },
+        [onCountryChange, setPhoneNumber]
+    );
+
+    const { countrySearch, dropdownMenuRefFunc, onClick, searchInputRef, setCountrySearch } = useDropdownLogic({
+        country,
+        countryMenuOpen,
+        disabled,
+        setCountry,
+        setCountryMenuOpen,
+    });
+
+    const hasError = formLabelProps.hasError ?? !isValid;
+
+    const filteredCountries = useMemo(() => {
+        if (!countrySearch.trim()) {
+            return countries;
+        }
+
+        const searchTerm = countrySearch.toLowerCase();
+        return countries.filter(({ code, name }) => {
+            const countryName = name?.toLowerCase() || '';
+            const callingCode = getCountryCallingCode(code);
+            return countryName.includes(searchTerm) || callingCode.includes(searchTerm);
+        });
+    }, [countrySearch]);
+
+    const countryList = useMemo(
+        () =>
+            filteredCountries.map(({ code, name }, index) => {
+                const isSelected = code === country;
+                return (
+                    <div
+                        aria-label={`Select ${name} / +${getCountryCallingCode(code)}`}
+                        aria-selected={isSelected}
+                        className={cn(
+                            'hui-text-body-primary flex h-[42px] min-h-[42px] w-full cursor-pointer items-center px-xs py-xs',
+                            'hover:bg-background-hover',
+                            'keyboard_hover:bg-background-hover',
+                            {
+                                'keyboard_hover:bg-background-inverse keyboard_hover:text-text-inverse cursor-default bg-background-inverse text-text-inverse hover:bg-background-inverse hover:text-text-inverse':
+                                    isSelected,
+                            }
+                        )}
+                        data-country={code}
+                        key={code}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            onClick(e, index);
+                        }}
+                        onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setCountry(code);
+                                setCountryMenuOpen(false);
+                            }
+                        }}
+                        onTouchMove={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }}
+                        onTouchStart={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }}
+                        role="option"
+                        tabIndex={0}
+                    >
+                        <ReactCountryFlag
+                            className="mr-sm !w-md select-none [-webkit-user-drag:none]"
+                            countryCode={code}
+                            role="none"
+                            svg
+                        />
+                        <span className="overflow-hidden overflow-ellipsis whitespace-nowrap pr-2xs">{name}</span>(+
+                        {getCountryCallingCode(code)})
+                    </div>
+                );
+            }),
+        [onClick, country, setCountry, setCountryMenuOpen, filteredCountries]
+    );
+
+    const inputRef = useRef<HTMLInputElement>(null);
+    const inputContainerRef = useRef<HTMLDivElement>(null);
+
+    const inputRowClasses = cn(
+        'relative flex w-full items-center rounded-input border border-border-secondary px-xs py-xs',
+        {
+            // Error state
+            'border-border-critical': hasError && !countryMenuOpen && !disabled,
+            // Disabled state
+            'border-border-disabled bg-background-disabled': disabled,
+            // Country menu open state
+            'border-border-primary': countryMenuOpen && !disabled,
+            // Default hover and focus states
+            'focus-within:border-border-selected hover:border-border-hover': !disabled && !countryMenuOpen && !hasError,
+        }
+    );
+
+    // Calculate dropdown position for portal
+    const [portalPosition, setPortalPosition] = useState<{ left: number; top: number; width: number } | null>(null);
+
+    // Update dropdown position when menu opens and usePortalMenu is true
+    useMemo(() => {
+        if (countryMenuOpen && usePortalMenu && inputContainerRef.current) {
+            const rect = inputContainerRef.current.getBoundingClientRect();
+            setPortalPosition({
+                left: rect.left + window.scrollX,
+                top: rect.bottom + window.scrollY + 4, // 4px gap below input
+                width: rect.width,
+            });
+        } else {
+            setPortalPosition(null);
+        }
+    }, [countryMenuOpen, usePortalMenu]);
+
+    // Create the country dropdown content
+    // focus-convention: intentional — text field resting border (:focus-visible always matches a
+    // focused text input, mouse or keyboard). The outline-none is permitted because the border
+    // change is itself a visible focus indicator, so WCAG 2.4.7 is still met (SA-07/DS-98).
+    const countrySearchClasses =
+        'rounded w-full border border-border-secondary bg-background-primary px-xs py-2xs !text-[16px] text-sm text-text-primary placeholder:text-[16px] placeholder:text-text-inactive focus:border-border-selected focus:outline-none';
+
+    const countryDropdownContent = (
+        <div
+            aria-label="Country list"
+            className={cn(
+                'flex max-h-[226px] flex-col bg-background-primary py-[4px]',
+                'rounded-input border border-border-secondary shadow-03',
+                {
+                    // When not using portal, position absolute relative to input
+                    'absolute left-0 right-0 z-[1]': !usePortalMenu,
+                    'bottom-full mb-[4px]': dropdownPosition === 'above' && !usePortalMenu,
+                    // When using portal, position fixed and use high z-index
+                    'fixed z-[11111]': usePortalMenu,
+                    'top-full mt-[4px]': dropdownPosition === 'below' && !usePortalMenu,
+                }
+            )}
+            role="listbox"
+            style={
+                usePortalMenu && portalPosition
+                    ? {
+                          left: portalPosition.left,
+                          top: portalPosition.top,
+                          width: portalPosition.width,
+                      }
+                    : usePortalMenu
+                      ? {
+                            maxWidth: '400px',
+                            // Fallback positioning if we don't have position calculated yet
+                            minWidth: '300px',
+                        }
+                      : undefined
+            }
+        >
+            <div className="px-xs pb-xs">
+                <input
+                    aria-label="Search countries"
+                    className={countrySearchClasses}
+                    onBlur={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }}
+                    onChange={(e) => setCountrySearch(e.target.value)}
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter' && filteredCountries.length > 0) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setCountry(filteredCountries[0].code);
+                            setCountryMenuOpen(false);
+                        }
+                    }}
+                    onTouchStart={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        searchInputRef.current?.blur();
+                    }}
+                    placeholder="Search countries..."
+                    ref={searchInputRef}
+                    type="text"
+                    value={countrySearch}
+                />
+            </div>
+            <div
+                className="flex-1 overflow-y-auto overflow-x-hidden"
+                ref={dropdownMenuRefFunc}
+            >
+                {countryList}
+            </div>
+        </div>
+    );
+
+    return (
+        <FormLabel
+            {...formLabelProps}
+            hasError={hasError}
+        >
+            <div
+                aria-label="Phone input"
+                className={inputRowClasses}
+                ref={inputContainerRef}
+            >
+                <button
+                    aria-label="Select country"
+                    className={cn(
+                        'flex cursor-pointer select-none items-center border-none bg-transparent p-0',
+                        'hui-focus-visible-outline',
+                        {
+                            'bg-background-disabled [&>img]:opacity-40': disabled,
+                        }
+                    )}
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onClick(e);
+                    }}
+                    tabIndex={0}
+                    type="button"
+                >
+                    <ReactCountryFlag
+                        className="!w-md select-none [-webkit-user-drag:none]"
+                        countryCode={country}
+                        role="none"
+                        svg
+                    />
+
+                    <div className="px-xs">
+                        {countryMenuOpen ? (
+                            <CaretUp
+                                color={disabled ? 'disabled' : 'primary'}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    onClick(e);
+                                }}
+                                size="xs"
+                            />
+                        ) : (
+                            <CaretDown
+                                color={disabled ? 'disabled' : 'primary'}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    onClick(e);
+                                }}
+                                size="xs"
+                            />
+                        )}
+                    </div>
+                </button>
+                {countryMenuOpen &&
+                    (usePortalMenu && typeof document !== 'undefined'
+                        ? createPortal(
+                              countryDropdownContent,
+                              document.getElementById('hui-modal-target') || document.body
+                          )
+                        : countryDropdownContent)}
+                <div
+                    className={cn('mr-xs h-sm border-r border-border-secondary', {
+                        'border-border-disabled': disabled,
+                    })}
+                />
+                <BodyPrimary
+                    className="pr-xs"
+                    color={disabled ? 'disabled' : 'primary'}
+                >
+                    +{countryCallingCode}
+                </BodyPrimary>
+                <RPhoneInput
+                    aria-label="Phone number"
+                    className={cn(
+                        'hui-text-body-primary flex-1 border-none bg-transparent outline-none',
+                        'placeholder:text-text-inactive',
+                        {
+                            'bg-background-disabled text-text-disabled placeholder:text-text-disabled': disabled,
+                        }
+                    )}
+                    country={country}
+                    disabled={disabled}
+                    onBlur={() => {
+                        props.onBlur?.();
+                    }}
+                    onChange={setPhoneNumber}
+                    onFocus={() => {
+                        setCountryMenuOpen(false);
+                        props.onFocus?.();
+                    }}
+                    placeholder={placeholder}
+                    ref={inputRef}
+                    value={phoneNumber}
+                />
+                {phoneNumber && phoneNumber.length > 0 && (
+                    <button
+                        aria-label="Clear phone number"
+                        className={cn(
+                            'hui-focus-visible-outline ml-xs flex cursor-pointer items-center border-none bg-transparent p-0',
+                            {
+                                'bg-background-disabled': disabled,
+                            }
+                        )}
+                        disabled={disabled}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            setPhoneNumber('');
+                            inputRef.current?.focus();
+                        }}
+                        tabIndex={0}
+                    >
+                        <Close
+                            color={disabled ? 'disabled' : 'primary'}
+                            size="sm"
+                        />
+                    </button>
+                )}
+            </div>
+        </FormLabel>
+    );
+};
+
+export * from 'react-phone-number-input';
+export * from 'i18n-iso-countries';
+export * from 'react-country-flag';

package/src/PhoneInput/useDropdownLogic.tsx

@@ -0,0 +1,163 @@
+import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import { Country } from 'react-phone-number-input';
+
+import { effectEventListener } from '../utils/effectEventListener';
+
+export const useDropdownLogic = ({
+    country,
+    countryMenuOpen,
+    disabled,
+    setCountry,
+    setCountryMenuOpen,
+}: {
+    country: Country;
+    countryMenuOpen: boolean;
+    disabled?: boolean;
+    setCountry: (value: Country) => void;
+    setCountryMenuOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+    const keyboardNavigatedCountryIndex = useRef(-1);
+    const dropdownMenuRef = useRef<HTMLElement | null>(null);
+    const [countrySearch, setCountrySearch] = useState('');
+    const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+    useEffect(() => {
+        if (countryMenuOpen) {
+            if (disabled) {
+                setCountryMenuOpen(false);
+            } else {
+                // Focus the search input when dropdown opens
+                setTimeout(() => {
+                    searchInputRef.current?.focus();
+                }, 0);
+
+                return effectEventListener(window, 'click', () => {
+                    setCountryMenuOpen(false);
+                });
+            }
+        } else {
+            keyboardNavigatedCountryIndex.current = -1;
+            // Clear search when dropdown closes
+            setCountrySearch('');
+        }
+        return undefined;
+    }, [countryMenuOpen, disabled, keyboardNavigatedCountryIndex, setCountryMenuOpen]);
+
+    const onClick = useCallback(
+        (e: React.MouseEvent, index?: number) => {
+            if (!disabled) {
+                if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {
+                    // Same stale-index hazard as onKeydown: fall back to toggling the menu
+                    // when the tracked index no longer exists in the (filtered) list.
+                    const target = dropdownMenuRef.current.children[
+                        index !== undefined ? index : keyboardNavigatedCountryIndex.current
+                    ] as HTMLElement | undefined;
+
+                    if (target?.dataset.country) {
+                        setCountry(target.dataset.country as Country);
+                    } else {
+                        setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);
+                    }
+                } else {
+                    setCountryMenuOpen((countryMenuOpen) => !countryMenuOpen);
+                }
+            }
+            e.stopPropagation();
+        },
+        [disabled, setCountry, setCountryMenuOpen]
+    );
+
+    const dropdownMenuRefFunc = useCallback(
+        (ref: HTMLDivElement | null) => {
+            if (ref) {
+                dropdownMenuRef.current = ref;
+
+                // Use setTimeout to ensure the DOM is fully rendered
+                setTimeout(() => {
+                    const possibleTarget = ref.querySelector(`[data-country=${country}]`);
+
+                    if (possibleTarget) {
+                        const target = possibleTarget as HTMLElement;
+
+                        // Use scrollIntoView to properly center the selected country
+                        target.scrollIntoView({
+                            behavior: 'instant',
+                            block: 'center',
+                        });
+
+                        // Set keyboard navigation index
+                        for (let i = 0; i < ref.children.length; i++) {
+                            if ((ref.children[i] as HTMLElement).dataset.country === country) {
+                                keyboardNavigatedCountryIndex.current = i;
+                                break;
+                            }
+                        }
+                    }
+                }, 0);
+            }
+        },
+        [country]
+    );
+
+    const onKeydown = useCallback<EventListener>(
+        (e: Event) => {
+            if (dropdownMenuRef.current && keyboardNavigatedCountryIndex.current !== -1) {
+                const children = dropdownMenuRef.current.children;
+
+                // The index can go stale (out of bounds) after the search input filters the
+                // list — hammer crashes uncaught here; guard instead of indexing blindly.
+                if (children[keyboardNavigatedCountryIndex.current]?.classList.contains('keyboard_hover')) {
+                    children[keyboardNavigatedCountryIndex.current].classList.remove('keyboard_hover');
+                }
+
+                switch ((e as KeyboardEvent).key) {
+                    case 'ArrowDown':
+                        if (keyboardNavigatedCountryIndex.current < children.length - 1) {
+                            keyboardNavigatedCountryIndex.current += 1;
+                        }
+                        break;
+                    case 'ArrowUp':
+                        if (keyboardNavigatedCountryIndex.current > 0) {
+                            keyboardNavigatedCountryIndex.current -= 1;
+                        }
+                        break;
+                    default:
+                        const searchKey = (e as KeyboardEvent).key;
+
+                        const keyIndex = Array.from(children).findIndex((child) => {
+                            const childText = (child as HTMLElement).textContent;
+                            if (childText) {
+                                return childText[0].toLowerCase().includes(searchKey.toLowerCase());
+                            }
+                            return false;
+                        });
+
+                        if (keyIndex !== -1) {
+                            children[keyIndex].classList.add('keyboard_hover');
+                            children[keyIndex].scrollIntoView({
+                                behavior: 'instant',
+                                block: 'center',
+                            });
+                        }
+                        break;
+                }
+            }
+        },
+        [dropdownMenuRef, keyboardNavigatedCountryIndex]
+    );
+
+    useEffect(() => {
+        if (countryMenuOpen) {
+            return effectEventListener(document, 'keydown', onKeydown);
+        }
+        return undefined;
+    }, [countryMenuOpen, onKeydown]);
+
+    return {
+        countrySearch,
+        dropdownMenuRefFunc,
+        onClick,
+        searchInputRef,
+        setCountrySearch,
+    };
+};