Skip to content

Commit 73e0e25

Browse files
authored
fix(ui): upgrade react-select, fixes type issues with select input (#9653)
React-select fixed React 19 type compatibility here: JedWatson/react-select#5974
1 parent f076797 commit 73e0e25

File tree

7 files changed

+15
-16
lines changed

7 files changed

+15
-16
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"react": "18.2.0",
2121
"react-dom": "^18.2.0",
2222
"react-hook-form": "^7.41.0",
23-
"react-select": "^5.7.0",
23+
"react-select": "5.8.3",
2424
"sass": "^1.55.0",
2525
"slate": "^0.84.0"
2626
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"react": "18.2.0",
2121
"react-dom": "^18.2.0",
2222
"react-hook-form": "^7.41.0",
23-
"react-select": "^5.7.0",
23+
"react-select": "5.8.3",
2424
"sass": "^1.55.0",
2525
"slate": "^0.84.0"
2626
},

packages/ui/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
"qs-esm": "7.0.2",
118118
"react-datepicker": "6.9.0",
119119
"react-image-crop": "10.1.8",
120-
"react-select": "5.8.0",
120+
"react-select": "5.8.3",
121121
"scheduler": "0.0.0-experimental-3edc000d-20240926",
122122
"sonner": "^1.5.0",
123123
"ts-essentials": "10.0.3",

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
'use client'
2-
import type { ControlProps } from 'react-select'
2+
import type { InputProps } from 'react-select'
33

44
import React from 'react'
55
import { components as SelectComponents } from 'react-select'
66

77
import type { Option } from '../types.js'
88

9-
export const Input: React.FC<ControlProps<Option, any>> = (props) => {
9+
export const Input: React.FC<InputProps<Option, any>> = (props) => {
1010
return (
1111
<React.Fragment>
12-
{/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}
1312
<SelectComponents.Input
1413
{...props}
1514
/**

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
'use client'
2-
import type { CSSProperties, KeyboardEventHandler } from 'react'
2+
import type { KeyboardEventHandler } from 'react'
33

44
import { arrayMove } from '@dnd-kit/sortable'
55
import { getTranslation } from '@payloadcms/translations'
66
import React, { useEffect, useId } from 'react'
7-
import Select from 'react-select'
7+
import Select, { type StylesConfig } from 'react-select'
88
import CreatableSelect from 'react-select/creatable'
99

1010
import type { Option, ReactSelectAdapterProps } from './types.js'
@@ -67,11 +67,11 @@ const SelectAdapter: React.FC<ReactSelectAdapterProps> = (props) => {
6767
.filter(Boolean)
6868
.join(' ')
6969

70-
const styles = {
70+
const styles: StylesConfig<Option> = {
7171
// Remove the default react-select z-index from the menu so that our custom
7272
// z-index in the "payload-default" css layer can take effect, in such a way
7373
// that end users can easily override it as with other styles.
74-
menu: (rsStyles: CSSProperties): CSSProperties => ({ ...rsStyles, zIndex: undefined }),
74+
menu: (rsStyles) => ({ ...rsStyles, zIndex: undefined }),
7575
}
7676

7777
if (!hasMounted) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -625,7 +625,7 @@ const RelationshipFieldComponent: RelationshipFieldClientComponent = (props) =>
625625
}
626626
return hasMany && Array.isArray(relationTo)
627627
? `${option.relationTo}_${option.value}`
628-
: option.value
628+
: (option.value as string)
629629
}}
630630
isLoading={isLoading}
631631
isMulti={hasMany}

pnpm-lock.yaml

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)