New `Select` component (#8323)

* radix select component on web

* native implementation (wip)

* fix sheet height/padding

* tone down web styles

* react 19 cleanup

* replace primary language select

* change style on native

* get auto placeholder working

* more style tweaks

* replace app language dropdown

* replace rnpickerselect with native select

* rm react-native-picker-select dependency

* rm placeholder, since a value is always selected

* docblock for renderItem

* add more docblocks

* add style prop to item

* pass selectedValue through renderItem

* fix context

* Style overflow buttons

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 15 insertions, 14 deletions

diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index 13d1b7ce5..298e70896 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -1,6 +1,5 @@
 import {useCallback, useState} from 'react'
-import {Keyboard, StyleProp, View, ViewStyle} from 'react-native'
-import RNPickerSelect from 'react-native-picker-select'
+import {Keyboard, type StyleProp, View, type ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -240,19 +239,21 @@ function SubtitleFileRow({
             numberOfLines={1}>
             {file.name}
           </Text>
-          <RNPickerSelect
-            placeholder={{
-              label: _(msg`Select language...`),
-              value: '',
-            }}
+          <select
             value={language}
-            onValueChange={handleValueChange}
-            items={otherLanguages.map(lang => ({
-              label: `${lang.name} (${langCode(lang)})`,
-              value: langCode(lang),
-            }))}
-            style={{viewContainer: {maxWidth: 200, flex: 1}}}
-          />
+            onChange={evt => handleValueChange(evt.target.value)}
+            style={{maxWidth: 200, flex: 1}}>
+            <option value="" disabled selected hidden>
+              {/* eslint-disable-next-line bsky-internal/avoid-unwrapped-text */}
+              <Trans>Select language...</Trans>
+            </option>
+            {otherLanguages.map(lang => (
+              <option key={langCode(lang)} value={langCode(lang)}>
+                {/* eslint-disable-next-line bsky-internal/avoid-unwrapped-text */}
+                {`${lang.name} (${langCode(lang)})`}
+              </option>
+            ))}
+          </select>
         </View>
       </View>