@input-kit/phone 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -2152,7 +2152,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,
@@ -2162,7 +2163,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",
@@ -2170,7 +2172,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",
@@ -2178,7 +2181,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",
@@ -2186,7 +2190,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",
@@ -2194,7 +2199,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",
@@ -2202,7 +2208,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",
@@ -2210,7 +2217,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",
@@ -2218,7 +2226,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",
@@ -2226,7 +2235,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",
@@ -2234,7 +2244,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) {
@@ -2576,6 +2587,8 @@ function usePhoneInput(options = {}) {
   const [country, setCountry] = react.useState(initialCountry);
   const [isOpen, setIsOpen] = react.useState(false);
   const [searchQuery, setSearchQuery] = react.useState("");
+  const [highlightedIndex, setHighlightedIndex] = react.useState(0);
+  const listboxId = react.useId();
   const phone = isControlled ? controlledValue : internalPhone;
   const getOutputCountry = react.useCallback(
     (nextCountry) => localizeCountry(nextCountry, locale),
@@ -2646,6 +2659,26 @@ function usePhoneInput(options = {}) {
     () => filterCountries(localizedCountries, searchQuery, preferredCountries),
     [localizedCountries, searchQuery, preferredCountries]
   );
+  react.useEffect(() => {
+    setHighlightedIndex(0);
+  }, [searchQuery]);
+  react.useEffect(() => {
+    setHighlightedIndex((current) => {
+      if (filteredCountries.length === 0) {
+        return 0;
+      }
+      return current >= filteredCountries.length ? filteredCountries.length - 1 : current;
+    });
+  }, [filteredCountries.length]);
+  const wasOpenRef = react.useRef(false);
+  react.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;
@@ -2758,11 +2791,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 = react.useCallback(
+    (nextIndex) => {
+      const lastIndex = filteredCountries.length - 1;
+      setHighlightedIndex(lastIndex < 0 ? 0 : Math.min(Math.max(nextIndex, 0), lastIndex));
+    },
+    [filteredCountries.length]
+  );
   const getCountryOptionProps = react.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 === " ") {
@@ -2776,7 +2820,7 @@ function usePhoneInput(options = {}) {
       },
       tabIndex: index === 0 ? 0 : -1
     }),
-    [closeDropdown, country?.code, getCountryOptionId, selectCountry]
+    [closeDropdown, highlightedIndex, getCountryOptionId, selectCountry]
   );
   return {
     // State
@@ -2791,6 +2835,9 @@ function usePhoneInput(options = {}) {
     searchQuery,
     labels: resolvedLabels,
     formattedValue: formattedPhone,
+    highlightedIndex,
+    activeCountry,
+    countryResultsText,
     // Actions
     setPhone,
     setValue: setPhone,
@@ -2802,6 +2849,8 @@ function usePhoneInput(options = {}) {
     closeDropdown,
     close: closeDropdown,
     setSearchQuery,
+    setHighlightedIndex,
+    moveHighlight,
     clear,
     // Props
     inputProps: {
@@ -2820,7 +2869,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,
@@ -2829,9 +2892,12 @@ function usePhoneInput(options = {}) {
       "aria-label": countryButtonAriaLabel
     },
     dropdownProps: {
+      id: listboxId,
       role: "listbox",
       "aria-label": resolvedLabels.countryOptionsAriaLabel
     },
+    listboxId,
+    activeOptionId,
     getCountryOptionId,
     filteredCountries,
     countries: filteredCountries,
@@ -2866,24 +2932,25 @@ var PhoneInput = react.forwardRef(
     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 {
       inputProps,
       countryButtonProps,
+      countrySearchProps,
       dropdownProps,
       country,
       filteredCountries,
       isOpen,
       isValid,
-      searchQuery,
-      setSearchQuery,
       setCountry,
       selectCountry,
       clear,
       openDropdown,
       closeDropdown,
       getCountryOptionId,
+      highlightedIndex,
+      setHighlightedIndex,
+      moveHighlight,
+      countryResultsText,
       labels
     } = usePhoneInput({
       value,
@@ -2913,7 +2980,6 @@ var PhoneInput = react.forwardRef(
     }, []);
     const handleCountryClick = react.useCallback((c) => {
       selectCountry(c);
-      setHighlightedIndex(0);
       returnFocusToButton();
     }, [selectCountry, returnFocusToButton]);
     const handleCountryKeyDown = react.useCallback((e, c, index) => {
@@ -2922,7 +2988,6 @@ var PhoneInput = react.forwardRef(
         case " ":
           e.preventDefault();
           selectCountry(c);
-          setHighlightedIndex(0);
           returnFocusToButton();
           break;
         case "ArrowDown":
@@ -2959,7 +3024,7 @@ var PhoneInput = react.forwardRef(
           returnFocusToButton();
           break;
       }
-    }, [selectCountry, filteredCountries.length, closeDropdown, returnFocusToButton]);
+    }, [selectCountry, filteredCountries.length, closeDropdown, returnFocusToButton, setHighlightedIndex]);
     react.useEffect(() => {
       if (!isOpen) {
         return;
@@ -2984,16 +3049,14 @@ var PhoneInput = react.forwardRef(
       };
     }, [isOpen, closeDropdown]);
     react.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]);
     react.useImperativeHandle(ref, () => ({
       focus,
       blur,
@@ -3004,16 +3067,39 @@ var PhoneInput = react.forwardRef(
       close: closeDropdown
     }));
     const handleSearchKeyDown = react.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__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClassName, "data-valid": isValid, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
@@ -3024,7 +3110,6 @@ var PhoneInput = react.forwardRef(
           className: selectorClassName,
           disabled,
           tabIndex: disabled ? -1 : 0,
-          "aria-controls": listboxId,
           children: [
             country ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "phone-input-flag", children: country.flag }),
@@ -3053,22 +3138,26 @@ var PhoneInput = react.forwardRef(
         searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "phone-input-search", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
           "ul",
           {
             ...dropdownProps,
             className: "phone-input-country-list",
-            id: listboxId,
             children: [
               filteredCountries.map((c, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "li",
@@ -3078,12 +3167,12 @@ var PhoneInput = react.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__ */ jsxRuntime.jsx("span", { className: "phone-input-flag", children: c.flag }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "phone-input-country-name", children: getCountryDisplayName(c) }),