@input-kit/phone 0.5.0 → 0.6.0

package/dist/index.d.cts

@@ -83,6 +83,7 @@ interface PhoneInputLabels {
     searchCountriesAriaLabel: string;
     countryOptionsAriaLabel: string;
     countryButtonAriaLabel: string;
+    countryResultsAnnouncement: string;
 }
 interface PhoneInputOptions {
     defaultCountry?: string;
@@ -132,11 +133,32 @@ interface UsePhoneInputReturn extends PhoneInputState, PhoneInputActions {
     inputProps: InputHTMLAttributes<HTMLInputElement> & {
         ref: RefObject<HTMLInputElement | null>;
     };
+    highlightedIndex: number;
+    activeCountry: Country | undefined;
+    countryResultsText: string;
+    setHighlightedIndex: (index: number) => void;
+    moveHighlight: (nextIndex: number) => void;
     countryButtonProps: {
         onClick: () => void;
         'aria-expanded': boolean;
         'aria-haspopup': 'listbox';
         'aria-label': string;
+        'aria-controls': string;
+    };
+    countrySearchProps: {
+        role: 'combobox';
+        value: string;
+        onChange: (event: {
+            target: {
+                value: string;
+            };
+        }) => void;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-autocomplete': 'list';
+        'aria-activedescendant': string | undefined;
+        'aria-label': string;
+        placeholder: string;
     };
     countrySelectorProps: {
         onClick: () => void;
@@ -145,10 +167,12 @@ interface UsePhoneInputReturn extends PhoneInputState, PhoneInputActions {
         'aria-label': string;
     };
     dropdownProps: {
+        id: string;
         role: 'listbox';
         'aria-label': string;
-        'aria-activedescendant'?: string;
     };
+    listboxId: string;
+    activeOptionId: string | undefined;
     filteredCountries: Country[];
     countries: Country[];
     selectCountry: (country: Country) => void;

package/dist/index.d.ts

@@ -83,6 +83,7 @@ interface PhoneInputLabels {
     searchCountriesAriaLabel: string;
     countryOptionsAriaLabel: string;
     countryButtonAriaLabel: string;
+    countryResultsAnnouncement: string;
 }
 interface PhoneInputOptions {
     defaultCountry?: string;
@@ -132,11 +133,32 @@ interface UsePhoneInputReturn extends PhoneInputState, PhoneInputActions {
     inputProps: InputHTMLAttributes<HTMLInputElement> & {
         ref: RefObject<HTMLInputElement | null>;
     };
+    highlightedIndex: number;
+    activeCountry: Country | undefined;
+    countryResultsText: string;
+    setHighlightedIndex: (index: number) => void;
+    moveHighlight: (nextIndex: number) => void;
     countryButtonProps: {
         onClick: () => void;
         'aria-expanded': boolean;
         'aria-haspopup': 'listbox';
         'aria-label': string;
+        'aria-controls': string;
+    };
+    countrySearchProps: {
+        role: 'combobox';
+        value: string;
+        onChange: (event: {
+            target: {
+                value: string;
+            };
+        }) => void;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-autocomplete': 'list';
+        'aria-activedescendant': string | undefined;
+        'aria-label': string;
+        placeholder: string;
     };
     countrySelectorProps: {
         onClick: () => void;
@@ -145,10 +167,12 @@ interface UsePhoneInputReturn extends PhoneInputState, PhoneInputActions {
         'aria-label': string;
     };
     dropdownProps: {
+        id: string;
         role: 'listbox';
         'aria-label': string;
-        'aria-activedescendant'?: string;
     };
+    listboxId: string;
+    activeOptionId: string | undefined;
     filteredCountries: Country[];
     countries: Country[];
     selectCountry: (country: Country) => void;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState, useId, useCallback, useEffect, useImperativeHandle, useMemo, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useCallback, useEffect, useImperativeHandle, useMemo, useState, useId, useLayoutEffect } from 'react';
 import { getCountries, getCountryCallingCode, getExampleNumber, parsePhoneNumberFromString, AsYouType, validatePhoneNumberLength, isPossiblePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -2146,7 +2146,8 @@ var DEFAULT_PHONE_INPUT_LABELS = {
   noCountriesFound: "No countries found",
   searchCountriesAriaLabel: "Search countries",
   countryOptionsAriaLabel: "Country options",
-  countryButtonAriaLabel: "Open country selector"
+  countryButtonAriaLabel: "Open country selector",
+  countryResultsAnnouncement: "{count} countries"
 };
 var LABELS_BY_LANGUAGE = {
   en: DEFAULT_PHONE_INPUT_LABELS,
@@ -2156,7 +2157,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "Aucun pays trouv\xE9",
     searchCountriesAriaLabel: "Rechercher des pays",
     countryOptionsAriaLabel: "Options de pays",
-    countryButtonAriaLabel: "Ouvrir le s\xE9lecteur de pays"
+    countryButtonAriaLabel: "Ouvrir le s\xE9lecteur de pays",
+    countryResultsAnnouncement: "{count} pays"
   },
   de: {
     selectCountry: "Land ausw\xE4hlen",
@@ -2164,7 +2166,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "Keine L\xE4nder gefunden",
     searchCountriesAriaLabel: "L\xE4nder suchen",
     countryOptionsAriaLabel: "L\xE4nderoptionen",
-    countryButtonAriaLabel: "L\xE4nderauswahl \xF6ffnen"
+    countryButtonAriaLabel: "L\xE4nderauswahl \xF6ffnen",
+    countryResultsAnnouncement: "{count} L\xE4nder"
   },
   es: {
     selectCountry: "Seleccionar pa\xEDs",
@@ -2172,7 +2175,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "No se encontraron pa\xEDses",
     searchCountriesAriaLabel: "Buscar pa\xEDses",
     countryOptionsAriaLabel: "Opciones de pa\xEDs",
-    countryButtonAriaLabel: "Abrir selector de pa\xEDs"
+    countryButtonAriaLabel: "Abrir selector de pa\xEDs",
+    countryResultsAnnouncement: "{count} pa\xEDses"
   },
   pt: {
     selectCountry: "Selecionar pa\xEDs",
@@ -2180,7 +2184,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "Nenhum pa\xEDs encontrado",
     searchCountriesAriaLabel: "Pesquisar pa\xEDses",
     countryOptionsAriaLabel: "Op\xE7\xF5es de pa\xEDs",
-    countryButtonAriaLabel: "Abrir seletor de pa\xEDs"
+    countryButtonAriaLabel: "Abrir seletor de pa\xEDs",
+    countryResultsAnnouncement: "{count} pa\xEDses"
   },
   it: {
     selectCountry: "Seleziona paese",
@@ -2188,7 +2193,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "Nessun paese trovato",
     searchCountriesAriaLabel: "Cerca paesi",
     countryOptionsAriaLabel: "Opzioni paese",
-    countryButtonAriaLabel: "Apri selettore paese"
+    countryButtonAriaLabel: "Apri selettore paese",
+    countryResultsAnnouncement: "{count} paesi"
   },
   ja: {
     selectCountry: "\u56FD\u3092\u9078\u629E",
@@ -2196,7 +2202,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "\u56FD\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093",
     searchCountriesAriaLabel: "\u56FD\u3092\u691C\u7D22",
     countryOptionsAriaLabel: "\u56FD\u306E\u5019\u88DC",
-    countryButtonAriaLabel: "\u56FD\u306E\u30BB\u30EC\u30AF\u30BF\u30FC\u3092\u958B\u304F"
+    countryButtonAriaLabel: "\u56FD\u306E\u30BB\u30EC\u30AF\u30BF\u30FC\u3092\u958B\u304F",
+    countryResultsAnnouncement: "{count} \u4EF6\u306E\u56FD"
   },
   ko: {
     selectCountry: "\uAD6D\uAC00 \uC120\uD0DD",
@@ -2204,7 +2211,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "\uAD6D\uAC00\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4",
     searchCountriesAriaLabel: "\uAD6D\uAC00 \uAC80\uC0C9",
     countryOptionsAriaLabel: "\uAD6D\uAC00 \uC635\uC158",
-    countryButtonAriaLabel: "\uAD6D\uAC00 \uC120\uD0DD\uAE30 \uC5F4\uAE30"
+    countryButtonAriaLabel: "\uAD6D\uAC00 \uC120\uD0DD\uAE30 \uC5F4\uAE30",
+    countryResultsAnnouncement: "\uAD6D\uAC00 {count}\uAC1C"
   },
   zh: {
     selectCountry: "\u9009\u62E9\u56FD\u5BB6",
@@ -2212,7 +2220,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "\u672A\u627E\u5230\u56FD\u5BB6",
     searchCountriesAriaLabel: "\u641C\u7D22\u56FD\u5BB6",
     countryOptionsAriaLabel: "\u56FD\u5BB6\u9009\u9879",
-    countryButtonAriaLabel: "\u6253\u5F00\u56FD\u5BB6\u9009\u62E9\u5668"
+    countryButtonAriaLabel: "\u6253\u5F00\u56FD\u5BB6\u9009\u62E9\u5668",
+    countryResultsAnnouncement: "{count} \u4E2A\u56FD\u5BB6"
   },
   ar: {
     selectCountry: "\u0627\u062E\u062A\u0631 \u0627\u0644\u062F\u0648\u0644\u0629",
@@ -2220,7 +2229,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "\u0644\u0645 \u064A\u062A\u0645 \u0627\u0644\u0639\u062B\u0648\u0631 \u0639\u0644\u0649 \u062F\u0648\u0644",
     searchCountriesAriaLabel: "\u0627\u0628\u062D\u062B \u0639\u0646 \u0627\u0644\u062F\u0648\u0644",
     countryOptionsAriaLabel: "\u062E\u064A\u0627\u0631\u0627\u062A \u0627\u0644\u062F\u0648\u0644",
-    countryButtonAriaLabel: "\u0627\u0641\u062A\u062D \u0645\u062D\u062F\u062F \u0627\u0644\u062F\u0648\u0644\u0629"
+    countryButtonAriaLabel: "\u0627\u0641\u062A\u062D \u0645\u062D\u062F\u062F \u0627\u0644\u062F\u0648\u0644\u0629",
+    countryResultsAnnouncement: "{count} \u062F\u0648\u0644\u0629"
   },
   hi: {
     selectCountry: "\u0926\u0947\u0936 \u091A\u0941\u0928\u0947\u0902",
@@ -2228,7 +2238,8 @@ var LABELS_BY_LANGUAGE = {
     noCountriesFound: "\u0915\u094B\u0908 \u0926\u0947\u0936 \u0928\u0939\u0940\u0902 \u092E\u093F\u0932\u093E",
     searchCountriesAriaLabel: "\u0926\u0947\u0936 \u0916\u094B\u091C\u0947\u0902",
     countryOptionsAriaLabel: "\u0926\u0947\u0936 \u0935\u093F\u0915\u0932\u094D\u092A",
-    countryButtonAriaLabel: "\u0926\u0947\u0936 \u091A\u092F\u0928 \u0916\u094B\u0932\u0947\u0902"
+    countryButtonAriaLabel: "\u0926\u0947\u0936 \u091A\u092F\u0928 \u0916\u094B\u0932\u0947\u0902",
+    countryResultsAnnouncement: "{count} \u0926\u0947\u0936"
   }
 };
 function getPrimaryLanguage(locale) {
@@ -2570,6 +2581,8 @@ function usePhoneInput(options = {}) {
   const [country, setCountry] = useState(initialCountry);
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const listboxId = useId();
   const phone = isControlled ? controlledValue : internalPhone;
   const getOutputCountry = useCallback(
     (nextCountry) => localizeCountry(nextCountry, locale),
@@ -2640,6 +2653,26 @@ function usePhoneInput(options = {}) {
     () => filterCountries(localizedCountries, searchQuery, preferredCountries),
     [localizedCountries, searchQuery, preferredCountries]
   );
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [searchQuery]);
+  useEffect(() => {
+    setHighlightedIndex((current) => {
+      if (filteredCountries.length === 0) {
+        return 0;
+      }
+      return current >= filteredCountries.length ? filteredCountries.length - 1 : current;
+    });
+  }, [filteredCountries.length]);
+  const wasOpenRef = useRef(false);
+  useEffect(() => {
+    if (isOpen && !wasOpenRef.current) {
+      const selectedIndex = filteredCountries.findIndex((candidate) => candidate.code === country?.code);
+      setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, filteredCountries, country?.code]);
+  const activeCountry = filteredCountries[highlightedIndex];
   useIsomorphicLayoutEffect(() => {
     const nextDigitIndex = pendingCaretDigitIndexRef.current;
     const input = inputRef.current;
@@ -2752,11 +2785,22 @@ function usePhoneInput(options = {}) {
     (code) => `phone-input-country-${code}`,
     []
   );
+  const activeOptionId = activeCountry ? getCountryOptionId(activeCountry.code) : void 0;
+  const countryResultsText = filteredCountries.length === 0 ? resolvedLabels.noCountriesFound : resolvedLabels.countryResultsAnnouncement.replace("{count}", String(filteredCountries.length));
+  const moveHighlight = useCallback(
+    (nextIndex) => {
+      const lastIndex = filteredCountries.length - 1;
+      setHighlightedIndex(lastIndex < 0 ? 0 : Math.min(Math.max(nextIndex, 0), lastIndex));
+    },
+    [filteredCountries.length]
+  );
   const getCountryOptionProps = useCallback(
     (optionCountry, index) => ({
       id: getCountryOptionId(optionCountry.code),
       role: "option",
-      "aria-selected": optionCountry.code === country?.code,
+      // Selection follows the active option in a single-select listbox, so this
+      // tracks the highlight rather than the committed country.
+      "aria-selected": index === highlightedIndex,
       onClick: () => selectCountry(optionCountry),
       onKeyDown: (event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -2770,7 +2814,7 @@ function usePhoneInput(options = {}) {
       },
       tabIndex: index === 0 ? 0 : -1
     }),
-    [closeDropdown, country?.code, getCountryOptionId, selectCountry]
+    [closeDropdown, highlightedIndex, getCountryOptionId, selectCountry]
   );
   return {
     // State
@@ -2785,6 +2829,9 @@ function usePhoneInput(options = {}) {
     searchQuery,
     labels: resolvedLabels,
     formattedValue: formattedPhone,
+    highlightedIndex,
+    activeCountry,
+    countryResultsText,
     // Actions
     setPhone,
     setValue: setPhone,
@@ -2796,6 +2843,8 @@ function usePhoneInput(options = {}) {
     closeDropdown,
     close: closeDropdown,
     setSearchQuery,
+    setHighlightedIndex,
+    moveHighlight,
     clear,
     // Props
     inputProps: {
@@ -2814,7 +2863,21 @@ function usePhoneInput(options = {}) {
       onClick: toggleDropdown,
       "aria-expanded": isOpen,
       "aria-haspopup": "listbox",
-      "aria-label": countryButtonAriaLabel
+      "aria-label": countryButtonAriaLabel,
+      "aria-controls": listboxId
+    },
+    // The search field is the combobox: it keeps focus while the arrow keys
+    // move `aria-activedescendant` through the listbox.
+    countrySearchProps: {
+      role: "combobox",
+      value: searchQuery,
+      onChange: (event) => setSearchQuery(event.target.value),
+      "aria-expanded": isOpen,
+      "aria-controls": listboxId,
+      "aria-autocomplete": "list",
+      "aria-activedescendant": activeOptionId,
+      "aria-label": resolvedLabels.searchCountriesAriaLabel,
+      placeholder: resolvedLabels.countrySearchPlaceholder
     },
     countrySelectorProps: {
       onClick: toggleDropdown,
@@ -2823,9 +2886,12 @@ function usePhoneInput(options = {}) {
       "aria-label": countryButtonAriaLabel
     },
     dropdownProps: {
+      id: listboxId,
       role: "listbox",
       "aria-label": resolvedLabels.countryOptionsAriaLabel
     },
+    listboxId,
+    activeOptionId,
     getCountryOptionId,
     filteredCountries,
     countries: filteredCountries,
@@ -2860,24 +2926,25 @@ var PhoneInput = forwardRef(
     const inputRef = useRef(null);
     const optionRefs = useRef([]);
     const countryButtonRef = useRef(null);
-    const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const listboxId = useId();
     const {
       inputProps,
       countryButtonProps,
+      countrySearchProps,
       dropdownProps,
       country,
       filteredCountries,
       isOpen,
       isValid,
-      searchQuery,
-      setSearchQuery,
       setCountry,
       selectCountry,
       clear,
       openDropdown,
       closeDropdown,
       getCountryOptionId,
+      highlightedIndex,
+      setHighlightedIndex,
+      moveHighlight,
+      countryResultsText,
       labels
     } = usePhoneInput({
       value,
@@ -2907,7 +2974,6 @@ var PhoneInput = forwardRef(
     }, []);
     const handleCountryClick = useCallback((c) => {
       selectCountry(c);
-      setHighlightedIndex(0);
       returnFocusToButton();
     }, [selectCountry, returnFocusToButton]);
     const handleCountryKeyDown = useCallback((e, c, index) => {
@@ -2916,7 +2982,6 @@ var PhoneInput = forwardRef(
         case " ":
           e.preventDefault();
           selectCountry(c);
-          setHighlightedIndex(0);
           returnFocusToButton();
           break;
         case "ArrowDown":
@@ -2953,7 +3018,7 @@ var PhoneInput = forwardRef(
           returnFocusToButton();
           break;
       }
-    }, [selectCountry, filteredCountries.length, closeDropdown, returnFocusToButton]);
+    }, [selectCountry, filteredCountries.length, closeDropdown, returnFocusToButton, setHighlightedIndex]);
     useEffect(() => {
       if (!isOpen) {
         return;
@@ -2978,16 +3043,14 @@ var PhoneInput = forwardRef(
       };
     }, [isOpen, closeDropdown]);
     useEffect(() => {
-      if (filteredCountries.length === 0) {
-        if (highlightedIndex !== 0) {
-          setHighlightedIndex(0);
-        }
+      if (!isOpen || !searchable) {
         return;
       }
-      if (highlightedIndex >= filteredCountries.length) {
-        setHighlightedIndex(filteredCountries.length - 1);
+      const activeOption = optionRefs.current[highlightedIndex];
+      if (typeof activeOption?.scrollIntoView === "function") {
+        activeOption.scrollIntoView({ block: "nearest" });
       }
-    }, [filteredCountries.length, highlightedIndex]);
+    }, [isOpen, searchable, highlightedIndex]);
     useImperativeHandle(ref, () => ({
       focus,
       blur,
@@ -2998,16 +3061,39 @@ var PhoneInput = forwardRef(
       close: closeDropdown
     }));
     const handleSearchKeyDown = useCallback((e) => {
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setHighlightedIndex(0);
-        optionRefs.current[0]?.focus();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        closeDropdown();
-        returnFocusToButton();
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          moveHighlight(highlightedIndex + 1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveHighlight(highlightedIndex - 1);
+          break;
+        case "Home":
+          e.preventDefault();
+          moveHighlight(0);
+          break;
+        case "End":
+          e.preventDefault();
+          moveHighlight(filteredCountries.length - 1);
+          break;
+        case "Enter": {
+          const active = filteredCountries[highlightedIndex];
+          if (active) {
+            e.preventDefault();
+            selectCountry(active);
+            returnFocusToButton();
+          }
+          break;
+        }
+        case "Escape":
+          e.preventDefault();
+          closeDropdown();
+          returnFocusToButton();
+          break;
       }
-    }, [closeDropdown, returnFocusToButton]);
+    }, [closeDropdown, returnFocusToButton, moveHighlight, highlightedIndex, filteredCountries, selectCountry]);
     return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClassName, "data-valid": isValid, children: [
       /* @__PURE__ */ jsxs(
         "button",
@@ -3018,7 +3104,6 @@ var PhoneInput = forwardRef(
           className: selectorClassName,
           disabled,
           tabIndex: disabled ? -1 : 0,
-          "aria-controls": listboxId,
           children: [
             country ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "phone-input-flag", children: country.flag }),
@@ -3047,22 +3132,26 @@ var PhoneInput = forwardRef(
         searchable && /* @__PURE__ */ jsx("div", { className: "phone-input-search", children: /* @__PURE__ */ jsx(
           "input",
           {
+            ...countrySearchProps,
             type: "text",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value),
             onKeyDown: handleSearchKeyDown,
-            placeholder: labels.countrySearchPlaceholder,
-            autoFocus: true,
-            "aria-controls": listboxId,
-            "aria-label": labels.searchCountriesAriaLabel
+            autoFocus: true
           }
         ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" },
+            children: countryResultsText
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "ul",
           {
             ...dropdownProps,
             className: "phone-input-country-list",
-            id: listboxId,
             children: [
               filteredCountries.map((c, index) => /* @__PURE__ */ jsxs(
                 "li",
@@ -3072,12 +3161,12 @@ var PhoneInput = forwardRef(
                     optionRefs.current[index] = element;
                   },
                   role: "option",
-                  "aria-selected": c.code === country?.code,
+                  "aria-selected": index === highlightedIndex,
                   className: `phone-input-country-option ${c.code === country?.code ? "selected" : ""} ${index === highlightedIndex ? "highlighted" : ""}`,
                   onClick: () => handleCountryClick(c),
                   onKeyDown: (e) => handleCountryKeyDown(e, c, index),
                   onMouseEnter: () => setHighlightedIndex(index),
-                  tabIndex: index === highlightedIndex ? 0 : -1,
+                  tabIndex: searchable ? -1 : index === highlightedIndex ? 0 : -1,
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "phone-input-flag", children: c.flag }),
                     /* @__PURE__ */ jsx("span", { className: "phone-input-country-name", children: getCountryDisplayName(c) }),