@input-kit/phone 0.3.0 → 0.4.0

package/dist/index.js

@@ -388,9 +388,11 @@ function addDialCode(phone, country) {
   if (!normalized) return "";
   if (normalized === "+") return "";
   if (normalized.startsWith("+")) return normalized;
-  const digits = cleanPhone(normalized);
-  const matchingDialCode = country.dialCodes.find((dialCode) => digits.startsWith(dialCode.replace("+", "")));
-  return matchingDialCode ? `+${digits}` : `${country.dialCode}${digits}`;
+  const parsed = parsePhoneNumberFromString(normalized, getCountryCode(country));
+  if (parsed) {
+    return parsed.number;
+  }
+  return `${country.dialCode}${cleanPhone(normalized)}`;
 }
 function removeDialCode(phone, country) {
   if (!country) return phone;
@@ -683,13 +685,21 @@ function usePhoneInput(options = {}) {
     () => validatePhoneNumber(phone, country, required, validator),
     [phone, country, required, validator]
   );
+  const onValidationChangeRef = useRef(onValidationChange);
+  useIsomorphicLayoutEffect(() => {
+    onValidationChangeRef.current = onValidationChange;
+  });
   useEffect(() => {
-    onValidationChange?.(validation);
-  }, [validation, onValidationChange]);
+    onValidationChangeRef.current?.(validation);
+  }, [validation]);
   const localizedCountry = useMemo(
     () => localizeCountry(country, locale),
     [country, locale]
   );
+  const countryButtonAriaLabel = useMemo(
+    () => localizedCountry ? `${resolvedLabels.countryButtonAriaLabel}, ${localizedCountry.name} ${localizedCountry.dialCode}` : resolvedLabels.countryButtonAriaLabel,
+    [localizedCountry, resolvedLabels.countryButtonAriaLabel]
+  );
   const filteredCountries = useMemo(
     () => filterCountries(localizedCountries, searchQuery, preferredCountries),
     [localizedCountries, searchQuery, preferredCountries]
@@ -739,16 +749,20 @@ function usePhoneInput(options = {}) {
     (selectedCountry) => {
       const rawCountry = getCountryByCode(selectedCountry.code) ?? selectedCountry;
       manualCountrySelectionRef.current = true;
+      const rewritten = phone.trim().startsWith("+") ? addDialCode(removeDialCode(phone, country), rawCountry) : phone;
+      if (rewritten !== phone && !isControlled) {
+        setInternalPhone(rewritten);
+      }
       setCountry(rawCountry);
       setIsOpen(false);
       setSearchQuery("");
       onCountryChange?.(getOutputCountry(rawCountry));
       onChange?.(
-        includeDialCode ? addDialCode(phone, rawCountry) : phone,
+        includeDialCode ? addDialCode(rewritten, rawCountry) : rewritten,
         getOutputCountry(rawCountry)
       );
     },
-    [phone, onChange, onCountryChange, includeDialCode, getOutputCountry]
+    [phone, country, isControlled, onChange, onCountryChange, includeDialCode, getOutputCountry]
   );
   const toggleDropdown = useCallback(() => {
     setIsOpen((prev) => !prev);
@@ -774,18 +788,23 @@ function usePhoneInput(options = {}) {
       const rawValue = event.target.value;
       const caretPosition = event.target.selectionStart ?? rawValue.length;
       const unformatted = rawValue.trim().startsWith("+") ? `+${rawValue.replace(/\D/g, "")}` : unformatPhone(rawValue);
-      if (cleanPhone(unformatted).length > cleanPhone(phone).length && isPhoneTooLong(unformatted, country)) {
-        event.target.value = formattedPhone;
-        const restoredCaret = Math.min(Math.max(caretPosition - 1, 0), formattedPhone.length);
+      const isInternationalEntry = unformatted.startsWith("+") || unformatted.startsWith("00");
+      if (!isInternationalEntry && cleanPhone(unformatted).length > cleanPhone(phone).length && isPhoneTooLong(unformatted, country)) {
+        const truncated = limitInputLength(unformatted, country);
+        const truncatedDisplay = formatPhone(truncated, country);
+        event.target.value = truncatedDisplay;
+        const restoredCaret = Math.min(Math.max(caretPosition - 1, 0), truncatedDisplay.length);
         if (typeof event.target.setSelectionRange === "function") {
           event.target.setSelectionRange(restoredCaret, restoredCaret);
         }
+        pendingCaretDigitIndexRef.current = countDigitsBeforePosition(truncatedDisplay, restoredCaret);
+        setPhone(truncated);
         return;
       }
       pendingCaretDigitIndexRef.current = countDigitsBeforePosition(rawValue, caretPosition);
       setPhone(unformatted);
     },
-    [setPhone, phone, country, formattedPhone]
+    [setPhone, phone, country]
   );
   const handleFocus = useCallback(() => {
     onFocus?.();
@@ -859,13 +878,13 @@ function usePhoneInput(options = {}) {
       onClick: toggleDropdown,
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox",
-      "aria-label": resolvedLabels.countryButtonAriaLabel
+      "aria-label": countryButtonAriaLabel
     },
     countrySelectorProps: {
       onClick: toggleDropdown,
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox",
-      "aria-label": resolvedLabels.countryButtonAriaLabel
+      "aria-label": countryButtonAriaLabel
     },
     dropdownProps: {
       role: "listbox",
@@ -904,6 +923,7 @@ var PhoneInput = forwardRef(
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const optionRefs = useRef([]);
+    const countryButtonRef = useRef(null);
     const [highlightedIndex, setHighlightedIndex] = useState(0);
     const listboxId = useId();
     const {
@@ -946,10 +966,14 @@ var PhoneInput = forwardRef(
     const blur = useCallback(() => {
       inputRef.current?.blur();
     }, []);
+    const returnFocusToButton = useCallback(() => {
+      countryButtonRef.current?.focus();
+    }, []);
     const handleCountryClick = useCallback((c) => {
       selectCountry(c);
       setHighlightedIndex(0);
-    }, [selectCountry]);
+      returnFocusToButton();
+    }, [selectCountry, returnFocusToButton]);
     const handleCountryKeyDown = useCallback((e, c, index) => {
       switch (e.key) {
         case "Enter":
@@ -957,6 +981,7 @@ var PhoneInput = forwardRef(
           e.preventDefault();
           selectCountry(c);
           setHighlightedIndex(0);
+          returnFocusToButton();
           break;
         case "ArrowDown":
           e.preventDefault();
@@ -989,9 +1014,10 @@ var PhoneInput = forwardRef(
         case "Escape":
           e.preventDefault();
           closeDropdown();
+          returnFocusToButton();
           break;
       }
-    }, [selectCountry, filteredCountries.length, closeDropdown]);
+    }, [selectCountry, filteredCountries.length, closeDropdown, returnFocusToButton]);
     useEffect(() => {
       if (!isOpen) {
         return;
@@ -1043,13 +1069,15 @@ var PhoneInput = forwardRef(
       } else if (e.key === "Escape") {
         e.preventDefault();
         closeDropdown();
+        returnFocusToButton();
       }
-    }, [closeDropdown]);
+    }, [closeDropdown, returnFocusToButton]);
     return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClassName, "data-valid": isValid, children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
           ...countryButtonProps,
+          ref: countryButtonRef,
           type: "button",
           className: selectorClassName,
           disabled,