import { Canvas, Meta, Story } from '@storybook/addon-docs';
# Global Search
The component is built on top of [MUI Autocomplete](https://mui.com/material-ui/react-autocomplete/). All props are exposed except: `renderInput`.
Provide `groupedOptions` prop with an object containing group names as keys and values as array of the autocomplete options, e.g.:
```typescript
const groupedOptions = {
users: [
{
label: 'Some user name',
email: 'some email'
}
],
cities: [{ label: 'City' }]
};
```
---
### Option Types
To ensure that MUI Autocomplete we must a `label` field on each option,
therefore each option must extend the `BaseOptionProps` type:
```typescript
type BaseOptionProps = {
label: string;
componentType?: OptionRenderComponentType;
group?: string;
id?: string | number;
CustomComponent?: ReactElement;
Actions?: ReactElement;
};
```
| Prop | Desc |
| --------------- | ---------------------------------------------------------------------------------------------------- |
| label | The label which used as the main option value |
| componentType | One of the options template |
| group | Override the group name |
| id | To handle case with duplicate label, id prop was added, by defualt it will use a generated unique id |
| CustomComponent | Render a custom component as option instead of the default or the templates |
| Actions | Add actions to the options |
---
### Option Templates
By default all options will use the `Default` template. You can use the `componentType` prop to select `Tenant` or `User` and just add the props to the option object.
---
### Custom Option Components
To render a custom option component use the `CustomComponent` prop:
```typescript
const customOption = {
label: 'Some label',
CustomComponent: (
'Some label'
)
};
```
---
### Actions
To add actions to an item use the `Actions` prop:
```typescript
const optionWithAction = [
label: 'Some label',
Actions: (
)
};
```