Fix Select component usage by removing items prop and render functions.

Replace render function children with mapped ListItem elements and remove
the unsupported items prop across all Select instances.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Mike Cao 2026-02-06 02:46:38 -08:00
parent 1b347531dc
commit 28c9c7d3ec
7 changed files with 17 additions and 19 deletions

View file

@ -55,7 +55,7 @@ export function TeamMemberAddForm({
<UserSelect teamId={teamId} />
</FormField>
<FormField name="role" label={formatMessage(labels.role)} rules={{ required: 'Required' }}>
<Select items={roles} renderValue={value => renderRole(value as any)}>
<Select renderValue={value => renderRole(value as any)}>
{roles.map(value => (
<ListItem key={value} id={value}>
{renderRole(value)}

View file

@ -40,7 +40,6 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
<WebsiteControls websiteId={websiteId} />
<Grid columns="repeat(3, 1fr)" gap>
<Select
items={JOURNEY_STEPS}
label={formatMessage(labels.steps)}
value={steps}
defaultValue={steps}

View file

@ -152,7 +152,6 @@ export function CompareTables({ websiteId }: { websiteId: string }) {
<>
<Row width="300px">
<Select
items={items}
label={formatMessage(labels.compare)}
value={view}
defaultValue={view}

View file

@ -66,25 +66,20 @@ export function FilterRecord({
<Label>{fields.find(f => f.name === name)?.label}</Label>
<Grid columns="1fr auto" gap>
<Grid columns={{ base: '1fr', md: '200px 1fr' }} gap>
<Select
items={operators.filter(({ type }) => type === 'string')}
value={operator}
onChange={handleSelectOperator}
>
{({ name, label }: any) => {
return (
<Select value={operator} onChange={handleSelectOperator}>
{operators
.filter(({ type }) => type === 'string')
.map(({ name, label }: any) => (
<ListItem key={name} id={name}>
{label}
</ListItem>
);
}}
))}
</Select>
{isSearch && (
<TextField value={selected} defaultValue={selected} onChange={handleSelectValue} />
)}
{!isSearch && (
<Select
items={items}
value={selected}
onChange={handleSelectValue}
searchValue={search}

View file

@ -9,7 +9,6 @@ export function CurrencySelect({ value, onChange }) {
return (
<Select
items={CURRENCIES}
label={formatMessage(labels.currency)}
value={value}
defaultValue={value}

View file

@ -51,7 +51,6 @@ export function UserSelect({
return (
<Select
{...props}
items={listItems}
value={username}
isLoading={usersLoading || (teamId && teamMembersLoading)}
allowSearch={true}
@ -65,7 +64,11 @@ export function UserSelect({
style: { maxHeight: 'calc(42vh - 65px)' },
}}
>
{({ id, username }: any) => <ListItem key={id}>{username}</ListItem>}
{listItems.map(({ id, username }) => (
<ListItem key={id} id={id}>
{username}
</ListItem>
))}
</Select>
);
}

View file

@ -54,7 +54,6 @@ export function WebsiteSelect({
return (
<Select
{...props}
items={listItems}
value={websiteId}
isLoading={isLoading}
allowSearch={true}
@ -65,10 +64,14 @@ export function WebsiteSelect({
renderValue={renderValue}
listProps={{
renderEmptyState: () => <Empty message={formatMessage(messages.noResultsFound)} />,
style: { maxHeight: 'calc(42vh - 65px)' },
style: { maxHeight: 'calc(42vh - 65px)', width: 280 },
}}
>
{({ id, name }: any) => <ListItem key={id}>{name}</ListItem>}
{listItems.map(({ id, name }) => (
<ListItem key={id} id={id}>
{name}
</ListItem>
))}
</Select>
);
}