Improved search language select (#7591)

* replace with Menu

* new icon for native

* hackfix radix dropdown height

* fix jsx

* reduce language names with lots of variants to what firefox returns from Intl.DisplayNames

* more language label simplifications

* add collision padding

* adjust spacing around and left align title

src/alf/atoms.ts

@@ -50,6 +50,12 @@ export const atoms = {
   overflow_hidden: {
     overflow: 'hidden',
   },
+  /**
+   * @platform web
+   */
+  overflow_auto: web({
+    overflow: 'auto',
+  }),
 
   /*
    * Width

src/components/Menu/index.web.tsx

@@ -184,6 +184,7 @@ export function Outer({
     <DropdownMenu.Portal>
       <DropdownMenu.Content
         sideOffset={5}
+        collisionPadding={{left: 5, right: 5, bottom: 5}}
         loop
         aria-label="Test"
         className="dropdown-menu-transform-origin">
@@ -195,6 +196,7 @@ export function Outer({
             t.name === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25,
             t.atoms.shadow_md,
             t.atoms.border_contrast_low,
+            a.overflow_auto,
             !reduceMotionEnabled && a.zoom_fade_in,
             style,
           ]}>
@@ -380,9 +382,8 @@ export function Divider() {
       style={flatten([
         a.my_xs,
         t.atoms.bg_contrast_100,
-        {
-          height: 1,
-        },
+        a.flex_shrink_0,
+        {height: 1},
       ])}
     />
   )

src/components/icons/Chevron.tsx

@@ -15,3 +15,7 @@ export const ChevronTop_Stroke2_Corner0_Rounded = createSinglePathSVG({
 export const ChevronBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z',
 })
+
+export const ChevronTopBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z',
+})

src/locale/languages.ts

@@ -179,11 +179,7 @@ export const LANGUAGES: Language[] = [
   {code3: 'cho', code2: '', name: 'Choctaw'},
   {code3: 'chp', code2: '', name: 'Chipewyan; Dene Suline'},
   {code3: 'chr', code2: '', name: 'Cherokee'},
-  {
-    code3: 'chu',
-    code2: 'cu',
-    name: 'Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic',
-  },
+  {code3: 'chu', code2: 'cu', name: 'Church Slavic'},
   {code3: 'chv', code2: 'cv', name: 'Chuvash'},
   {code3: 'chy', code2: '', name: 'Cheyenne'},
   {code3: 'cmc', code2: '', name: 'Chamic languages'},
@@ -301,13 +297,9 @@ export const LANGUAGES: Language[] = [
   {code3: 'iii', code2: 'ii', name: 'Sichuan Yi; Nuosu'},
   {code3: 'ijo', code2: '', name: 'Ijo languages'},
   {code3: 'iku', code2: 'iu', name: 'Inuktitut'},
-  {code3: 'ile', code2: 'ie', name: 'Interlingue; Occidental'},
+  {code3: 'ile', code2: 'ie', name: 'Interlingue'},
   {code3: 'ilo', code2: '', name: 'Iloko'},
-  {
-    code3: 'ina',
-    code2: 'ia',
-    name: 'Interlingua (International Auxiliary Language Association)',
-  },
+  {code3: 'ina', code2: 'ia', name: 'Interlingua'},
   {code3: 'inc', code2: '', name: 'Indic languages'},
   {code3: 'ind', code2: 'id', name: 'Indonesian'},
   {code3: 'ine', code2: '', name: 'Indo-European languages'},
@@ -325,7 +317,7 @@ export const LANGUAGES: Language[] = [
   {code3: 'kaa', code2: '', name: 'Kara-Kalpak'},
   {code3: 'kab', code2: '', name: 'Kabyle'},
   {code3: 'kac', code2: '', name: 'Kachin; Jingpho'},
-  {code3: 'kal', code2: 'kl', name: 'Kalaallisut; Greenlandic'},
+  {code3: 'kal', code2: 'kl', name: 'Kalaallisut'},
   {code3: 'kam', code2: '', name: 'Kamba'},
   {code3: 'kan', code2: 'kn', name: 'Kannada'},
   {code3: 'kar', code2: '', name: 'Karen languages'},
@@ -364,7 +356,7 @@ export const LANGUAGES: Language[] = [
   {code3: 'lat', code2: 'la', name: 'Latin'},
   {code3: 'lav', code2: 'lv', name: 'Latvian'},
   {code3: 'lez', code2: '', name: 'Lezghian'},
-  {code3: 'lim', code2: 'li', name: 'Limburgan; Limburger; Limburgish'},
+  {code3: 'lim', code2: 'li', name: 'Limburgish'},
   {code3: 'lin', code2: 'ln', name: 'Lingala'},
   {code3: 'lit', code2: 'lt', name: 'Lithuanian'},
   {code3: 'lol', code2: '', name: 'Mongo'},
@@ -425,9 +417,9 @@ export const LANGUAGES: Language[] = [
   {code3: 'nai', code2: '', name: 'North American Indian languages'},
   {code3: 'nap', code2: '', name: 'Neapolitan'},
   {code3: 'nau', code2: 'na', name: 'Nauru'},
-  {code3: 'nav', code2: 'nv', name: 'Navajo; Navaho'},
-  {code3: 'nbl', code2: 'nr', name: 'Ndebele, South; South Ndebele'},
-  {code3: 'nde', code2: 'nd', name: 'Ndebele, North; North Ndebele'},
+  {code3: 'nav', code2: 'nv', name: 'Navajo'},
+  {code3: 'nbl', code2: 'nr', name: 'South Ndebele'},
+  {code3: 'nde', code2: 'nd', name: 'North Ndebele'},
   {code3: 'ndo', code2: 'ng', name: 'Ndonga'},
   {
     code3: 'nds',
@@ -440,8 +432,8 @@ export const LANGUAGES: Language[] = [
   {code3: 'nic', code2: '', name: 'Niger-Kordofanian languages'},
   {code3: 'niu', code2: '', name: 'Niuean'},
   {code3: 'nld', code2: 'nl', name: 'Dutch; Flemish'},
-  {code3: 'nno', code2: 'nn', name: 'Norwegian Nynorsk; Nynorsk, Norwegian'},
-  {code3: 'nob', code2: 'nb', name: 'Bokmål, Norwegian; Norwegian Bokmål'},
+  {code3: 'nno', code2: 'nn', name: 'Norwegian Nynorsk'},
+  {code3: 'nob', code2: 'nb', name: 'Norwegian Bokmål'},
   {code3: 'nog', code2: '', name: 'Nogai'},
   {code3: 'non', code2: '', name: 'Norse, Old'},
   {code3: 'nor', code2: 'no', name: 'Norwegian'},
@@ -463,7 +455,7 @@ export const LANGUAGES: Language[] = [
   {code3: 'ori', code2: 'or', name: 'Oriya'},
   {code3: 'orm', code2: 'om', name: 'Oromo'},
   {code3: 'osa', code2: '', name: 'Osage'},
-  {code3: 'oss', code2: 'os', name: 'Ossetian; Ossetic'},
+  {code3: 'oss', code2: 'os', name: 'Ossetic'},
   {code3: 'ota', code2: '', name: 'Turkish, Ottoman (1500-1928)'},
   {code3: 'oto', code2: '', name: 'Otomian languages'},
   {code3: 'paa', code2: '', name: 'Papuan languages'},