# ButtonTypedown

The `ButtonTypedown` component is a variant of the `Typedown` component that utilizes a **DropdownButton** as the primary trigger element. When the button is clicked, a dropdown list appears, with a **SearchField** rendered in the header for typing and filtering the options.

It is ideal for scenarios where the selected value needs to be prominently displayed within a button context, and the search functionality is secondary, appearing only when the dropdown is active.

## Basic Usage

The component is a wrapper around `Typedown`, configuring the `renderTrigger` and `renderHeader` props internally.

```javascript
import { ButtonTypedown } from './ButtonTypedown'; // Adjust import path

<ButtonTypedown
  label="Select a User"
  dataOptions={[
    { id: 'u1', name: 'John Doe' },
    { id: 'u2', name: 'Jane Smith' },
    { id: 'u3', name: 'Alice Johnson' },
  ]}
  input={{
    name: 'userField',
    value: { id: 'u1', name: 'John Doe' }, // Example selected value
    onChange: (value) => console.log('Selected:', value),
  }}
  // Custom function to render the option inside the button and in the list
  renderListItem={(option) => option ? option.name : 'Select user...'}
  // Custom function for fetching/filtering data when the user types
  onType={(e) => {
    // Implement custom filtering or data fetching based on e.target.value
    console.log('User typed:', e.target.value);
  }}
  // All other standard Typedown props are supported
/>
```

## How it Works

The `ButtonTypedown` component passes the following predefined props to the underlying `Typedown`:

* `renderTrigger`: Renders a `DropdownButton` (from `@folio/stripes/components`) that displays the selected value (via `renderListItem`) and acts as the open/close trigger.
* `renderHeader`: Renders a `SearchField` (from `../SearchField`) inside the dropdown's menu. This is where the user types to filter the list.
* `getDisplayValue`: Set to `() => false` to prevent the selected item from being rendered *below* the typedown, as the selected value is already displayed *inside* the trigger button.

## Props

Since `ButtonTypedown` is a wrapper around `Typedown`, it accepts **all** props of the base `Typedown` component. However, it specifically requires or overrides the above two props

| Name                        | Type  | Description                                                                                                                                                                                                                                                      | Required |
|-----------------------------|-------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|
| **onType**                  | func  | **Required.** A callback function `(event)` that is called when the user types in the search field (which appears in the dropdown header). You **must** use this to filter the `dataOptions` or fetch new data and update the `dataOptions` prop.                | ✓        |
| **renderListItem**          | func  | **Required.** A function `(option, currentlyTyped, exactMatch, optionIsSelected)` that renders each item in the dropdown list. In `ButtonTypedown`, this function is **also** used to render the content *inside* the `DropdownButton` when an item is selected. | ✓        |
| *...rest of Typedown props* | *...* | All other props supported by the base `Typedown` component (e.g., `dataOptions`, `input`, `filterPath`, `uniqueIdentificationPath`, etc.) are supported. Note that `renderTrigger` and `renderHeader` are overridden internally.                                 | ✕        |