## Feature Examples
### Structure
- description: This component consists of a list of options inside a popover that is called out via a `trigger` element. The `trigger` can be any interactive WSR component.
Usually it’s `TextButton.`
- example:
```jsx
() => {
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
{ id: 3, value: 'Option 4' },
{ id: 4, value: 'Option 5' },
];
return (
{({ toggle }) => (
}>
Open Dropdown Layout
)}
);
};
```
### Trigger action
- description: Call out a popover on click or hover interactions.
- example:
```jsx
() => {
const [openedDropdown, setOpenedDropdown] = React.useState(false);
const openDropdown = () => setOpenedDropdown(true);
const closeDropdown = () => setOpenedDropdown(false);
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
{ id: 3, value: 'Option 4' },
{ id: 4, value: 'Option 5' },
];
return (
{({ toggle }) => (
}>
Click to open dropdown
)}
{() => (
}>
Hover to open dropdown
)}
);
};
```
### Placement
- description: Control the dropdown layout location around a trigger with the `placement` prop. It accepts all
\
placement options. Move it farther from the trigger on X and Y axis with the `moveBy` prop.
- example:
```jsx
{({ toggle }) => (
}>
Right-Start
)}
;
```
### Dimensions
- description: Control dropdown layout dimensions with:
- `maxHeight` - limit the height for longer list of options.
- `minWidth` - control minimum width when the trigger element is narrow.
- `maxWidth` - limit the width when the list contains long titles.
- `dynamicWidth` - match the dropdown width to the trigger element width.
- example:
```jsx
() => {
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
{ id: 3, value: 'Option 4 is quite wider than other options' },
{ id: 4, value: 'Option 5' },
];
return (
{({ toggle, selectedOption = {} }) => (
}>
{selectedOption.value || 'Controlled width'}
)}
{({ toggle, selectedOption = {} }) => (
}>
{selectedOption.value || 'Dynamic width'}
)}
);
};
```
### Arrow
- description: Control the popover arrow visibility with the `showArrow` prop. It’s not displayed by default.
- example:
```jsx
() => {
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
];
return (
{({ toggle }) => (
}>
Popover without arrow
)}
{({ toggle }) => (
}>
Popover with arrow
)}
);
};
```
### List item builders
- description: Build custom dropdown layouts with:
- `listItemSectionBuilder` - use this element to group items into sections by type. See
ListItemSection for more details.
- `listItemActionBuilder` - use this element to add text button for related list actions, e.g. "Manage categories". See
ListItemAction for more details.
- `listItemSelectBuilder` - use this element to build custom list designs. See
ListItemSelect for more details.
- example:
```jsx
{({ toggle }) => (
}>
Options using list item builders
)}
;
```
### Focus on option
- description: Control a focused element inside of dropdown with:
- `focusOnOption` - control which option is highlighted when nothing is selected yet.
- `focusOnSelectedOption` - scrolls list to display selected option when dropdown is opened.
- example:
```jsx
{({ toggle, selectedOption = {} }) => (
}>
{selectedOption.value || 'Highlight on option 2'}
)}
{({ toggle, selectedOption = {} }) => (
}>
{selectedOption.value || 'Click to see highlight on Option 2'}
)}
;
```
### Animate
- description: Create smooth transitions by adding enter and exit animations to the popover with the `animate` prop.
- example:
```jsx
() => {
const options = [
{ id: 0, value: 'Option 1' },
{ id: 1, value: 'Option 2' },
{ id: 2, value: 'Option 3' },
{ id: 3, value: 'Option 4' },
{ id: 4, value: 'Option 5' },
];
return (
{({ toggle }) => (
}>
Without animation
)}
{({ toggle }) => (
}>
With animation
)}
);
};
```
## Common Use Case Examples
### Content filters
- description: Use DropdownBase to build custom filters for page or card content.
- example:
```jsx
{({ toggle, selectedOption = {} }) => (
}
>
{selectedOption.value}
)}
}
/>
Various charts
;
```
### Assign task or item
- description: Use DropdownBase to call out popovers for the user to assign a person. Once selected, replace the trigger button with a tag representing the user.
- example:
```jsx
() => {
const ListItem = ({ title }) => (
,
title: 'Joe Harold',
subtitle: 'joe@hotmail.com',
label: 'Joe Harold',
}),
listItemSelectBuilder({
id: 1,
prefix: ,
title: 'Kim Lee',
subtitle: 'kim@gmail.com',
label: 'Kim Lee',
}),
]}
>
{({ toggle, selectedOption = {} }) => (
}
>
{selectedOption.label || 'Assign a person'}
)}
),
align: 'right',
},
]}
/>
);
return (
);
};
```