Merge branch 'main' into retheme-sign-in

clerk · Nov 21, 2023 · ebe2d3e · ebe2d3e
2 parents 7791e24 + e2d67fc
commit ebe2d3e
Show file tree

Hide file tree

Showing 14 changed files with 939 additions and 119 deletions.
diff --git a/.changeset/lemon-crews-do.md b/.changeset/lemon-crews-do.md
@@ -0,0 +1,5 @@
+---
+"@clerk/localizations": patch
+---
+
+Introduce ro-RO localization
diff --git a/.changeset/lovely-spies-kiss.md b/.changeset/lovely-spies-kiss.md
@@ -0,0 +1,5 @@
+---
+'@clerk/themes': patch
+---
+
+Rename `unstable_createTheme` to `experimental_createTheme`
diff --git a/.changeset/metal-baboons-vanish.md b/.changeset/metal-baboons-vanish.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
@@ -1,10 +1,11 @@
-import { forwardRef, memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
 
 import { useCoreClerk } from '../../contexts';
-import { descriptors, Flex, Input, Text } from '../../customizables';
+import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
+import { Check } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
-import { getFlagEmojiFromCountryIso, mergeRefs } from '../../utils';
+import { mergeRefs } from '../../utils';
 import type { CountryEntry, CountryIso } from './countryCodeData';
 import { IsoToCountryMap } from './countryCodeData';
 import { useFormattedPhoneNumber } from './useFormattedPhoneNumber';
@@ -66,7 +67,6 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
     <Flex
       elementDescriptor={descriptors.phoneInputBox}
       direction='row'
-      center
       hasError={rest.hasError}
       sx={theme => ({
         position: 'relative',
@@ -80,14 +80,14 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         elementId='countryCode'
         value={selectedCountryOption.value}
         options={countryOptions}
-        optionBuilder={(option, _index, isFocused) => (
+        renderOption={(option, _index, isSelected) => (
           <CountryCodeListItem
             sx={theme => ({
-              ...(isFocused && { backgroundColor: theme.colors.$blackAlpha200 }),
-              '&:hover': {
+              '&:hover, &[data-focused="true"]': {
                 backgroundColor: theme.colors.$blackAlpha200,
               },
             })}
+            isSelected={isSelected}
             country={option.country}
           />
         )}
@@ -99,63 +99,68 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         searchPlaceholder='Search country or code'
         comparator={(term, option) => option.searchTerm.toLowerCase().includes(term.toLowerCase())}
       >
-        <Flex
+        <SelectButton
           sx={{
+            border: 'none',
+            borderBottomRightRadius: '0',
+            borderTopRightRadius: '0',
             zIndex: 2,
           }}
+          isDisabled={rest.isDisabled}
         >
-          <SelectButton
-            sx={theme => ({
-              backgroundColor: theme.colors.$blackAlpha50,
-              border: 'none',
-              borderBottomRightRadius: '0',
-              borderTopRightRadius: '0',
-            })}
-            isDisabled={rest.isDisabled}
+          <Text
+            sx={{
+              textTransform: 'uppercase',
+            }}
           >
-            <Flag iso={iso} />
-            <Text
-              variant={'smallRegular'}
-              sx={{ paddingLeft: '4px' }}
-            >
-              +{selectedCountryOption.country.code}
-            </Text>
-          </SelectButton>
-        </Flex>
+            {iso}
+          </Text>
+        </SelectButton>
         <SelectOptionList
           sx={{ width: '100%', padding: '0 0' }}
           containerSx={{ gap: 0 }}
         />
       </Select>
-      <Input
-        value={formattedNumber}
-        onPaste={handlePaste}
-        onChange={handlePhoneNumberChange}
-        maxLength={25}
-        type='tel'
-        sx={[
-          {
-            borderColor: 'transparent',
-            height: '100%',
-            borderTopLeftRadius: '0',
-            borderBottomLeftRadius: '0',
-          },
-          sx,
-        ]}
-        //use our internal ref while forwarding
-        //@ts-expect-error
-        ref={mergeRefs(phoneInputRef, ref)}
-        {...rest}
-      />
+
+      <Flex sx={{ position: 'relative', width: '100%', marginLeft: 1 }}>
+        <Text
+          variant='smallRegular'
+          sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)' }}
+        >
+          +{selectedCountryOption.country.code}
+        </Text>
+        <Input
+          value={formattedNumber}
+          onPaste={handlePaste}
+          onChange={handlePhoneNumberChange}
+          maxLength={25}
+          type='tel'
+          sx={[
+            {
+              border: 'none',
+              height: '100%',
+              borderTopLeftRadius: '0',
+              borderBottomLeftRadius: '0',
+              paddingLeft: `${`+${selectedCountryOption.country.code}`.length + 1.5}ch`,
+            },
+            sx,
+          ]}
+          //use our internal ref while forwarding
+          //@ts-expect-error
+          ref={mergeRefs(phoneInputRef, ref)}
+          {...rest}
+        />
+      </Flex>
     </Flex>
   );
 });
 
 type CountryCodeListItemProps = PropsOfComponent<typeof Flex> & {
+  isSelected?: boolean;
   country: CountryEntry;
 };
 const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
-  const { country, sx, ...rest } = props;
+  const { country, isSelected, sx, ...rest } = props;
   return (
     <Flex
       center
@@ -169,10 +174,14 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
       ]}
       {...rest}
     >
-      <Flag iso={country.iso} />
+      <Icon
+        icon={Check}
+        size='sm'
+        sx={{ visibility: isSelected ? 'visible' : 'hidden' }}
+      />
       <Text
         as='div'
-        variant='smallRegular'
+        variant='regularRegular'
         sx={{ width: '100%' }}
       >
         {country.name}
@@ -187,24 +196,6 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
   );
 });
 
-const Flag = (props: { iso: CountryIso }) => {
-  const [supportsCountryEmoji, setSupportsCountryEmoji] = useState(false);
-
-  useLayoutEffect(() => {
-    setSupportsCountryEmoji(!window.navigator.userAgent.includes('Windows'));
-  }, []);
-
-  return (
-    <>
-      {supportsCountryEmoji ? (
-        <Flex sx={theme => ({ fontSize: theme.fontSizes.$md })}>{getFlagEmojiFromCountryIso(props.iso)}</Flex>
-      ) : (
-        <Text variant='smallBold'>{props.iso.toUpperCase()}</Text>
-      )}
-    </>
-  );
-};
-
 export const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref) => {
   // @ts-expect-error
   const { __internal_country } = useCoreClerk();