Dropdown Component

The Dropdown component is a customizable React component that provides a dropdown input with a list of selectable options.

Installation

To use the Dropdown component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-dropdown

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-dropdown

Usage

You can utilize the Dropdown component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import { Dropdown } from '@bolttech/molecules-dropdown'; // Adjust the path to your component

const options = [
  { id: '1', label: 'Option 1', value: 'option1' },
  { id: '2', label: 'Option 2', value: 'option2' },
  { id: '3', label: 'Option 3', value: 'option3' },
];

function App() {
  const handleOptionChange = (selectedOption) => {
    console.log('Selected option:', selectedOption);
  };

  return (
    <div>
      <Dropdown label="Select an option" optionList={options} value="option2" onChange={handleOptionChange} />
    </div>
  );
}

export default App;

Props

The Dropdown component accepts the following props:

| Prop | Type | Description | | -------------------- | -------------- | --------------------------------------------------------------------------------------------- | | label | string | Label for the dropdown. | | variant | string | Variant style of the dropdown. Defaults to 'grey'. | | required | boolean | Whether the dropdown is required or not. | | optionList | OptionType[] | Array of selectable options for the dropdown. | | disabled | boolean | Whether the dropdown is disabled or not. | | errorMessage | string | Error message to display when there's an error with the dropdown. | | urlFilterOptions | string | URL for fetching filtered options based on input. | | id | string | Component identification. | | dataTestId | string | The data-testid attribute for testing purposes. | | filterOptionsParam | function | Function to filter options based on input and URL. | | value | string | Currently selected value. | | onChange | function | Callback function triggered when the selected option changes. | | onBlur | function | Callback function triggered when the dropdown loses focus. | | onFocus | function | Callback function triggered when the dropdown is focused. | | placeholder | string | Placeholder text for the input. | | disableSearch | boolean | Boolean that represent if we should disable user searching on the dropdown. Defaults to false | | onKeyUp | function | The onkeyup event occurs when the user releases a key on the keyboard | | onKeyDown | boolean | Onkeydown is an event handler in Javascript that gets called when a key is pressed on the keyboard | | asyncOptionList | boolean | A boolean prop that controls a different behavior when OptionList are set by an API request | | helperMessage | string | An optional string to display as a helper message for the dropdown |

Functionality

The Dropdown component provides the following functionality:

• Option Selection: Allows the user to select an option from the dropdown.
• Input Interaction: The input field can be focused, blurred, and modified.
• Filtering: Supports dynamic option filtering based on input and URL.
• Accessibility: Proper accessibility structure is maintained for interacting with the dropdown.

Contribution

Contributions to the Dropdown component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.