fix(ui): z-index on react-select menu (#9512)

The [previous fix](#8735)
worked but was a breaking change because it set a `z-index` in the
`.react-select` wrapper instead of the `.rs__menu`, creating a new
stacking-context, therefore making any existing customizations to the
menu's `z-index` not work. This was a way to fix a regression introduced
by the css-layers, in which Payload's custom `z-index: 4` no longer took
precedence over react-select's default `z-index: 1`.

With this PR we remove the default `z-index: 1` applied by react-select,
so that the `z-index: 4` set in the "payload-default" css layer can take
effect. An alternative to this fix would be to use `z-index: 4
!important`, but this has the advantage of allowing the `z-index` to be
easily customized by the consumers of the CMS, as with all the other
styles.

### Screenshots

![2024-11-25 18 21
22](https://github.com/user-attachments/assets/3dc9a067-901a-41ea-b04e-c811788f8415)

Author: franciscolourenco

packages/ui/src/elements/ReactSelect/index.scss

@@ -6,9 +6,6 @@
   }
 
   .react-select {
-    &:focus-within {
-      z-index: 3;
-    }
     .rs__control {
       @include formInput;
       height: auto;

packages/ui/src/elements/ReactSelect/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import type { KeyboardEventHandler } from 'react'
+import type { CSSProperties, KeyboardEventHandler } from 'react'
 
 import { arrayMove } from '@dnd-kit/sortable'
 import { getTranslation } from '@payloadcms/translations'
@@ -67,6 +67,13 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
     .filter(Boolean)
     .join(' ')
 
+  const styles = {
+    // Remove the default react-select z-index from the menu so that our custom
+    // z-index in the "payload-default" css layer can take effect, in such a way
+    // that end users can easily override it as with other styles.
+    menu: (rsStyles: CSSProperties): CSSProperties => ({ ...rsStyles, zIndex: undefined }),
+  }
+
   if (!hasMounted) {
     return <ShimmerEffect height="calc(var(--base) * 2 + 2px)" />
   }
@@ -106,6 +113,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
         onMenuClose={onMenuClose}
         onMenuOpen={onMenuOpen}
         options={options}
+        styles={styles}
         unstyled={true}
         value={value}
       />
@@ -183,6 +191,7 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
       onMenuClose={onMenuClose}
       onMenuOpen={onMenuOpen}
       options={options}
+      styles={styles}
       unstyled={true}
       value={value}
     />