96e7c95ebc
- regenerates the lockfile - upgrades pnpm from v8 to v9.7.0 minimum - ensures playwright does not import payload config. Even after our importmap revamp that made the payload config server-only / node-safe, I was getting these `Error: Invariant: AsyncLocalStorage accessed in runtime where it is not available` errors in combination with pnpm v9 and lockfile regeneration. This does not happen with pnpm v8, however I'm still blaming playwright for this, as this does not happen in dev and we've had this specific error with playwright in the past when we were importing the payload config. Perhaps it's related to both playwright and the future Next.js process importing the same config file, and not related to the config file containing client-side React code. Making sure playwright doesn't import the config fixed it (it was importing it through the import map generation). The import map generation is now run in a separate process, and playwright simply waits for it - One positive thing: this pr fixes a bunch of typescript errors with react-select components. We got those errors because react-select types are not compatible with react 19. lockfile regeneration fixed that (not related to pnpm v9) - probably because we were installing mismatching react versions (I saw both `fb9a90fa48-20240614` and `06d0b89e-20240801` in our lockfile). I have thus removed the caret for react and react-dom in our package.json - now it's consistent
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
'use client'
|
|
import type { MultiValueProps } from 'react-select'
|
|
|
|
import React from 'react'
|
|
import { components as SelectComponents } from 'react-select'
|
|
|
|
import type { Option } from '../types.js'
|
|
|
|
import { useDraggableSortable } from '../../DraggableSortable/useDraggableSortable/index.js'
|
|
import './index.scss'
|
|
|
|
const baseClass = 'multi-value'
|
|
|
|
export function generateMultiValueDraggableID(optionData, valueFunction) {
|
|
return typeof valueFunction === 'function' ? valueFunction(optionData) : optionData.value
|
|
}
|
|
export const MultiValue: React.FC<MultiValueProps<Option>> = (props) => {
|
|
const {
|
|
className,
|
|
data,
|
|
innerProps,
|
|
isDisabled,
|
|
// @ts-expect-error // TODO Fix this - moduleResolution 16 breaks our declare module
|
|
selectProps: { customProps: { disableMouseDown } = {}, getOptionValue, isSortable } = {},
|
|
} = props
|
|
|
|
const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
|
|
id: generateMultiValueDraggableID(data, getOptionValue),
|
|
disabled: !isSortable,
|
|
})
|
|
|
|
const classes = [
|
|
baseClass,
|
|
className,
|
|
!isDisabled && isSortable && 'draggable',
|
|
isDragging && `${baseClass}--is-dragging`,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<SelectComponents.MultiValue
|
|
{...props}
|
|
className={classes}
|
|
innerProps={{
|
|
...(isSortable
|
|
? {
|
|
...attributes,
|
|
...listeners,
|
|
}
|
|
: {}),
|
|
...innerProps,
|
|
onMouseDown: (e) => {
|
|
if (!disableMouseDown) {
|
|
// we need to prevent the dropdown from opening when clicking on the drag handle, but not when a modal is open (i.e. the 'Relationship' field component)
|
|
e.stopPropagation()
|
|
}
|
|
},
|
|
ref: setNodeRef,
|
|
style: isSortable
|
|
? {
|
|
transform,
|
|
...attributes?.style,
|
|
}
|
|
: {},
|
|
}}
|
|
/>
|
|
</React.Fragment>
|
|
)
|
|
}
|