tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
React-select fixed React 19 type compatibility here:
https://github.com/JedWatson/react-select/pull/5974
This commit is contained in:
Alessio Gravili
2024-12-01 21:35:03 -07:00
committed by GitHub
parent f07679745a
commit 73e0e25e14
7 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/form-builder/next-app/package.json
View File

@@ -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"
},

2
examples/form-builder/next-pages/package.json
View File

@@ -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"
},

2
packages/ui/package.json
View File

@@ -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",

5
packages/ui/src/elements/ReactSelect/Input/index.tsx
View File

@@ -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}
/**

8
packages/ui/src/elements/ReactSelect/index.tsx
View File

@@ -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) {

2
packages/ui/src/fields/Relationship/index.tsx
View File

@@ -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}

10
pnpm-lock.yaml generated
View File

@@ -1537,8 +1537,8 @@ importers:
specifier: 10.1.8
version: 10.1.8(react@19.0.0-rc-65a56d0e-20241020)
react-select:
specifier: 5.8.0
version: 5.8.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)(types-react@19.0.0-rc.1)
specifier: 5.8.3
version: 5.8.3(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)(types-react@19.0.0-rc.1)
scheduler:
specifier: 0.0.0-experimental-3edc000d-20240926
version: 0.0.0-experimental-3edc000d-20240926
@@ -8645,8 +8645,8 @@ packages:
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
react-select@5.8.0:
resolution: {integrity: sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==}
react-select@5.8.3:
resolution: {integrity: sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==}
peerDependencies:
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020
@@ -18691,7 +18691,7 @@ snapshots:
react: 19.0.0-rc-65a56d0e-20241020
react-dom: 19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020)
react-select@5.8.0(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)(types-react@19.0.0-rc.1):
react-select@5.8.3(react-dom@19.0.0-rc-65a56d0e-20241020(react@19.0.0-rc-65a56d0e-20241020))(react@19.0.0-rc-65a56d0e-20241020)(types-react@19.0.0-rc.1):
dependencies:
'@babel/runtime': 7.26.0
'@emotion/cache': 11.13.1