@input-kit/phone 0.3.0 → 0.4.1

package/README.md

@@ -1,11 +1,19 @@
 # @input-kit/phone
 
+[![npm version](https://img.shields.io/npm/v/%40input-kit%2Fphone)](https://www.npmjs.com/package/@input-kit/phone)
+[![npm downloads](https://img.shields.io/npm/dm/%40input-kit%2Fphone)](https://www.npmjs.com/package/@input-kit/phone)
+[![CI](https://github.com/harshit-d3v/input-kit-phone/actions/workflows/ci.yml/badge.svg)](https://github.com/harshit-d3v/input-kit-phone/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/%40input-kit%2Fphone)](https://github.com/harshit-d3v/input-kit-phone/blob/main/LICENSE)
+[![GitHub stars](https://img.shields.io/github/stars/harshit-d3v/input-kit-phone?style=social)](https://github.com/harshit-d3v/input-kit-phone)
+
 Headless React phone input with a complete world country-code dataset, searchable country selection, and `libphonenumber-js` powered formatting and validation.
 
-Source, issues, and contributions: **[github.com/harshit-d3v/input-kit-phone](https://github.com/harshit-d3v/input-kit-phone)**
+Source, issues, and contributions: **[github.com/harshit-d3v/input-kit-phone](https://github.com/harshit-d3v/input-kit-phone)** — if this package saves you time, a ⭐ there helps others find it.
 
 ## Latest update
 
+**0.4.0** — **correctness fixes, please upgrade.** E.164 was built by concatenating the dial code onto whatever was typed, so the national trunk prefix people actually type survived into the international form: UK `07400123456` became `+4407400123456`, and India, Germany, France and Australia were wrong the same way. Around 106 countries were affected, validation still reported these as valid, and North American numbers never were — which is why it went unnoticed. Now resolved through libphonenumber metadata, so countries that genuinely keep a leading zero (Italy) still do. Also fixes: an inline `onValidationChange` causing "Maximum update depth exceeded"; input past the country maximum being discarded instead of truncated, which silently blanked an empty field on paste; a country selection that reverted on international numbers; the country button not announcing the selected country to screen readers; focus dropping to the top of the page when the dropdown closed; and types failing to resolve for CommonJS TypeScript consumers under `node16`/`nodenext`.
+
 **0.3.0** — auto-detect respects manual country selection, metadata-based length validation (no more false `too_long` in variable-length countries), input capped at the country's maximum length, `isPhoneTooLong()`, SSR-safe caret handling, dropdown `Home`/`End` + search→list keyboard navigation, unminified published output.
 
 **0.2.2** — npm README cleanup: release notes stay inline; removed pointers to repo-only markdown files.
@@ -33,7 +41,7 @@ npm install @input-kit/phone
 
 ```tsx
 import { PhoneInput } from '@input-kit/phone';
-import '@your-app/phone-input.css'; // style .phone-input-* classes
+import './phone-input.css'; // your own stylesheet — the package ships no CSS
 
 function Example() {
   return (

package/dist/index.cjs

@@ -395,9 +395,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 = libphonenumberJs.parsePhoneNumberFromString(normalized, getCountryCode(country));
+  if (parsed) {
+    return parsed.number;
+  }
+  return `${country.dialCode}${cleanPhone(normalized)}`;
 }
 function removeDialCode(phone, country) {
   if (!country) return phone;
@@ -690,13 +692,21 @@ function usePhoneInput(options = {}) {
     () => validatePhoneNumber(phone, country, required, validator),
     [phone, country, required, validator]
   );
+  const onValidationChangeRef = react.useRef(onValidationChange);
+  useIsomorphicLayoutEffect(() => {
+    onValidationChangeRef.current = onValidationChange;
+  });
   react.useEffect(() => {
-    onValidationChange?.(validation);
-  }, [validation, onValidationChange]);
+    onValidationChangeRef.current?.(validation);
+  }, [validation]);
   const localizedCountry = react.useMemo(
     () => localizeCountry(country, locale),
     [country, locale]
   );
+  const countryButtonAriaLabel = react.useMemo(
+    () => localizedCountry ? `${resolvedLabels.countryButtonAriaLabel}, ${localizedCountry.name} ${localizedCountry.dialCode}` : resolvedLabels.countryButtonAriaLabel,
+    [localizedCountry, resolvedLabels.countryButtonAriaLabel]
+  );
   const filteredCountries = react.useMemo(
     () => filterCountries(localizedCountries, searchQuery, preferredCountries),
     [localizedCountries, searchQuery, preferredCountries]
@@ -746,16 +756,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 = react.useCallback(() => {
     setIsOpen((prev) => !prev);
@@ -781,18 +795,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 = react.useCallback(() => {
     onFocus?.();
@@ -866,13 +885,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",
@@ -911,6 +930,7 @@ var PhoneInput = react.forwardRef(
     const containerRef = react.useRef(null);
     const inputRef = react.useRef(null);
     const optionRefs = react.useRef([]);
+    const countryButtonRef = react.useRef(null);
     const [highlightedIndex, setHighlightedIndex] = react.useState(0);
     const listboxId = react.useId();
     const {
@@ -953,10 +973,14 @@ var PhoneInput = react.forwardRef(
     const blur = react.useCallback(() => {
       inputRef.current?.blur();
     }, []);
+    const returnFocusToButton = react.useCallback(() => {
+      countryButtonRef.current?.focus();
+    }, []);
     const handleCountryClick = react.useCallback((c) => {
       selectCountry(c);
       setHighlightedIndex(0);
-    }, [selectCountry]);
+      returnFocusToButton();
+    }, [selectCountry, returnFocusToButton]);
     const handleCountryKeyDown = react.useCallback((e, c, index) => {
       switch (e.key) {
         case "Enter":
@@ -964,6 +988,7 @@ var PhoneInput = react.forwardRef(
           e.preventDefault();
           selectCountry(c);
           setHighlightedIndex(0);
+          returnFocusToButton();
           break;
         case "ArrowDown":
           e.preventDefault();
@@ -996,9 +1021,10 @@ var PhoneInput = react.forwardRef(
         case "Escape":
           e.preventDefault();
           closeDropdown();
+          returnFocusToButton();
           break;
       }
-    }, [selectCountry, filteredCountries.length, closeDropdown]);
+    }, [selectCountry, filteredCountries.length, closeDropdown, returnFocusToButton]);
     react.useEffect(() => {
       if (!isOpen) {
         return;
@@ -1050,13 +1076,15 @@ var PhoneInput = react.forwardRef(
       } else if (e.key === "Escape") {
         e.preventDefault();
         closeDropdown();
+        returnFocusToButton();
       }
-    }, [closeDropdown]);
+    }, [closeDropdown, returnFocusToButton]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClassName, "data-valid": isValid, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           ...countryButtonProps,
+          ref: countryButtonRef,
           type: "button",
           className: selectorClassName,
           disabled,