@xsolla/xui-input-phone 0.114.0 → 0.116.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/native/index.js +363 -354
  2. package/native/index.js.map +1 -1
  3. package/native/index.mjs +363 -354
  4. package/native/index.mjs.map +1 -1
  5. package/package.json +3 -3
  6. package/web/index.js +373 -354
  7. package/web/index.js.map +1 -1
  8. package/web/index.mjs +373 -354
  9. package/web/index.mjs.map +1 -1
package/native/index.js CHANGED
@@ -2628,377 +2628,386 @@ var InputPhone = (0, import_react3.forwardRef)(
2628
2628
  maxHeight: 240,
2629
2629
  overflowY: "auto"
2630
2630
  } : {};
2631
- return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(Box, { flexDirection: "column", gap: 8, width: "100%", testID, children: [
2632
- /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2633
- Box,
2634
- {
2635
- flexDirection: "row",
2636
- alignItems: "stretch",
2637
- height: sizeStyles.height,
2638
- position: "relative",
2639
- gap: 2,
2640
- children: [
2641
- /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2642
- Box,
2643
- {
2644
- as: "button",
2645
- type: "button",
2646
- ref: countryButtonRef,
2647
- onPress: toggleDropdown,
2648
- onKeyDown: handleCountryKeyDown,
2649
- backgroundColor: selectorBgColor,
2650
- borderColor: selectorBorderColor,
2651
- borderWidth: 1,
2652
- style: {
2653
- borderTopLeftRadius: borderRadius,
2654
- borderBottomLeftRadius: borderRadius,
2655
- borderTopRightRadius: 0,
2656
- borderBottomRightRadius: 0,
2657
- opacity: 1,
2658
- ...selectorOutlineColor ? {
2659
- outline: `${focusOutline.width}px solid ${selectorOutlineColor}`,
2660
- outlineOffset: `${focusOutline.offset}px`
2661
- } : {}
2662
- },
2663
- width: selectorWidth,
2664
- paddingHorizontal: padding.horizontal,
2665
- flexDirection: "row",
2666
- alignItems: "center",
2667
- justifyContent: "center",
2668
- gap: 4,
2669
- cursor: isDisable ? "not-allowed" : "pointer",
2670
- disabled: isDisable,
2671
- role: "combobox",
2672
- "aria-expanded": isDropdownOpen,
2673
- "aria-haspopup": "listbox",
2674
- "aria-controls": dropdownId,
2675
- "aria-label": selectedCountry ? `Selected country: ${selectedCountry.name}` : "Select country",
2676
- hoverStyle: !isDisable && !isSelectorFocus && !isError ? {
2677
- backgroundColor: inputColors.bgHover,
2678
- borderColor: inputColors.borderHover
2679
- } : void 0,
2680
- children: [
2681
- selectedCountry?.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react3.default.isValidElement(selectedCountry.flag) ? import_react3.default.cloneElement(
2682
- selectedCountry.flag,
2683
- { size: flagSize }
2684
- ) : selectedCountry.flag }) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Location, { size: flagSize, variant: "line", color: iconColor }),
2685
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Icon, { size: iconSize, color: iconColor, children: isDropdownOpen ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(ChevronDown, {}) })
2686
- ]
2687
- }
2688
- ),
2689
- /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2690
- Box,
2691
- {
2692
- flex: 1,
2693
- backgroundColor: inputBgColor,
2694
- borderColor: inputBorderColor,
2695
- borderWidth: 1,
2696
- paddingVertical: padding.vertical,
2697
- paddingHorizontal: padding.horizontal,
2698
- flexDirection: "row",
2699
- alignItems: "center",
2700
- gap: 10,
2701
- style: {
2702
- borderTopLeftRadius: 0,
2703
- borderBottomLeftRadius: 0,
2704
- borderTopRightRadius: borderRadius,
2705
- borderBottomRightRadius: borderRadius,
2706
- opacity: 1,
2707
- ...inputOutlineColor ? {
2708
- outline: `${focusOutline.width}px solid ${inputOutlineColor}`,
2709
- outlineOffset: `${focusOutline.offset}px`
2710
- } : {}
2711
- },
2712
- hoverStyle: !isDisable && !isInputFocus && !isError ? {
2713
- backgroundColor: inputColors.bgHover,
2714
- borderColor: inputColors.borderHover
2715
- } : void 0,
2716
- children: [
2717
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2718
- InputPrimitive,
2719
- {
2720
- ref: inputRef,
2721
- id: inputId,
2722
- value: passValue,
2723
- name,
2724
- placeholder,
2725
- onChange: handleChange,
2726
- onFocus: handleFocus,
2727
- onBlur: handleBlur,
2728
- onKeyDown: handleKeyDown,
2729
- disabled: isDisable,
2730
- type: "tel",
2731
- inputMode: "tel",
2732
- autoComplete: "tel",
2733
- color: textColor,
2734
- fontSize: sizeStyles.fontSize,
2735
- placeholderTextColor: placeholderColor,
2736
- "aria-invalid": isError || void 0,
2737
- "aria-describedby": errorMessage ? errorId : void 0,
2738
- "aria-label": ariaLabel || "Phone number",
2739
- "aria-disabled": isDisable || void 0,
2740
- "data-testid": "input-phone__field"
2741
- }
2742
- ) }),
2743
- extrasCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
2744
- isExtraClearIconShown && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2745
- Box,
2746
- {
2747
- as: "button",
2748
- type: "button",
2749
- alignItems: "center",
2750
- justifyContent: "center",
2751
- width: iconSize,
2752
- height: "100%",
2753
- backgroundColor: "transparent",
2754
- borderWidth: 0,
2755
- cursor: disabled ? "not-allowed" : "pointer",
2756
- onPress: !disabled ? handleClear : void 0,
2757
- disabled,
2758
- "aria-label": "Clear phone number",
2759
- "data-testid": "input-phone__clear-button",
2760
- children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Icon, { size: iconSize, color: textColor, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Remove, {}) })
2761
- }
2762
- ),
2763
- isCheckedShown && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2764
- Box,
2765
- {
2766
- alignItems: "center",
2767
- justifyContent: "center",
2768
- width: iconSize,
2769
- height: "100%",
2770
- "aria-label": "Valid phone number",
2771
- children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2772
- Icon,
2773
- {
2774
- size: iconSize,
2775
- color: theme.colors.content.success.primary,
2776
- children: checkedIcon
2777
- }
2778
- )
2779
- }
2780
- )
2781
- ] })
2782
- ]
2783
- }
2784
- ),
2785
- isDropdownOpen && countries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2786
- Box,
2787
- {
2788
- ref: dropdownRef,
2789
- position: "absolute",
2790
- top: sizeStyles.height + 4,
2791
- left: 0,
2792
- right: 0,
2793
- backgroundColor: theme.colors.layer.float,
2794
- borderColor: theme.colors.border.secondary,
2795
- borderWidth: 1,
2796
- borderRadius,
2797
- zIndex: 1e3,
2798
- role: "listbox",
2799
- id: dropdownId,
2800
- "aria-label": "Country list",
2801
- style: dropdownStyles,
2802
- children: [
2803
- (() => {
2804
- const contextMenuSize = size === "xs" ? "sm" : size;
2805
- const searchSizing = theme.sizing.contextMenu(contextMenuSize);
2806
- return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2807
- Box,
2808
- {
2809
- flexDirection: "column",
2810
- gap: searchSizing.searchGap,
2811
- paddingHorizontal: searchSizing.searchPaddingHorizontal,
2812
- paddingVertical: searchSizing.searchPaddingVertical,
2813
- children: [
2814
- /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
2815
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2816
- Search,
2817
- {
2818
- size: searchSizing.searchIconSize,
2819
- variant: "line",
2820
- color: inputColors.placeholder
2821
- }
2822
- ),
2823
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2824
- InputPrimitive,
2825
- {
2826
- ref: searchInputRef,
2827
- value: searchQuery,
2828
- onChange: (e) => {
2829
- setSearchQuery(e.target.value);
2830
- setHighlightedIndex(0);
2831
- },
2832
- placeholder: "Search",
2833
- fontSize: searchSizing.searchFontSize,
2834
- color: textColor,
2835
- placeholderTextColor: placeholderColor,
2836
- "aria-label": "Search countries",
2837
- "aria-controls": `${dropdownId}-list`,
2838
- "aria-activedescendant": highlightedIndex >= 0 && filteredCountries[highlightedIndex] ? `${dropdownId}-option-${filteredCountries[highlightedIndex].code}` : void 0,
2839
- "data-testid": "input-phone__search",
2840
- style: {
2841
- lineHeight: `${searchSizing.searchLineHeight}px`
2842
- },
2843
- onKeyDown: (e) => {
2844
- if (e.key === "Escape") {
2845
- setIsDropdownOpen(false);
2846
- setSearchQuery("");
2847
- countryButtonRef.current?.focus();
2848
- } else if (e.key === "ArrowDown") {
2849
- e.preventDefault();
2850
- setHighlightedIndex(
2851
- (prev) => prev < filteredCountries.length - 1 ? prev + 1 : prev
2852
- );
2853
- } else if (e.key === "ArrowUp") {
2854
- e.preventDefault();
2855
- setHighlightedIndex(
2856
- (prev) => prev > 0 ? prev - 1 : prev
2857
- );
2858
- } else if (e.key === "Enter" && filteredCountries.length > 0) {
2859
- e.preventDefault();
2860
- const idx = highlightedIndex >= 0 ? highlightedIndex : 0;
2861
- handleCountrySelect(filteredCountries[idx]);
2862
- }
2863
- }
2864
- }
2865
- ) })
2866
- ] }),
2867
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2868
- Box,
2869
- {
2870
- height: 1,
2871
- backgroundColor: theme.colors.border.secondary,
2872
- alignSelf: "stretch"
2873
- }
2874
- )
2875
- ]
2876
- }
2877
- );
2878
- })(),
2879
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2880
- Box,
2881
- {
2882
- ref: countryListRef,
2883
- id: `${dropdownId}-list`,
2884
- paddingVertical: 4,
2885
- style: { maxHeight: 200, overflowY: "auto" },
2886
- children: filteredCountries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2887
- Box,
2631
+ return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2632
+ Box,
2633
+ {
2634
+ flexDirection: "column",
2635
+ gap: sizeStyles.fieldGap,
2636
+ width: "100%",
2637
+ testID,
2638
+ children: [
2639
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2640
+ Box,
2641
+ {
2642
+ flexDirection: "row",
2643
+ alignItems: "stretch",
2644
+ height: sizeStyles.height,
2645
+ position: "relative",
2646
+ gap: 2,
2647
+ children: [
2648
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2649
+ Box,
2650
+ {
2651
+ as: "button",
2652
+ type: "button",
2653
+ ref: countryButtonRef,
2654
+ onPress: toggleDropdown,
2655
+ onKeyDown: handleCountryKeyDown,
2656
+ backgroundColor: selectorBgColor,
2657
+ borderColor: selectorBorderColor,
2658
+ borderWidth: 1,
2659
+ style: {
2660
+ borderTopLeftRadius: borderRadius,
2661
+ borderBottomLeftRadius: borderRadius,
2662
+ borderTopRightRadius: 0,
2663
+ borderBottomRightRadius: 0,
2664
+ opacity: 1,
2665
+ ...selectorOutlineColor ? {
2666
+ outline: `${focusOutline.width}px solid ${selectorOutlineColor}`,
2667
+ outlineOffset: `${focusOutline.offset}px`
2668
+ } : {}
2669
+ },
2670
+ width: selectorWidth,
2671
+ paddingHorizontal: padding.horizontal,
2672
+ flexDirection: "row",
2673
+ alignItems: "center",
2674
+ justifyContent: "center",
2675
+ gap: 4,
2676
+ cursor: isDisable ? "not-allowed" : "pointer",
2677
+ disabled: isDisable,
2678
+ role: "combobox",
2679
+ "aria-expanded": isDropdownOpen,
2680
+ "aria-haspopup": "listbox",
2681
+ "aria-controls": dropdownId,
2682
+ "aria-label": selectedCountry ? `Selected country: ${selectedCountry.name}` : "Select country",
2683
+ hoverStyle: !isDisable && !isSelectorFocus && !isError ? {
2684
+ backgroundColor: inputColors.bgHover,
2685
+ borderColor: inputColors.borderHover
2686
+ } : void 0,
2687
+ children: [
2688
+ selectedCountry?.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react3.default.isValidElement(selectedCountry.flag) ? import_react3.default.cloneElement(
2689
+ selectedCountry.flag,
2690
+ { size: flagSize }
2691
+ ) : selectedCountry.flag }) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Location, { size: flagSize, variant: "line", color: iconColor }),
2692
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Icon, { size: iconSize, color: iconColor, children: isDropdownOpen ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(ChevronDown, {}) })
2693
+ ]
2694
+ }
2695
+ ),
2696
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2697
+ Box,
2698
+ {
2699
+ flex: 1,
2700
+ backgroundColor: inputBgColor,
2701
+ borderColor: inputBorderColor,
2702
+ borderWidth: 1,
2703
+ paddingVertical: padding.vertical,
2704
+ paddingHorizontal: padding.horizontal,
2705
+ flexDirection: "row",
2706
+ alignItems: "center",
2707
+ gap: 10,
2708
+ style: {
2709
+ borderTopLeftRadius: 0,
2710
+ borderBottomLeftRadius: 0,
2711
+ borderTopRightRadius: borderRadius,
2712
+ borderBottomRightRadius: borderRadius,
2713
+ opacity: 1,
2714
+ ...inputOutlineColor ? {
2715
+ outline: `${focusOutline.width}px solid ${inputOutlineColor}`,
2716
+ outlineOffset: `${focusOutline.offset}px`
2717
+ } : {}
2718
+ },
2719
+ hoverStyle: !isDisable && !isInputFocus && !isError ? {
2720
+ backgroundColor: inputColors.bgHover,
2721
+ borderColor: inputColors.borderHover
2722
+ } : void 0,
2723
+ children: [
2724
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { flex: 1, height: "100%", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2725
+ InputPrimitive,
2888
2726
  {
2889
- paddingHorizontal: padding.horizontal,
2890
- paddingVertical: 12,
2891
- children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2892
- Text,
2893
- {
2894
- color: theme.colors.content.secondary,
2895
- fontSize: sizeStyles.fontSize,
2896
- textAlign: "center",
2897
- children: "No countries found"
2898
- }
2899
- )
2727
+ ref: inputRef,
2728
+ id: inputId,
2729
+ value: passValue,
2730
+ name,
2731
+ placeholder,
2732
+ onChange: handleChange,
2733
+ onFocus: handleFocus,
2734
+ onBlur: handleBlur,
2735
+ onKeyDown: handleKeyDown,
2736
+ disabled: isDisable,
2737
+ type: "tel",
2738
+ inputMode: "tel",
2739
+ autoComplete: "tel",
2740
+ color: textColor,
2741
+ fontSize: sizeStyles.fontSize,
2742
+ placeholderTextColor: placeholderColor,
2743
+ "aria-invalid": isError || void 0,
2744
+ "aria-describedby": errorMessage ? errorId : void 0,
2745
+ "aria-label": ariaLabel || "Phone number",
2746
+ "aria-disabled": isDisable || void 0,
2747
+ "data-testid": "input-phone__field"
2900
2748
  }
2901
- ) : filteredCountries.map((country, index) => {
2902
- const isSelected = selectedCountry?.code === country.code;
2903
- const brandColors = theme.colors.control.brand.primary;
2904
- const contentColors = theme.colors.content;
2905
- const getBgColor = () => {
2906
- if (isSelected) return brandColors.bg;
2907
- if (highlightedIndex === index)
2908
- return inputColors.bgHover;
2909
- return "transparent";
2910
- };
2911
- const getTextColor = () => {
2912
- if (isSelected) return contentColors.on.brand;
2913
- return theme.colors.content.primary;
2914
- };
2915
- const getSecondaryTextColor = () => {
2916
- if (isSelected) return contentColors.on.brand;
2917
- return theme.colors.content.secondary;
2918
- };
2919
- return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2749
+ ) }),
2750
+ extrasCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: [
2751
+ isExtraClearIconShown && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2920
2752
  Box,
2921
2753
  {
2922
- ref: isSelected ? selectedCountryRef : void 0,
2923
- id: `${dropdownId}-option-${country.code}`,
2924
2754
  as: "button",
2925
2755
  type: "button",
2926
- paddingHorizontal: padding.horizontal,
2927
- paddingVertical: 8,
2928
- onPress: () => handleCountrySelect(country),
2929
- flexDirection: "row",
2930
2756
  alignItems: "center",
2931
- gap: 8,
2932
- width: "100%",
2933
- backgroundColor: getBgColor(),
2757
+ justifyContent: "center",
2758
+ width: iconSize,
2759
+ height: "100%",
2760
+ backgroundColor: "transparent",
2934
2761
  borderWidth: 0,
2935
- cursor: "pointer",
2936
- role: "option",
2937
- "aria-selected": isSelected,
2938
- hoverStyle: !isSelected ? {
2939
- backgroundColor: inputColors.bgHover
2940
- } : void 0,
2762
+ cursor: disabled ? "not-allowed" : "pointer",
2763
+ onPress: !disabled ? handleClear : void 0,
2764
+ disabled,
2765
+ "aria-label": "Clear phone number",
2766
+ "data-testid": "input-phone__clear-button",
2767
+ children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Icon, { size: iconSize, color: textColor, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Remove, {}) })
2768
+ }
2769
+ ),
2770
+ isCheckedShown && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2771
+ Box,
2772
+ {
2773
+ alignItems: "center",
2774
+ justifyContent: "center",
2775
+ width: iconSize,
2776
+ height: "100%",
2777
+ "aria-label": "Valid phone number",
2778
+ children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2779
+ Icon,
2780
+ {
2781
+ size: iconSize,
2782
+ color: theme.colors.content.success.primary,
2783
+ children: checkedIcon
2784
+ }
2785
+ )
2786
+ }
2787
+ )
2788
+ ] })
2789
+ ]
2790
+ }
2791
+ ),
2792
+ isDropdownOpen && countries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2793
+ Box,
2794
+ {
2795
+ ref: dropdownRef,
2796
+ position: "absolute",
2797
+ top: sizeStyles.height + 4,
2798
+ left: 0,
2799
+ right: 0,
2800
+ backgroundColor: theme.colors.layer.float,
2801
+ borderColor: theme.colors.border.secondary,
2802
+ borderWidth: 1,
2803
+ borderRadius,
2804
+ zIndex: 1e3,
2805
+ role: "listbox",
2806
+ id: dropdownId,
2807
+ "aria-label": "Country list",
2808
+ style: dropdownStyles,
2809
+ children: [
2810
+ (() => {
2811
+ const contextMenuSize = size === "xs" ? "sm" : size;
2812
+ const searchSizing = theme.sizing.contextMenu(contextMenuSize);
2813
+ return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2814
+ Box,
2815
+ {
2816
+ flexDirection: "column",
2817
+ gap: searchSizing.searchGap,
2818
+ paddingHorizontal: searchSizing.searchPaddingHorizontal,
2819
+ paddingVertical: searchSizing.searchPaddingVertical,
2941
2820
  children: [
2942
- country.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react3.default.isValidElement(country.flag) ? import_react3.default.cloneElement(
2943
- country.flag,
2944
- { size: flagSize }
2945
- ) : country.flag }) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2946
- Box,
2947
- {
2948
- width: flagSize,
2949
- height: Math.round(flagSize * 0.75),
2950
- backgroundColor: theme.colors.background.secondary,
2951
- borderRadius: 2
2952
- }
2953
- ),
2821
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(Box, { flexDirection: "row", alignItems: "center", gap: 8, children: [
2822
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2823
+ Search,
2824
+ {
2825
+ size: searchSizing.searchIconSize,
2826
+ variant: "line",
2827
+ color: inputColors.placeholder
2828
+ }
2829
+ ),
2830
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2831
+ InputPrimitive,
2832
+ {
2833
+ ref: searchInputRef,
2834
+ value: searchQuery,
2835
+ onChange: (e) => {
2836
+ setSearchQuery(e.target.value);
2837
+ setHighlightedIndex(0);
2838
+ },
2839
+ placeholder: "Search",
2840
+ fontSize: searchSizing.searchFontSize,
2841
+ color: textColor,
2842
+ placeholderTextColor: placeholderColor,
2843
+ "aria-label": "Search countries",
2844
+ "aria-controls": `${dropdownId}-list`,
2845
+ "aria-activedescendant": highlightedIndex >= 0 && filteredCountries[highlightedIndex] ? `${dropdownId}-option-${filteredCountries[highlightedIndex].code}` : void 0,
2846
+ "data-testid": "input-phone__search",
2847
+ style: {
2848
+ lineHeight: `${searchSizing.searchLineHeight}px`
2849
+ },
2850
+ onKeyDown: (e) => {
2851
+ if (e.key === "Escape") {
2852
+ setIsDropdownOpen(false);
2853
+ setSearchQuery("");
2854
+ countryButtonRef.current?.focus();
2855
+ } else if (e.key === "ArrowDown") {
2856
+ e.preventDefault();
2857
+ setHighlightedIndex(
2858
+ (prev) => prev < filteredCountries.length - 1 ? prev + 1 : prev
2859
+ );
2860
+ } else if (e.key === "ArrowUp") {
2861
+ e.preventDefault();
2862
+ setHighlightedIndex(
2863
+ (prev) => prev > 0 ? prev - 1 : prev
2864
+ );
2865
+ } else if (e.key === "Enter" && filteredCountries.length > 0) {
2866
+ e.preventDefault();
2867
+ const idx = highlightedIndex >= 0 ? highlightedIndex : 0;
2868
+ handleCountrySelect(filteredCountries[idx]);
2869
+ }
2870
+ }
2871
+ }
2872
+ ) })
2873
+ ] }),
2954
2874
  /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2955
- Text,
2875
+ Box,
2956
2876
  {
2957
- color: getTextColor(),
2958
- fontSize: sizeStyles.fontSize,
2959
- style: {
2960
- flex: 1,
2961
- textAlign: "left",
2962
- overflow: "hidden",
2963
- textOverflow: "ellipsis",
2964
- whiteSpace: "nowrap"
2965
- },
2966
- children: country.name
2877
+ height: 1,
2878
+ backgroundColor: theme.colors.border.secondary,
2879
+ alignSelf: "stretch"
2967
2880
  }
2968
- ),
2969
- /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2881
+ )
2882
+ ]
2883
+ }
2884
+ );
2885
+ })(),
2886
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2887
+ Box,
2888
+ {
2889
+ ref: countryListRef,
2890
+ id: `${dropdownId}-list`,
2891
+ paddingVertical: 4,
2892
+ style: { maxHeight: 200, overflowY: "auto" },
2893
+ children: filteredCountries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2894
+ Box,
2895
+ {
2896
+ paddingHorizontal: padding.horizontal,
2897
+ paddingVertical: 12,
2898
+ children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2970
2899
  Text,
2971
2900
  {
2972
- color: getSecondaryTextColor(),
2901
+ color: theme.colors.content.secondary,
2973
2902
  fontSize: sizeStyles.fontSize,
2974
- style: { textAlign: "right" },
2975
- children: country.dialCode
2903
+ textAlign: "center",
2904
+ children: "No countries found"
2976
2905
  }
2977
2906
  )
2978
- ]
2979
- },
2980
- country.code
2981
- );
2982
- })
2983
- }
2984
- )
2985
- ]
2986
- }
2987
- )
2988
- ]
2989
- }
2990
- ),
2991
- errorMessage && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2992
- Text,
2993
- {
2994
- id: errorId,
2995
- role: "alert",
2996
- color: theme.colors.content.alert.primary,
2997
- fontSize: sizeStyles.fontSize - 2,
2998
- children: errorMessage
2999
- }
3000
- )
3001
- ] });
2907
+ }
2908
+ ) : filteredCountries.map((country, index) => {
2909
+ const isSelected = selectedCountry?.code === country.code;
2910
+ const brandColors = theme.colors.control.brand.primary;
2911
+ const contentColors = theme.colors.content;
2912
+ const getBgColor = () => {
2913
+ if (isSelected) return brandColors.bg;
2914
+ if (highlightedIndex === index)
2915
+ return inputColors.bgHover;
2916
+ return "transparent";
2917
+ };
2918
+ const getTextColor = () => {
2919
+ if (isSelected) return contentColors.on.brand;
2920
+ return theme.colors.content.primary;
2921
+ };
2922
+ const getSecondaryTextColor = () => {
2923
+ if (isSelected) return contentColors.on.brand;
2924
+ return theme.colors.content.secondary;
2925
+ };
2926
+ return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
2927
+ Box,
2928
+ {
2929
+ ref: isSelected ? selectedCountryRef : void 0,
2930
+ id: `${dropdownId}-option-${country.code}`,
2931
+ as: "button",
2932
+ type: "button",
2933
+ paddingHorizontal: padding.horizontal,
2934
+ paddingVertical: 8,
2935
+ onPress: () => handleCountrySelect(country),
2936
+ flexDirection: "row",
2937
+ alignItems: "center",
2938
+ gap: 8,
2939
+ width: "100%",
2940
+ backgroundColor: getBgColor(),
2941
+ borderWidth: 0,
2942
+ cursor: "pointer",
2943
+ role: "option",
2944
+ "aria-selected": isSelected,
2945
+ hoverStyle: !isSelected ? {
2946
+ backgroundColor: inputColors.bgHover
2947
+ } : void 0,
2948
+ children: [
2949
+ country.flag ? /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Box, { width: flagSize, height: flagSize, children: import_react3.default.isValidElement(country.flag) ? import_react3.default.cloneElement(
2950
+ country.flag,
2951
+ { size: flagSize }
2952
+ ) : country.flag }) : /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2953
+ Box,
2954
+ {
2955
+ width: flagSize,
2956
+ height: Math.round(flagSize * 0.75),
2957
+ backgroundColor: theme.colors.background.secondary,
2958
+ borderRadius: 2
2959
+ }
2960
+ ),
2961
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2962
+ Text,
2963
+ {
2964
+ color: getTextColor(),
2965
+ fontSize: sizeStyles.fontSize,
2966
+ style: {
2967
+ flex: 1,
2968
+ textAlign: "left",
2969
+ overflow: "hidden",
2970
+ textOverflow: "ellipsis",
2971
+ whiteSpace: "nowrap"
2972
+ },
2973
+ children: country.name
2974
+ }
2975
+ ),
2976
+ /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2977
+ Text,
2978
+ {
2979
+ color: getSecondaryTextColor(),
2980
+ fontSize: sizeStyles.fontSize,
2981
+ style: { textAlign: "right" },
2982
+ children: country.dialCode
2983
+ }
2984
+ )
2985
+ ]
2986
+ },
2987
+ country.code
2988
+ );
2989
+ })
2990
+ }
2991
+ )
2992
+ ]
2993
+ }
2994
+ )
2995
+ ]
2996
+ }
2997
+ ),
2998
+ errorMessage && /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
2999
+ Text,
3000
+ {
3001
+ id: errorId,
3002
+ role: "alert",
3003
+ color: theme.colors.content.alert.primary,
3004
+ fontSize: sizeStyles.fontSize - 2,
3005
+ children: errorMessage
3006
+ }
3007
+ )
3008
+ ]
3009
+ }
3010
+ );
3002
3011
  }
3003
3012
  );
3004
3013
  InputPhone.displayName = "InputPhone";