fix(react-select): update react select package (#3622)

platform/app/src/routes/WorkList/WorkList.tsx

@@ -336,8 +336,6 @@ function WorkList({
         >
           <div className="flex flex-row gap-2">
             {appConfig.loadedModes.map((mode, i) => {
-              const isFirst = i === 0;
-
               const modalitiesToCheck = modalities.replaceAll('/', '\\');
 
               const isValidMode = mode.isValidMode({

platform/ui/package.json

@@ -46,7 +46,7 @@
     "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",
     "react-outside-click-handler": "^1.3.0",
-    "react-select": "3.0.8",
+    "react-select": "5.7.4",
     "react-window": "^1.8.9",
     "react-with-direction": "^1.3.1",
     "swiper": "^8.4.2",

platform/ui/src/components/Header/Header.tsx

@@ -62,6 +62,7 @@ function Header({
             id="options"
             showDropdownIcon={false}
             list={menuOptions}
+            alignment="right"
           >
             <IconButton
               id={'options-settings-icon'}

platform/ui/src/components/Select/Select.css

@@ -28,13 +28,13 @@
 }
 
 .customSelect__wrapper .customSelect__option {
+  color: #d6d6d6;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
   @apply flex flex-row items-center;
 }
 
-.customSelect__wrapper .customSelect__option:focus {
-  @apply bg-primary-main;
-}
-
 .customSelect__wrapper .customSelect__option--is-selected {
   @apply bg-transparent;
 }
@@ -55,7 +55,7 @@
   @apply inline-block truncate px-3 py-2;
 }
 
-.customSelect__menu {
+.ohif-select .customSelect__menu {
   background-color: transparent !important;
   border-radius: 6px;
 }
@@ -79,18 +79,10 @@
   border-radius: 10px;
 }
 
-.customSelect__option:focus {
+.customSelect__option--is-focused {
   background-color: #0944b391 !important;
 }
 
-.ohif-select .customSelect__option,
-.ohif-select .customSelect__option label {
-  color: #d6d6d6;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-}
-
 .ohif-select .customSelect__option:hover {
   background-color: #0944b391;
 }

platform/ui/src/tailwind.css

@@ -25,51 +25,4 @@ body {
   height: 2.1rem;
 }
 
-.customSelect__menu {
-  background-color: transparent !important;
-  border-radius: 6px;
-}
 
-.css-4ljt47-MenuList {
-  overflow-x: hidden !important;
-  margin-right: 4px;
-  margin-top: 4px;
-  padding-top: 0px !important;
-}
-.css-4ljt47-MenuList::-webkit-scrollbar {
-  width: 6px;
-  border-radius: 10px;
-}
-
-.css-4ljt47-MenuList::-webkit-scrollbar-thumb {
-  background-color: #0944b3;
-  border-radius: 10px;
-}
-
-.customSelect__option:focus {
-  background-color: #0944b391 !important;
-}
-.customSelect__option label {
-  color: #d6d6d6;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-}
-
-.css-1n7v3ny-option {
-  background-color: #0944b391 !important;
-}
-
-.css-1n7v3ny-option:focus {
-  background-color: #0944b391 !important;
-}
-
-.customSelect__option:hover {
-  background-color: #0944b391;
-}
-
-.css-26l3qy-menu {
-  border: 2px solid #0944b3;
-  border-radius: 6px;
-  background-color: #151515 !important;
-}