Dropdown

Dropdown components with search and filtering capabilities.

Components

Dropdown

Standard dropdown with flat option list.

import { Dropdown } from '@bolttech/molecules-dropdown/ob';

const options = [
  { id: '1', label: 'Option 1', value: 'opt1' },
  { id: '2', label: 'Option 2', value: 'opt2' },
];

<Dropdown
  label="Select Option"
  optionList={options}
  value={selectedValue}
  onChange={(option) => setSelectedValue(option?.id)}
/>

DropdownWithHeaders

Dropdown with grouped options.

import { DropdownWithHeaders } from '@bolttech/molecules-dropdown/ob';

const groupedOptions = [
  {
    header: 'Group 1',
    options: [
      { id: '1', label: 'Option 1', value: 'opt1' },
      { id: '2', label: 'Option 2', value: 'opt2' },
    ],
  },
];

<DropdownWithHeaders
  label="Select Option"
  optionList={groupedOptions}
  value={selectedValue}
  onChange={(option) => setSelectedValue(option?.id)}
/>

Props

Common Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Label text | | optionList | OptionType[] / OptionWithHeaderType[] | - | Options to display | | onChange | (option?: OptionType) => void | - | Selection callback | | value | string | - | Selected option id | | variant | 'grey' | 'border' | 'grey' | Visual style | | placeholder | string | - | Placeholder text | | disabled | boolean | false | Disable dropdown | | required | boolean | false | Mark as required | | errorMessage | string | - | Error message | | helperMessage | string | - | Helper text | | disableSearch | boolean | false | Disable search input | | asyncOptionList | boolean | false | Handle async options | | id | string | 'dropdown-id' | Element id | | dataTestId | string | 'dropdown-data-testid' | Test id | | onBlur | (event) => void | - | Blur callback | | onFocus | (event) => void | - | Focus callback | | onKeyUp | (event) => void | - | KeyUp callback | | onKeyDown | (event) => void | - | KeyDown callback |

Advanced Props

| Prop | Type | Description | |------|------|-------------| | filterOptionsParam | (input, options, url?) => OptionType[] | Custom filter function | | urlFilterOptions | string | URL for server-side filtering |

Custom Filtering

const customFilter = (inputValue, optionList) => {
  return optionList?.filter(opt => 
    opt.value.includes(inputValue)
  ) || [];
};

<Dropdown
  filterOptionsParam={customFilter}
  // ...
/>

Server-side Filtering

const asyncFilter = async (inputValue, optionList, url) => {
  const response = await fetch(`${url}?search=${inputValue}`);
  return response.json();
};

<Dropdown
  filterOptionsParam={asyncFilter}
  urlFilterOptions="https://api.example.com/options"
  asyncOptionList
  // ...
/>

Running unit tests

Run nx test dropdown to execute the unit tests via Jest.