Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Select.mdx #6220

Closed
wants to merge 1 commit into from
Closed

Update Select.mdx #6220

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/react-aria-components/docs/Select.mdx
View file
Open in desktop
Expand Up @@ -303,7 +303,7 @@ If you will use a Select in multiple places in your app, you can wrap all of the
This example wraps `Select` and all of its children together into a single component which accepts a `label` prop and `children`, which are passed through to the right places. It also shows how to use the `description` slot to render [help text](#description), and `FieldError` component to render [validation errors](#validation). The `Item` component is also wrapped to apply class names based on the current state, as described in the [styling](#styling) section.

```tsx example export=true
import type {SelectProps, ListBoxItemProps, ValidationResult} from 'react-aria-components';
import type {SelectProps, SelectValueRenderProps, ListBoxItemProps, ValidationResult} from 'react-aria-components';
import {Text, FieldError} from 'react-aria-components';

interface MySelectProps<T extends object> extends Omit<SelectProps<T>, 'children'> {
Expand All @@ -312,14 +312,20 @@ interface MySelectProps<T extends object> extends Omit<SelectProps<T>, 'children
errorMessage?: string | ((validation: ValidationResult) => string),
items?: Iterable<T>,
children: React.ReactNode | ((item: T) => React.ReactNode)
renderValue?: (selectValue: Omit<SelectValueRenderProps<T>, "isPlaceholder">) => ReactNode;
}

function MySelect<T extends object>({label, description, errorMessage, children, items, ...props}: MySelectProps<T>) {
return (
<Select {...props}>
<Label>{label}</Label>
<Button>
<SelectValue />
<SelectValue>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to add a prop for renderValue, this would be taken care of like so

<SelectValue>
  {({defaultChildren}) => 
    return defaultChildren; // do any context around this which can be used to pass values to the ListBoxItem and tell it other ways to render
    // this will already handle the props.placeholder and a default placeholder
  }
</SelectValue>

I'm going to close this PR in favor of #6425
Feel free to open an issue if there's anything missed

{renderValue
? ({ selectedItem, selectedText }) =>
selectedItem ? renderValue({ selectedItem: selectedItem as T, selectedText }) : props.placeholder ?? "Select an item"
: undefined}
</SelectValue>
<span aria-hidden="true">▼</span>
</Button>
{description && <Text slot="description">{description}</Text>}
Expand Down