Telephone country code select (#9473)

* add telephone code select * add flags * run svgo on flags * get it somewhat working on web * get web closed state working * verify country code we get from geo * trim down names to shorter common versions * add labels to other selects * make international tel codes a static object * add component to storybook * Update src/lib/international-telephone-codes.ts Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * update to new geo hook * use Intl.DisplayNames, add polyfill * use in rather than keys().includes() --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
2025-12-10 22:12:30 +02:00
parent 07e1b3a0b6
commit 6ccda945e5
280 changed files with 1995 additions and 112 deletions
@@ -7,7 +7,7 @@ import {
  useState,
 } from 'react'
 import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

 import {useTheme} from '#/alf'
@@ -15,9 +15,9 @@ import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
 import {ChevronTopBottom_Stroke2_Corner0_Rounded as ChevronUpDownIcon} from '#/components/icons/Chevron'
 import {Text} from '#/components/Typography'
+import {BaseRadio} from '../forms/Toggle'
 import {
  type ContentProps,
  type IconProps,
@@ -122,10 +122,12 @@ export function ValueText({
  const t = useTheme()

  let text = value && children(value)
-  if (typeof text !== 'string') text = placeholder
+  if (!text) text = placeholder

  return (
-    <ButtonText style={[t.atoms.text, a.font_normal, style]}>{text}</ButtonText>
+    <ButtonText style={[t.atoms.text, a.font_normal, style]} emoji>
+      {text}
+    </ButtonText>
  )
 }

@@ -162,15 +164,14 @@ export function Content<T>({
 }

 function ContentInner<T>({
+  label,
  items,
  renderItem,
  valueExtractor,
  ...context
 }: ContentProps<T> & ContextType) {
-  const control = Dialog.useDialogContext()
-
  const {_} = useLingui()
-  const [headerHeight, setHeaderHeight] = useState(50)
+  const [headerHeight, setHeaderHeight] = useState(61)

  const render = useCallback(
    ({item, index}: {item: T; index: number}) => {
@@ -179,33 +180,26 @@ function ContentInner<T>({
    [renderItem, context.value],
  )

-  const doneButton = useCallback(
-    () => (
-      <Button
-        label={_(msg`Done`)}
-        onPress={() => control.close()}
-        size="small"
-        color="primary"
-        variant="ghost"
-        style={[a.rounded_full]}>
-        <ButtonText style={[a.text_md]}>
-          <Trans>Done</Trans>
-        </ButtonText>
-      </Button>
-    ),
-    [control, _],
-  )
-
  return (
    <Context.Provider value={context}>
      <Dialog.Header
-        renderRight={doneButton}
        onLayout={evt => setHeaderHeight(evt.nativeEvent.layout.height)}
-        style={[a.absolute, a.top_0, a.left_0, a.right_0, a.z_10]}>
-        <Dialog.HeaderText>
-          <Trans>Select an option</Trans>
+        style={[
+          a.absolute,
+          a.top_0,
+          a.left_0,
+          a.right_0,
+          a.z_10,
+          a.pt_3xl,
+          a.pb_sm,
+          a.border_b_0,
+        ]}>
+        <Dialog.HeaderText
+          style={[a.flex_1, a.px_xl, a.text_left, a.font_bold, a.text_2xl]}>
+          {label ?? _(msg`Select an option`)}
        </Dialog.HeaderText>
      </Dialog.Header>
+      <Dialog.Handle />
      <Dialog.InnerFlatList
        headerOffset={headerHeight}
        data={items}
@@ -258,11 +252,12 @@ export function Item({children, value, label, style}: ItemProps) {
          <View
            style={[
              a.flex_1,
-              a.pl_md,
+              a.px_xl,
              (focused || pressed) && t.atoms.bg_contrast_25,
              a.flex_row,
              a.align_center,
              a.gap_sm,
+              a.py_md,
              style,
            ]}>
            {children}
@@ -273,20 +268,48 @@ export function Item({children, value, label, style}: ItemProps) {
  )
 }

-export function ItemText({children}: ItemTextProps) {
+export function ItemText({children, style, emoji}: ItemTextProps) {
  const {selected} = useItemContext()
-  const t = useTheme()

-  // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
  return (
-    <View style={[a.flex_1, a.py_md, a.border_b, t.atoms.border_contrast_low]}>
-      <Text style={[a.text_md, selected && a.font_semi_bold]}>{children}</Text>
-    </View>
+    <Text
+      style={[a.text_md, selected && a.font_semi_bold, style]}
+      emoji={emoji}>
+      {children}
+    </Text>
  )
 }

-export function ItemIndicator({icon: Icon = CheckIcon}: ItemIndicatorProps) {
-  const {selected} = useItemContext()
+export function ItemIndicator({icon: Icon}: ItemIndicatorProps) {
+  const {selected, focused, hovered} = useItemContext()

-  return <View style={{width: 24}}>{selected && <Icon size="md" />}</View>
+  if (Icon) {
+    return <View style={{width: 24}}>{selected && <Icon size="md" />}</View>
+  }
+
+  return (
+    <BaseRadio
+      selected={selected}
+      focused={focused}
+      hovered={hovered}
+      isInvalid={false}
+      disabled={false}
+    />
+  )
+}
+
+export function Separator() {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.flex_1,
+        a.border_b,
+        t.atoms.border_contrast_low,
+        a.mx_xl,
+        a.my_xs,
+      ]}
+    />
+  )
 }
@@ -2,7 +2,8 @@ import {createContext, forwardRef, Fragment, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 import {Select as RadixSelect} from 'radix-ui'

-import {flatten, useTheme} from '#/alf'
+import {useA11y} from '#/state/a11y'
+import {flatten, useTheme, web} from '#/alf'
 import {atoms as a} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
@@ -16,6 +17,7 @@ import {
  type IconProps,
  type ItemIndicatorProps,
  type ItemProps,
+  type ItemTextProps,
  type RadixPassThroughTriggerProps,
  type RootProps,
  type TriggerProps,
@@ -97,7 +99,6 @@ export function Trigger({children, label}: TriggerProps) {
          a.flex,
          a.relative,
          t.atoms.bg_contrast_50,
-          a.w_full,
          a.align_center,
          a.gap_sm,
          a.justify_between,
@@ -121,10 +122,21 @@ export function Trigger({children, label}: TriggerProps) {
  }
 }

-export function ValueText({children: _, style, ...props}: ValueProps) {
+export function ValueText({
+  children,
+  webOverrideValue,
+  style,
+  ...props
+}: ValueProps) {
+  let content
+
+  if (webOverrideValue && children) {
+    content = children(webOverrideValue)
+  }
+
  return (
    <Text style={style}>
-      <RadixSelect.Value {...props} />
+      <RadixSelect.Value {...props}>{content}</RadixSelect.Value>
    </Text>
  )
 }
@@ -145,6 +157,7 @@ export function Content<T>({
 }: ContentProps<T>) {
  const t = useTheme()
  const selectedValue = useContext(SelectedValueContext)
+  const {reduceMotionEnabled} = useA11y()

  const scrollBtnStyles: React.CSSProperties[] = [
    a.absolute,
@@ -186,8 +199,11 @@ export function Content<T>({
      <RadixSelect.Content
        style={flatten([t.atoms.bg, a.rounded_sm, a.overflow_hidden])}
        position="popper"
+        align="center"
        sideOffset={5}
-        className="radix-select-content">
+        className="radix-select-content"
+        // prevent the keyboard shortcut for opening the composer
+        onKeyDown={evt => evt.stopPropagation()}>
        <View
          style={[
            a.flex_1,
@@ -195,6 +211,7 @@ export function Content<T>({
            t.atoms.border_contrast_low,
            a.rounded_sm,
            a.overflow_hidden,
+            !reduceMotionEnabled && a.zoom_fade_in,
          ]}>
          <RadixSelect.ScrollUpButton style={flatten(up)}>
            <ChevronUpIcon style={[t.atoms.text]} size="xs" />
@@ -261,7 +278,7 @@ export function Item({ref, value, style, children}: ItemProps) {
        t.atoms.text,
        a.relative,
        a.flex,
-        {minHeight: 25, paddingLeft: 30, paddingRight: 35},
+        {minHeight: 25, paddingLeft: 30, paddingRight: 8},
        a.user_select_none,
        a.align_center,
        a.rounded_xs,
@@ -278,7 +295,15 @@ export function Item({ref, value, style, children}: ItemProps) {
  )
 }

-export const ItemText = RadixSelect.ItemText
+export const ItemText = function ItemText({children, style}: ItemTextProps) {
+  return (
+    <RadixSelect.ItemText asChild>
+      <Text style={flatten([style, web({pointerEvents: 'inherit'})])}>
+        {children}
+      </Text>
+    </RadixSelect.ItemText>
+  )
+}

 export function ItemIndicator({icon: Icon = CheckIcon}: ItemIndicatorProps) {
  return (
@@ -294,3 +319,20 @@ export function ItemIndicator({icon: Icon = CheckIcon}: ItemIndicatorProps) {
    </RadixSelect.ItemIndicator>
  )
 }
+
+export function Separator() {
+  const t = useTheme()
+
+  return (
+    <RadixSelect.Separator
+      style={flatten([
+        {
+          height: 1,
+          backgroundColor: t.atoms.border_contrast_low.borderColor,
+        },
+        a.my_xs,
+        a.w_full,
+      ])}
+    />
+  )
+}
@@ -123,9 +123,16 @@ export type ValueProps = {
  /**
   * Only needed for native. Extracts the label from an item. Defaults to `item => item.label`
   */
-  children?: (value: any) => string
+  children?: (value: any) => React.ReactNode
  placeholder?: string
  style?: StyleProp<TextStyle>
+  /**
+   * By default, web just extracts the component from inside the dropdown and portals it in here.
+   * If you want to override this, pass a value that will then be rendered via `children(value)`
+   *
+   * @platform web
+   */
+  webOverrideValue?: any
 }

 /*
@@ -137,6 +144,12 @@ export type ValueProps = {
 export type IconProps = TextStyleProp

 export type ContentProps<T> = {
+  /**
+   * Label at the top of the sheet on native.
+   *
+   * @default "Select an option"
+   */
+  label?: string
  /**
   * Items to render. Recommended to be in the form {value: string, label: string} - if not,
   * you need to provide a `valueExtractor` function to extract the value from an item and
@@ -180,6 +193,8 @@ export type ItemProps = {

 export type ItemTextProps = {
  children: React.ReactNode
+  style?: StyleProp<TextStyle>
+  emoji?: boolean
 }

 export type ItemIndicatorProps = {