In the case when the user selects a new video device then goes to Virtual Background without saving first, use the newly selected device for the virtual background preview instead of the saved one

When the toolbox is hidden and due to a ReactFocusLock instance the
focus is returned to the toolbox the whole page scrolls to the toolbox
which is positioned outside of the viewport in the bottom.
Then when the animation for displaying the toolbox is started the
scenario looks like the large video is jumping.
Now we don't return the focus from ReactFocusLock to elements which are
not part of the viewport.

* fix: multiselect duplicates

* set multiselect height to 200px

Remove @atlaskit and styled-components
Upgrade @emotion and @mui packages
Move @types packages to devDeps

Move ListItem to base/ui

*Remove unnecessary @ts-ignores

Remove unnecessary @ts-ignore
Fix some TS errors

Replace atlaskit Spinner with the new component
Remove @atlaskit/spinner

Implement redesign

feat(a11y): use tabs ARIA design pattern when using tabbed UI

Create separate tabs for Audio and Video in the Settings Dialog
Move some settings from the More tab to Audio/ Video tab
Implement redesign
Convert some files to TS
Move some styles from SCSS to JSS
Enable device selection on welcome page

feat(a11y): fix-focus-styles

Create Shortcuts tab in Settings Dialog
Move keyboard shortcut option from More to this tab
Move shortcuts info from KeyboardShortcuts dialog to this tab
Remove KeyboardShortcuts dialog

feat(a11y): make (most) UI elements reachable via keyboard

Fixes wrong focus on desktop picker dialog

* ref(settings-dialog) Update to use new Dialog component

Created new DialogWithTabs component
Refactored Dialog into Dialog and BaseDialog
Updated dialog functionality on mobile

Convert some files to TS
Implement redesign
Add Virtual background and Flip video to picker menu

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

Convert files to TS
Move styles from SCSS to JSS
Implement redesign

 - use new `Button` component for drop down buttons

Use JitsiPortal on mobile

Remove focus outline for the close icon
Increase max height

Since we unmount the dialog after a timeout because of an animation we
need to cancel the timeout in case we need to render new dialog.
Otherwise the actual hiding can be executed after we render the new
dialog.

Needed for shared video dialog.

* tss-react doesn't need a type anotation for the Theme

* Update tss-react to 4.4.4

Don't focus on the close button if there's another focusable element

Remove unused icons
Remove fill none from icons
Rename some icons

Remove global variables from files
Change type to interface

Co-authored-by: Calinteodor <calin.chitu@8x8.com>
Co-authored-by: Robert Pintilii <robert.pin9@gmail.com>

If onSubmit opens a new dialog, we'd be hiding it otherwise.