@bolttech/molecules-dropdown

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
usePortal	boolean	Renders the dropdown options in a portal (document.body), useful when inside overflow containers like modals. Defaults to false.

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.