diff --git a/development/package.json b/development/package.json index e44a538..c1d9a42 100644 --- a/development/package.json +++ b/development/package.json @@ -13,7 +13,7 @@ "antd": "^5.8.3", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-phone-hooks": "0.1.0-beta.1", + "react-phone-hooks": "^0.1.12", "react-scripts": "^5.0.1", "typescript": "^4.9.5" }, diff --git a/development/src/ant-phone/index.tsx b/development/src/ant-phone/index.tsx index adcf6f2..5952a3e 100644 --- a/development/src/ant-phone/index.tsx +++ b/development/src/ant-phone/index.tsx @@ -39,6 +39,7 @@ import {PhoneInputProps, PhoneNumber} from "./types"; const PhoneInput = forwardRef(({ value: initialValue = "", country = getDefaultISO2Code(), + distinct = false, disabled = false, enableArrow = false, enableSearch = false, @@ -86,6 +87,7 @@ const PhoneInput = forwardRef(({ } = usePhone({ query, country, + distinct, countryCode, initialValue, onlyCountries, diff --git a/development/src/ant-phone/types.ts b/development/src/ant-phone/types.ts index 21db93b..f9ec26a 100644 --- a/development/src/ant-phone/types.ts +++ b/development/src/ant-phone/types.ts @@ -11,6 +11,8 @@ export interface PhoneInputProps extends Omit country?: string; + distinct?: boolean; + enableArrow?: boolean; enableSearch?: boolean; diff --git a/development/src/mui-phone/index.tsx b/development/src/mui-phone/index.tsx index 437e17c..ca7862a 100644 --- a/development/src/mui-phone/index.tsx +++ b/development/src/mui-phone/index.tsx @@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({ variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), + distinct = false, disabled = false, enableArrow = false, enableSearch = false, @@ -69,6 +70,7 @@ const PhoneInput = forwardRef(({ query, locale, country, + distinct, countryCode, initialValue, onlyCountries, diff --git a/development/src/mui-phone/joy/index.tsx b/development/src/mui-phone/joy/index.tsx index f42d5e1..dc221e6 100644 --- a/development/src/mui-phone/joy/index.tsx +++ b/development/src/mui-phone/joy/index.tsx @@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({ variant = undefined, searchVariant = undefined, country = getDefaultISO2Code(), + distinct = false, disabled = false, enableArrow = false, enableSearch = false, @@ -69,6 +70,7 @@ const PhoneInput = forwardRef(({ query, locale, country, + distinct, countryCode, initialValue, onlyCountries, diff --git a/development/src/mui-phone/joy/types.ts b/development/src/mui-phone/joy/types.ts index 5326e7e..e6e3fb5 100644 --- a/development/src/mui-phone/joy/types.ts +++ b/development/src/mui-phone/joy/types.ts @@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit country?: string; + distinct?: boolean; + enableArrow?: boolean; enableSearch?: boolean; diff --git a/development/src/mui-phone/types.ts b/development/src/mui-phone/types.ts index c48c3a4..4df78db 100644 --- a/development/src/mui-phone/types.ts +++ b/development/src/mui-phone/types.ts @@ -13,6 +13,8 @@ export interface PhoneInputProps extends Omit { country?: string; + distinct?: boolean; + enableArrow?: boolean; enableSearch?: boolean; diff --git a/development/src/phone-hooks/index.ts b/development/src/phone-hooks/index.ts index 3c442f4..1751612 100644 --- a/development/src/phone-hooks/index.ts +++ b/development/src/phone-hooks/index.ts @@ -116,6 +116,7 @@ export const usePhone = ({ query = "", locale = "", country = "", + distinct = false, countryCode = "", initialValue = "", onlyCountries = [], @@ -143,11 +144,13 @@ export const usePhone = ({ const localized = countries && (countries[name] || "").toLowerCase(); return [localized, name.toLowerCase(), dial, mask].some(component => component.includes(q)); }); - return [ + const seen = new Set(); + const whitelistCountries = [ ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)), ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)), ]; - }, [countriesOnly, preferredCountries, locale, query]) + return whitelistCountries.filter(([iso]) => !seen.has(iso) && seen.add(iso)); + }, [countriesOnly, preferredCountries, distinct, locale, query]) const metadata = useMemo(() => { const calculatedMetadata = getMetadata(getRawValue(value), countriesList, countryCode); diff --git a/development/src/phone-hooks/types.ts b/development/src/phone-hooks/types.ts index ab3d0b1..32261a7 100644 --- a/development/src/phone-hooks/types.ts +++ b/development/src/phone-hooks/types.ts @@ -13,6 +13,7 @@ export interface usePhoneOptions { query?: string; locale?: string; country?: string; + distinct?: boolean; countryCode?: string; onlyCountries?: string[]; excludeCountries?: string[]; diff --git a/package.json b/package.json index 8073ef5..d80e013 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.12", + "version": "0.1.13", "name": "react-phone-hooks", "description": "React hooks and utility functions for parsing and validating phone numbers.", "keywords": [ diff --git a/src/index.ts b/src/index.ts index 3c442f4..1751612 100644 --- a/src/index.ts +++ b/src/index.ts @@ -116,6 +116,7 @@ export const usePhone = ({ query = "", locale = "", country = "", + distinct = false, countryCode = "", initialValue = "", onlyCountries = [], @@ -143,11 +144,13 @@ export const usePhone = ({ const localized = countries && (countries[name] || "").toLowerCase(); return [localized, name.toLowerCase(), dial, mask].some(component => component.includes(q)); }); - return [ + const seen = new Set(); + const whitelistCountries = [ ...filteredCountries.filter(([iso]) => preferredCountries.includes(iso)), ...filteredCountries.filter(([iso]) => !preferredCountries.includes(iso)), ]; - }, [countriesOnly, preferredCountries, locale, query]) + return whitelistCountries.filter(([iso]) => !seen.has(iso) && seen.add(iso)); + }, [countriesOnly, preferredCountries, distinct, locale, query]) const metadata = useMemo(() => { const calculatedMetadata = getMetadata(getRawValue(value), countriesList, countryCode); diff --git a/src/types.ts b/src/types.ts index ab3d0b1..32261a7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -13,6 +13,7 @@ export interface usePhoneOptions { query?: string; locale?: string; country?: string; + distinct?: boolean; countryCode?: string; onlyCountries?: string[]; excludeCountries?: string[];