fix(clerk-js,types): Add type for __internal_country (#4215)

Author: dstaley

.changeset/lazy-rabbits-fry.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/types": patch
+---
+
+Add type for \_\_internal_country

packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx

@@ -246,7 +246,6 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
 
 export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps & { feedbackType?: FeedbackType }>(
   (props, ref) => {
-    // @ts-expect-error
     const { __internal_country } = useClerk();
 
     return (

packages/types/src/clerk.ts

@@ -137,6 +137,8 @@ export interface Clerk {
 
   telemetry: TelemetryCollector | undefined;
 
+  __internal_country?: string | null;
+
   /**
    * Signs out the current user on single-session instances, or all users on multi-session instances
    * @param signOutCallback - Optional A callback that runs after sign out completes.

packages/ui/src/common/phone-number-field.tsx

@@ -17,7 +17,7 @@ import { extractDigits, formatPhoneNumber, parsePhoneString } from '~/utils/phon
 
 type UseFormattedPhoneNumberProps = {
   initPhoneWithCode: string;
-  locationBasedCountryIso?: CountryIso;
+  locationBasedCountryIso?: CountryIso | null;
 };
 
 const format = (str: string, iso: CountryIso) => {
@@ -93,8 +93,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
 ) {
   const clerk = useClerk();
-  // TODO to fix IsomorphicClerk
-  const locationBasedCountryIso = (clerk as any)?.clerkjs.__internal_country;
+  const locationBasedCountryIso = clerk.__internal_country as UseFormattedPhoneNumberProps['locationBasedCountryIso'];
   const { t, translateError } = useLocalizations();
   const [isOpen, setOpen] = React.useState(false);
   const [selectedCountry, setSelectedCountry] = React.useState(countryOptions[0]);