
## 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 (
    <DropdownBase options={options}>
      {({ toggle }) => (
        <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
          Open Dropdown Layout
        </TextButton>
      )}
    </DropdownBase>
  );
};
```

### 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 (
    <StorybookComponents.Stack>
      <DropdownBase options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Click to open dropdown
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase
        options={options}
        onMouseEnter={openDropdown}
        onMouseLeave={closeDropdown}
        onSelect={closeDropdown}
        open={openedDropdown}
      >
        {() => (
          <TextButton suffixIcon={<Icons.ChevronDown />}>
            Hover to open dropdown
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
```

### Placement
- description: Control the dropdown layout location around a trigger with the `placement` prop. It accepts all
        <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--popover">\<Popover/></a>
        placement options. Move it farther from the trigger on X and Y axis with the `moveBy` prop.
- example: 
```jsx 
<DropdownBase
  options={[
    { id: 0, value: 'Option 1' },
    { id: 1, value: 'Option 2' },
    { id: 2, value: 'Option 3' },
  ]}
  placement="right-start"
  moveBy={{ x: 6, y: 0 }}
>
  {({ toggle }) => (
    <TextButton onClick={toggle} suffixIcon={<Icons.ChevronRight />}>
      Right-Start
    </TextButton>
  )}
</DropdownBase>;
```

### Dimensions
- description: Control dropdown layout dimensions with:<br/>
      &emsp;- `maxHeight` - limit the height for longer list of options.<br/>
      &emsp;- `minWidth` - control minimum width when the trigger element is narrow.<br/>
      &emsp;- `maxWidth` - limit the width when the list contains long titles.<br/>
      &emsp;- `dynamicWidth` - match the dropdown width to the trigger element width.<br/>
- 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 (
    <StorybookComponents.Stack>
      <DropdownBase
        maxHeight="200px"
        minWidth="300px"
        maxWidth="800px"
        options={options}
      >
        {({ toggle, selectedOption = {} }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            {selectedOption.value || 'Controlled width'}
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase dynamicWidth options={options}>
        {({ toggle, selectedOption = {} }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            {selectedOption.value || 'Dynamic width'}
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
```

### 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 (
    <StorybookComponents.Stack>
      <DropdownBase options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Popover without arrow
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase showArrow options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Popover with arrow
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
```

### List item builders
- description: Build custom dropdown layouts with:<br/>
      &emsp;- `listItemSectionBuilder` - use this element to group items into sections by type. See
      <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemsection">ListItemSection</a> for more details.<br/>
      &emsp;- `listItemActionBuilder` - use this element to add text button for related list actions, e.g. "Manage categories". See
      <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemaction">ListItemAction</a> for more details.<br/>
      &emsp;- `listItemSelectBuilder` - use this element to build custom list designs. See
      <a target="_blank" href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--listitemselect">ListItemSelect</a> for more details.<br/>
- example: 
```jsx 
<DropdownBase
  options={[
    listItemSectionBuilder({
      type: 'title',
      title: 'Group Title',
    }),
    listItemSelectBuilder({
      id: 0,
      title: 'Title 1',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      label: 'Title 1',
    }),
    listItemSelectBuilder({
      id: 1,
      title: 'Title 2',
      subtitle: 'Subtitle',
      suffix: 'Suffix',
      label: 'Title 2',
    }),
    listItemSectionBuilder({
      type: 'divider',
    }),
    listItemActionBuilder({
      title: 'Action',
    }),
  ]}
>
  {({ toggle }) => (
    <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
      Options using list item builders
    </TextButton>
  )}
</DropdownBase>;
```

### Focus on option
- description: Control a focused element inside of dropdown with:<br/>
      &emsp;- `focusOnOption` - control which option is highlighted when nothing is selected yet.<br/>
      &emsp;- `focusOnSelectedOption` - scrolls list to display selected option when dropdown is opened.<br/>
- example: 
```jsx 
<StorybookComponents.Stack>
  <DropdownBase
    focusOnOption={1}
    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' },
    ]}
  >
    {({ toggle, selectedOption = {} }) => (
      <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
        {selectedOption.value || 'Highlight on option 2'}
      </TextButton>
    )}
  </DropdownBase>
  <DropdownBase
    selectedId={11}
    focusOnSelectedOption
    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' },
      { id: 5, value: 'Option 6' },
      { id: 6, value: 'Option 7' },
      { id: 7, value: 'Option 8' },
      { id: 8, value: 'Option 9' },
      { id: 9, value: 'Option 10' },
      { id: 10, value: 'Option 11' },
      { id: 11, value: 'Scrolled list to selected option 12' },
      { id: 12, value: 'Option 13' },
      { id: 13, value: 'Option 14' },
      { id: 14, value: 'Option 15' },
    ]}
  >
    {({ toggle, selectedOption = {} }) => (
      <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
        {selectedOption.value || 'Click to see highlight on Option 2'}
      </TextButton>
    )}
  </DropdownBase>
</StorybookComponents.Stack>;
```

### 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 (
    <StorybookComponents.Stack>
      <DropdownBase options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            Without animation
          </TextButton>
        )}
      </DropdownBase>
      <DropdownBase animate options={options}>
        {({ toggle }) => (
          <TextButton onClick={toggle} suffixIcon={<Icons.ChevronDown />}>
            With animation
          </TextButton>
        )}
      </DropdownBase>
    </StorybookComponents.Stack>
  );
};
```




    


## Common Use Case Examples


### Content filters
- description: Use DropdownBase to build custom filters for page or card content.
- example: 
```jsx 
<Card>
  <Card.Header
    title="Invoice Stats"
    suffix={
      <DropdownBase
        selectedId={1}
        focusOnSelectedOption
        options={[
          { id: 0, value: 'Last 30 Days' },
          { id: 1, value: 'This Month' },
          { id: 2, value: 'This Quarter' },
          { id: 3, value: 'Last Quarter' },
          { id: 4, value: 'This Year' },
          { id: 5, value: 'Last Year' },
        ]}
      >
        {({ toggle, selectedOption = {} }) => (
          <TextButton
            onClick={toggle}
            skin="dark"
            suffixIcon={<Icons.ChevronDown />}
          >
            {selectedOption.value}
          </TextButton>
        )}
      </DropdownBase>
    }
  />
  <Card.Divider />
  <Card.Content>
    <StorybookComponents.Placeholder height="200px">
      Various charts
    </StorybookComponents.Placeholder>
  </Card.Content>
</Card>;
```

### 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 }) => (
    <TableListItem
      verticalPadding="small"
      showDivider
      options={[
        { value: title },
        {
          value: (
            <DropdownBase
              options={[
                listItemSelectBuilder({
                  id: 0,
                  prefix: <Avatar size="size30" name="Joe Harold" />,
                  title: 'Joe Harold',
                  subtitle: 'joe@hotmail.com',
                  label: 'Joe Harold',
                }),
                listItemSelectBuilder({
                  id: 1,
                  prefix: <Avatar size="size30" name="Kim Lee" />,
                  title: 'Kim Lee',
                  subtitle: 'kim@gmail.com',
                  label: 'Kim Lee',
                }),
              ]}
            >
              {({ toggle, selectedOption = {} }) => (
                <Button
                  size="small"
                  skin="inverted"
                  onClick={toggle}
                  prefixIcon={<Icons.UserSmall />}
                >
                  {selectedOption.label || 'Assign a person'}
                </Button>
              )}
            </DropdownBase>
          ),
          align: 'right',
        },
      ]}
    />
  );
  return (
    <Layout cols={1} gap={0}>
      <ListItem title="Task 1" />
      <ListItem title="Task 2" />
      <ListItem title="Task 3" />
    </Layout>
  );
};
```


