feat(props): country is now optional

src/CountriesMenu.tsx

@@ -35,7 +35,7 @@ const menuData = getCountries()
 
 export interface CountriesMenuProps {
 	/** The selected country. */
-	selectedCountry: CountryCode,
+	selectedCountry?: CountryCode,
 	/** A map of names to be displayed in the menu for each country code. */
 	countryDisplayNames?: Record<CountryCode, string>,
 	/** Callback fired when an item from the menu is clicked. */

src/Flag.tsx

@@ -4,15 +4,15 @@ import "./sprite.css";
 
 interface FlagProps extends React.HTMLAttributes<HTMLDivElement> {
 	/** The country corresponding to the displayed flag. */
-	countryCode: CountryCode
+	countryCode?: CountryCode
 }
 
 export default function Flag({ className, countryCode, ...props }: FlagProps) {
 	return <div
 		{...props}
 		className={[
 			"flag",
-			`flag-${countryCode}`,
+			countryCode && `flag-${countryCode}`,
 			className,
 		].filter(Boolean).join(" ")} />;
 }

src/index.tsx

@@ -34,7 +34,7 @@ export type PhoneTextFieldProps = Omit<TextFieldProps, "onChange"> & {
 	/** A map of names to be displayed in the menu for each country code. */
 	countryDisplayNames?: CountriesMenuProps["countryDisplayNames"],
 	/** The currently selected country. */
-	country: CountryCode,
+	country?: CountryCode,
 	/** Callback fired when a country is selected from the menu. */
 	onCountrySelect?: (data: OnCountrySelectData) => void,
 	/** Callback fired when the input value changes. */
@@ -53,7 +53,7 @@ class PhoneTextField extends Component<PhoneTextFieldProps> {
 	// its corresponding propType should be specified.
 	static propTypes = {
 		countryDisplayNames: PropTypes.shape(countryDisplayNamesShape),
-		country: PropTypes.oneOf(countryCodes).isRequired,
+		country: PropTypes.oneOf(countryCodes),
 		onCountrySelect: PropTypes.func,
 		onChange: PropTypes.func,
 		InputProps: PropTypes.object,