feat(audio-menu) Redesign audio picker menu (#12899)

Convert some files to TS
Remove unnecessary files
Implement redesign
Add noise suppression to picker menu
Fix Popover placement on browser resize

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -13,6 +13,11 @@ export interface IProps {
      */
     accessibilityLabel: string;
 
+    /**
+     * Component children.
+     */
+    children?: ReactNode;
+
     /**
      * CSS class name used for custom styles.
      */
@@ -54,6 +59,11 @@ export interface IProps {
      */
     onKeyPress?: (e?: React.KeyboardEvent) => void;
 
+    /**
+     * Whether the item is marked as selected.
+     */
+    selected?: boolean;
+
     /**
      * TestId of the element, if any.
      */
@@ -62,7 +72,7 @@ export interface IProps {
     /**
      * Action text.
      */
-    text: string;
+    text?: string;
 
     /**
      * Class name for the text.
@@ -97,6 +107,12 @@ const useStyles = makeStyles()(theme => {
             }
         },
 
+        selected: {
+            borderLeft: `3px solid ${theme.palette.action01Hover}`,
+            paddingLeft: '13px',
+            backgroundColor: theme.palette.ui02
+        },
+
         contextMenuItemDisabled: {
             pointerEvents: 'none'
         },
@@ -124,6 +140,7 @@ const useStyles = makeStyles()(theme => {
 
 const ContextMenuItem = ({
     accessibilityLabel,
+    children,
     className,
     customIcon,
     disabled,
@@ -132,6 +149,7 @@ const ContextMenuItem = ({
     onClick,
     onKeyDown,
     onKeyPress,
+    selected,
     testId,
     text,
     textClassName }: IProps) => {
@@ -145,6 +163,7 @@ const ContextMenuItem = ({
             className = { cx(styles.contextMenuItem,
                     _overflowDrawer && styles.contextMenuItemDrawer,
                     disabled && styles.contextMenuItemDisabled,
+                    selected && styles.selected,
                     className
             ) }
             data-testid = { testId }
@@ -152,13 +171,15 @@ const ContextMenuItem = ({
             key = { text }
             onClick = { disabled ? undefined : onClick }
             onKeyDown = { disabled ? undefined : onKeyDown }
-            onKeyPress = { disabled ? undefined : onKeyPress }>
+            onKeyPress = { disabled ? undefined : onKeyPress }
+            role = 'menuitem'>
             {customIcon ? customIcon
                 : icon && <Icon
                     className = { styles.contextMenuItemIcon }
                     size = { 20 }
                     src = { icon } />}
-            <span className = { cx(styles.text, textClassName) }>{text}</span>
+            {text && <span className = { cx(styles.text, textClassName) }>{text}</span>}
+            {children}
         </div>
     );
 };