fix(ui): upgrade react-select, fixes type issues with select input (#…

…9653)

React-select fixed React 19 type compatibility here:
JedWatson/react-select#5974

examples/form-builder/next-app/package.json

@@ -20,7 +20,7 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.0",
-    "react-select": "^5.7.0",
+    "react-select": "5.8.3",
     "sass": "^1.55.0",
     "slate": "^0.84.0"
   },

examples/form-builder/next-pages/package.json

@@ -20,7 +20,7 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.41.0",
-    "react-select": "^5.7.0",
+    "react-select": "5.8.3",
     "sass": "^1.55.0",
     "slate": "^0.84.0"
   },

packages/ui/package.json

@@ -117,7 +117,7 @@
     "qs-esm": "7.0.2",
     "react-datepicker": "6.9.0",
     "react-image-crop": "10.1.8",
-    "react-select": "5.8.0",
+    "react-select": "5.8.3",
     "scheduler": "0.0.0-experimental-3edc000d-20240926",
     "sonner": "^1.5.0",
     "ts-essentials": "10.0.3",

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

@@ -1,15 +1,14 @@
 'use client'
-import type { ControlProps } from 'react-select'
+import type { InputProps } from 'react-select'
 
 import React from 'react'
 import { components as SelectComponents } from 'react-select'
 
 import type { Option } from '../types.js'
 
-export const Input: React.FC<ControlProps<Option, any>> = (props) => {
+export const Input: React.FC<InputProps<Option, any>> = (props) => {
   return (
     <React.Fragment>
-      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
       <SelectComponents.Input
         {...props}
         /**

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

@@ -1,10 +1,10 @@
 'use client'
-import type { CSSProperties, KeyboardEventHandler } from 'react'
+import type { KeyboardEventHandler } from 'react'
 
 import { arrayMove } from '@dnd-kit/sortable'
 import { getTranslation } from '@payloadcms/translations'
 import React, { useEffect, useId } from 'react'
-import Select from 'react-select'
+import Select, { type StylesConfig } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
 
 import type { Option, ReactSelectAdapterProps } from './types.js'
@@ -67,11 +67,11 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
     .filter(Boolean)
     .join(' ')
 
-  const styles = {
+  const styles: StylesConfig<Option> = {
     // 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 }),
+    menu: (rsStyles) => ({ ...rsStyles, zIndex: undefined }),
   }
 
   if (!hasMounted) {

packages/ui/src/fields/Relationship/index.tsx

@@ -625,7 +625,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
                 }
                 return hasMany && Array.isArray(relationTo)
                   ? `${option.relationTo}_${option.value}`
-                  : option.value
+                  : (option.value as string)
               }}
               isLoading={isLoading}
               isMulti={hasMany}