@bolttech/molecules-dropdown 0.19.0 → 0.20.1

package/README.md

@@ -22,7 +22,7 @@ You can utilize the **Dropdown** component by importing it and including it in y
 
 ```jsx
 import React from 'react';
-import {Dropdown} from '@bolttech/molecules-dropdown'; // Adjust the path to your component
+import { Dropdown } from '@bolttech/molecules-dropdown'; // Adjust the path to your component
 
 const options = [
   { id: '1', label: 'Option 1', value: 'option1' },
@@ -37,12 +37,7 @@ function App() {
 
   return (
     <div>
-      <Dropdown
-        label="Select an option"
-        optionList={options}
-        value="option2"
-        onChange={handleOptionChange}
-      />
+      <Dropdown label="Select an option" optionList={options} value="option2" onChange={handleOptionChange} />
     </div>
   );
 }
@@ -54,23 +49,24 @@ export default App;
 
 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.                                                                         |
+| 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 |
 
 ## Functionality
 

package/index.cjs

@@ -2455,12 +2455,13 @@ const ReusableDropdownComponent = _a => {
       setShowSelectComponent,
       showSelectComponent,
       setSelectedOptionOnInputValue,
+      disableSearch = false,
       inputRef,
       placeholder,
       onBlur,
       onFocus
     } = _a,
-    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "inputRef", "placeholder", "onBlur", "onFocus"]);
+    props = __rest(_a, ["id", "dataTestId", "label", "variant", "required", "inputValue", "inputLabel", "disabled", "errorMessage", "onChangeInputValue", "onChangeInputLabel", "setShowSelectComponent", "showSelectComponent", "setSelectedOptionOnInputValue", "disableSearch", "inputRef", "placeholder", "onBlur", "onFocus"]);
   const hasError = !!errorMessage;
   // we have to type cast because of jest. when testing it sets the type of useTheme to DefaultTheme
   const theme = /*#__PURE__*/styled.useTheme();
@@ -2497,6 +2498,8 @@ const ReusableDropdownComponent = _a => {
             "$variant": variant,
             placeholder: placeholder,
             autoComplete: "off",
+            inputMode: disableSearch ? 'none' : 'text',
+            readOnly: disableSearch,
             onChange: e => {
               var _a, _b;
               onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
@@ -2518,7 +2521,9 @@ const ReusableDropdownComponent = _a => {
         })]
       }), jsxRuntime.jsx(ClickableElement, {
         onClick: () => {
-          if (!disabled) setShowSelectComponent(!showSelectComponent);
+          if (!disabled) {
+            setShowSelectComponent(!showSelectComponent);
+          }
         },
         children: jsxRuntime.jsx(atomsIcon.Icon, {
           dataTestId: `${dataTestId}-icon`,
@@ -2688,11 +2693,17 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
   const inputRef = react.useRef(null);
   react.useEffect(() => {
-    const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
-      return yield filterOptionsParam(inputValue, optionList, urlFilterOptions);
-    });
-    normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
-  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue]);
+    if ((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) === inputValue) {
+      setCurrentOptionList([]);
+    } else {
+      const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
+        return yield filterOptionsParam(inputValue, optionList, urlFilterOptions);
+      });
+      normalizeOptionList().then(optionsResponse => {
+        setCurrentOptionList([...optionsResponse]);
+      }).catch(error => console.error('An error happens when trying to normalize options', error));
+    }
+  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value]);
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && internalSelectedOption) {
       setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');
@@ -2723,17 +2734,17 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     setIsFirstRender(false);
   }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
-    onClick: () => {
-      var _a;
-      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    },
     "$variant": variant,
     id: `${id}-container`,
     "data-testid": `${dataTestId}-container`,
     style: {
       maxWidth: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.style.width
     },
-    ref: ref
+    ref: ref,
+    onClick: () => {
+      var _a;
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
   }, uiUtils.applyDataAttributes(props), {
     children: [jsxRuntime.jsx(ReusableDropdownComponent, Object.assign({
       id: id,
@@ -2801,11 +2812,15 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
   const inputRef = react.useRef(null);
   react.useEffect(() => {
-    const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
-      return yield filterOptionsParam(inputValue, optionList, urlFilterOptions);
-    });
-    normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
-  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue]);
+    if ((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) === inputValue) {
+      setCurrentOptionList([]);
+    } else {
+      const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
+        return yield filterOptionsParam(inputValue, optionList, urlFilterOptions);
+      });
+      normalizeOptionList().then(optionsResponse => setCurrentOptionList([...optionsResponse])).catch(error => console.error('An error happens when trying to normalize options', error));
+    }
+  }, [filterOptionsParam, optionList, urlFilterOptions, inputValue, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value]);
   const setSelectedOptionOnInputValue = react.useCallback(() => {
     if (!inputValue && internalSelectedOption) {
       setInputValue((internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.value) || '');

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.22.0",
-    "@bolttech/atoms-input": "0.21.0",
-    "@bolttech/atoms-select": "0.19.1",
-    "@bolttech/default-theme": "0.1.0",
+    "@bolttech/atoms-icon": "0.22.1",
+    "@bolttech/atoms-input": "0.0.1",
+    "@bolttech/atoms-select": "0.19.3",
+    "@bolttech/default-theme": "0.1.1",
     "@bolttech/form-engine": "0.5.0",
-    "@bolttech/frontend-foundations": "0.2.1",
-    "@bolttech/ui-utils": "0.2.0",
+    "@bolttech/frontend-foundations": "0.3.1",
+    "@bolttech/ui-utils": "0.2.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "6.1.1"

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

@@ -9,6 +9,7 @@ export declare const DropdownWithHeaders: import("react").ForwardRefExoticCompon
     errorMessage?: string | undefined;
     required?: boolean | undefined;
     variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
+    disableSearch?: boolean | 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;
 } & {

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

@@ -9,6 +9,7 @@ export declare const Dropdown: import("react").ForwardRefExoticComponent<import(
     errorMessage?: string | undefined;
     required?: boolean | undefined;
     variant?: import("./molecules-dropdown.type").StyleVariants | undefined;
+    disableSearch?: boolean | 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;
 } & {

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

@@ -16,6 +16,7 @@ Default props for Dropdown component
 @property errorMessage - An optional string to display as an error message for the dropdown
 @property required - An optional boolean to indicate if the dropdown is required
 @property variant - An optional string to set the variant of the dropdown
+@property disableSearch - An optional boolean representing if the user can type and mobile phones should show the keyboard
 */
 type DefaultDropdownProps = {
     label: string;
@@ -26,6 +27,7 @@ type DefaultDropdownProps = {
     errorMessage?: string;
     required?: boolean;
     variant?: StyleVariants;
+    disableSearch?: boolean;
     onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
     onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
 };

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

@@ -1,2 +1,2 @@
 import { ReusableDropdownComponentProps } from './molecules-dropdown.type';
-export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, placeholder, onBlur, onFocus, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReusableDropdownComponent: ({ id, dataTestId, label, variant, required, inputValue, inputLabel, disabled, errorMessage, onChangeInputValue, onChangeInputLabel, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, disableSearch, inputRef, placeholder, onBlur, onFocus, ...props }: ReusableDropdownComponentProps) => import("react/jsx-runtime").JSX.Element;