@bolttech/molecules-dropdown 0.10.0 → 0.13.0

package/README.md

@@ -1,7 +1,86 @@
-# molecules-dropdown
+# Dropdown Component
 
-This library was generated with [Nx](https://nx.dev).
+The **Dropdown** component is a customizable React component that provides a dropdown input with a list of selectable options.
 
-## Running unit tests
+## Installation
 
-Run `nx test molecules-dropdown` to execute the unit tests via [Jest](https://jestjs.io).
+To use the **Dropdown** component, you need to install the required dependencies:
+
+```bash
+npm install @edirect/frontend-foundations @bolttech/molecules-dropdown
+```
+
+or
+
+```bash
+yarn add @edirect/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:
+
+```jsx
+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.                                                                         |
+
+## 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.

package/index.cjs

@@ -2632,7 +2632,7 @@ function filterOptionsWithHeaders(inputValue, optionList) {
   });
 }
 
-const Dropdown = ({
+const Dropdown = /*#__PURE__*/react.forwardRef(({
   label,
   variant: _variant = 'grey',
   required,
@@ -2648,7 +2648,7 @@ const Dropdown = ({
   onBlur,
   onFocus,
   placeholder
-}) => {
+}, ref) => {
   var _a;
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2697,6 +2697,7 @@ const Dropdown = ({
     style: {
       maxWidth: (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.style.width
     },
+    ref: ref,
     children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       id: _id,
       dataTestId: _dataTestId,
@@ -2735,9 +2736,9 @@ const Dropdown = ({
       })
     })]
   });
-};
+});
 
-const DropdownWithHeaders = ({
+const DropdownWithHeaders = /*#__PURE__*/react.forwardRef(({
   label,
   variant: _variant = 'grey',
   required,
@@ -2752,7 +2753,7 @@ const DropdownWithHeaders = ({
   onBlur,
   onFocus,
   placeholder
-}) => {
+}, ref) => {
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
@@ -2802,6 +2803,7 @@ const DropdownWithHeaders = ({
     },
     variant: _variant,
     "data-testid": `${dataTestId}-container`,
+    ref: ref,
     children: [jsxRuntime.jsx(ReusableDropdownComponent, {
       label: label,
       variant: _variant,
@@ -2838,7 +2840,7 @@ const DropdownWithHeaders = ({
       })
     })]
   });
-};
+});
 
 exports.Dropdown = Dropdown;
 exports.DropdownWithHeaders = DropdownWithHeaders;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.10.0",
+  "version": "0.13.0",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.6.0",
-    "@bolttech/atoms-input": "0.11.0",
-    "@bolttech/atoms-select": "0.2.0",
-    "@edirect/frontend-foundations": "0.0.58",
+    "@bolttech/atoms-icon": "0.19.0",
+    "@bolttech/atoms-input": "0.16.0",
+    "@bolttech/atoms-select": "0.16.0",
+    "@edirect/frontend-foundations": "0.0.67",
     "jest-styled-components": "7.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/molecules-dropdown-with-header-options.d.ts

@@ -1,3 +1,21 @@
 /// <reference types="react" />
-import { DropdownWithHeadersProps } from './molecules-dropdown.type';
-export declare const DropdownWithHeaders: ({ label, variant, required, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, value, onChange, onBlur, onFocus, placeholder, }: DropdownWithHeadersProps) => JSX.Element;
+import { OptionWithHeaderType, OptionType } from '@bolttech/atoms-select';
+export declare const DropdownWithHeaders: import("react").ForwardRefExoticComponent<{
+    label: string;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    dataTestId?: string | undefined;
+    errorMessage?: string | undefined;
+    required?: boolean | undefined;
+    variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
+    onBlur?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
+    onFocus?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
+} & {
+    optionList?: OptionWithHeaderType[] | undefined;
+    filterOptionsParam?: ((inputValue: string, optionList?: OptionWithHeaderType[] | undefined, urlValue?: string | undefined) => OptionWithHeaderType[] | Promise<OptionWithHeaderType[]>) | undefined;
+    urlFilterOptions?: string | undefined;
+    onChange: (selectedOption?: OptionType | undefined) => void | import("react").Dispatch<import("react").SetStateAction<OptionType>>;
+    value?: string | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default DropdownWithHeaders;

package/src/lib/molecules-dropdown.d.ts

@@ -1,3 +1,21 @@
 /// <reference types="react" />
-import { DropdownProps } from './molecules-dropdown.type';
-export declare const Dropdown: ({ label, variant, required, optionList, disabled, errorMessage, urlFilterOptions, id, dataTestId, filterOptionsParam, value, onChange, onBlur, onFocus, placeholder, }: DropdownProps) => JSX.Element;
+import { OptionType } from '@bolttech/atoms-select';
+export declare const Dropdown: import("react").ForwardRefExoticComponent<{
+    label: string;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    dataTestId?: string | undefined;
+    errorMessage?: string | undefined;
+    required?: boolean | undefined;
+    variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
+    onBlur?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
+    onFocus?: ((value?: unknown) => void) | ((evt: import("react").FocusEvent<HTMLElement, Element>) => void) | undefined;
+} & {
+    optionList?: OptionType[] | undefined;
+    filterOptionsParam?: ((inputValue: string, optionList?: OptionType[] | undefined, urlValue?: string | undefined) => OptionType[] | Promise<OptionType[]>) | undefined;
+    urlFilterOptions?: string | undefined;
+    onChange: (selectedOption?: OptionType | undefined) => void | import("react").Dispatch<import("react").SetStateAction<OptionType>>;
+    value?: string | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export default Dropdown;