Moves calling device settings to use Select component

stylesheets/_modules.scss

@@ -6959,8 +6959,10 @@ button.module-image__border-overlay:focus {
   z-index: $z-index-above-base;
 
   @include keyboard-mode {
-    &:focus {
+    &:focus,
-      outline: 2px solid $color-ultramarine;
+    &:active,
+    &:hover {
+      background-color: $color-ultramarine;
     }
   }
 }
@@ -6980,41 +6982,6 @@ button.module-image__border-overlay:focus {
 .module-calling-device-selection__select {
   margin-bottom: 20px;
   position: relative;
-
-  select {
-    @include font-body-1;
-    background: $color-gray-75;
-    color: $color-gray-02;
-    -webkit-appearance: none;
-    border-radius: 4px;
-    border: 1px solid $color-gray-45;
-    cursor: pointer;
-    height: 40px;
-    outline: 0;
-    padding: 10px;
-    padding-inline-end: 32px;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-
-  &::after {
-    border: 2px solid $color-gray-75;
-
-    border-radius: 2px;
-    border-inline-end: 0;
-    border-top: 0;
-    content: ' ';
-    display: block;
-    height: 10px;
-    pointer-events: none;
-    position: absolute;
-    inset-inline-end: 15px;
-    top: 16px;
-    transform-origin: center;
-    transform: rotate(-45deg);
-    width: 10px;
-    z-index: $z-index-above-base;
-  }
 }
 
 // Module: GroupV1 Disabled Actions

ts/components/CallingDeviceSelection.tsx

@@ -4,7 +4,9 @@
 import * as React from 'react';
 import type { AudioDevice } from '@signalapp/ringrtc';
 
+import type { Option } from './Select';
 import { Modal } from './Modal';
+import { Select } from './Select';
 import type { LocalizerType } from '../types/Util';
 import type {
   ChangeIODevicePayloadType,
@@ -30,66 +32,44 @@ function localizeDefault(i18n: LocalizerType, deviceLabel: string): string {
 
 function renderAudioOptions(
   devices: Array<AudioDevice>,
-  i18n: LocalizerType,
+  i18n: LocalizerType
-  selectedDevice: AudioDevice | undefined
+): Array<Option> {
-): JSX.Element {
   if (!devices.length) {
-    return (
+    return [
-      <option aria-selected>
+      {
-        {i18n('icu:callingDeviceSelection__select--no-device')}
+        text: i18n('icu:callingDeviceSelection__select--no-device'),
-      </option>
+        value: '',
-    );
+      },
+    ];
   }
 
-  return (
+  return devices.map(device => {
-    <>
+    return {
-      {devices.map((device: AudioDevice) => {
+      text: localizeDefault(i18n, device.name),
-        const isSelected =
+      value: device.index,
-          selectedDevice && selectedDevice.index === device.index;
+    };
-        return (
+  });
-          <option
-            aria-selected={isSelected}
-            key={device.index}
-            value={device.index}
-          >
-            {localizeDefault(i18n, device.name)}
-          </option>
-        );
-      })}
-    </>
-  );
 }
 
 function renderVideoOptions(
   devices: Array<MediaDeviceInfo>,
-  i18n: LocalizerType,
+  i18n: LocalizerType
-  selectedCamera: string | undefined
+): Array<Option> {
-): JSX.Element {
   if (!devices.length) {
-    return (
+    return [
-      <option aria-selected>
+      {
-        {i18n('icu:callingDeviceSelection__select--no-device')}
+        text: i18n('icu:callingDeviceSelection__select--no-device'),
-      </option>
+        value: '',
-    );
+      },
+    ];
   }
 
-  return (
+  return devices.map((device: MediaDeviceInfo) => {
-    <>
+    return {
-      {devices.map((device: MediaDeviceInfo) => {
+      text: localizeDefault(i18n, device.label),
-        const isSelected = selectedCamera === device.deviceId;
+      value: device.deviceId,
-
+    };
-        return (
+  });
-          <option
-            aria-selected={isSelected}
-            key={device.deviceId}
-            value={device.deviceId}
-          >
-            {localizeDefault(i18n, device.label)}
-          </option>
-        );
-      })}
-    </>
-  );
 }
 
 function createAudioChangeHandler(
@@ -97,10 +77,10 @@ function createAudioChangeHandler(
   changeIODevice: (payload: ChangeIODevicePayloadType) => void,
   type: CallingDeviceType.SPEAKER | CallingDeviceType.MICROPHONE
 ) {
-  return (ev: React.FormEvent<HTMLSelectElement>): void => {
+  return (value: string): void => {
     changeIODevice({
       type,
-      selectedDevice: devices[Number(ev.currentTarget.value)],
+      selectedDevice: devices[Number(value)],
     });
   };
 }
@@ -108,10 +88,10 @@ function createAudioChangeHandler(
 function createCameraChangeHandler(
   changeIODevice: (payload: ChangeIODevicePayloadType) => void
 ) {
-  return (ev: React.FormEvent<HTMLSelectElement>): void => {
+  return (value: string): void => {
     changeIODevice({
       type: CallingDeviceType.CAMERA,
-      selectedDevice: String(ev.currentTarget.value),
+      selectedDevice: value,
     });
   };
 }
@@ -159,14 +139,14 @@ export function CallingDeviceSelection({
         {i18n('icu:callingDeviceSelection__label--video')}
       </label>
       <div className="module-calling-device-selection__select">
-        <select
+        <Select
           disabled={!availableCameras.length}
-          name="video"
+          id="camera"
+          name="camera"
           onChange={createCameraChangeHandler(changeIODevice)}
+          options={renderVideoOptions(availableCameras, i18n)}
           value={selectedCamera}
-        >
+        />
-          {renderVideoOptions(availableCameras, i18n, selectedCamera)}
-        </select>
       </div>
 
       <label
@@ -176,18 +156,18 @@ export function CallingDeviceSelection({
         {i18n('icu:callingDeviceSelection__label--audio-input')}
       </label>
       <div className="module-calling-device-selection__select">
-        <select
+        <Select
           disabled={!availableMicrophones.length}
+          id="audio-input"
           name="audio-input"
           onChange={createAudioChangeHandler(
             availableMicrophones,
             changeIODevice,
             CallingDeviceType.MICROPHONE
           )}
+          options={renderAudioOptions(availableMicrophones, i18n)}
           value={selectedMicrophoneIndex}
-        >
+        />
-          {renderAudioOptions(availableMicrophones, i18n, selectedMicrophone)}
-        </select>
       </div>
 
       <label
@@ -197,18 +177,18 @@ export function CallingDeviceSelection({
         {i18n('icu:callingDeviceSelection__label--audio-output')}
       </label>
       <div className="module-calling-device-selection__select">
-        <select
+        <Select
           disabled={!availableSpeakers.length}
+          id="audio-output"
           name="audio-output"
           onChange={createAudioChangeHandler(
             availableSpeakers,
             changeIODevice,
             CallingDeviceType.SPEAKER
           )}
+          options={renderAudioOptions(availableSpeakers, i18n)}
           value={selectedSpeakerIndex}
-        >
+        />
-          {renderAudioOptions(availableSpeakers, i18n, selectedSpeaker)}
-        </select>
       </div>
     </Modal>
   );