@bolttech/molecules-dropdown 0.25.0 → 0.25.1

package/README.md

@@ -67,6 +67,9 @@ The **Dropdown** component accepts the following props:
 | `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 |
 
 ## Functionality
 

package/index.cjs

@@ -2690,9 +2690,10 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder,
       onKeyUp,
       onKeyDown,
-      disableSearch
+      disableSearch,
+      asyncOptionList = false
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch", "asyncOptionList"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2735,14 +2736,14 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       const foundOption = optionList === null || optionList === void 0 ? void 0 : optionList.find(option => option.id === value);
       setInternalSelectedOption(foundOption);
       setInputValue((foundOption === null || foundOption === void 0 ? void 0 : foundOption.value) || '');
-      if (!onKeyUp && !onKeyDown) {
+      if (!asyncOptionList) {
         setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
       }
     }
     if (!isFirstRender || currentOptionList.length === 0) return;
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
-  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender, onKeyUp, onKeyDown]);
+  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender, onKeyUp, onKeyDown, asyncOptionList]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     id: `${id}-container`,
@@ -2815,9 +2816,10 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder,
       onKeyUp,
       onKeyDown,
-      disableSearch
+      disableSearch,
+      asyncOptionList = false
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "disableSearch", "asyncOptionList"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2864,7 +2866,7 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       })[0]) || undefined;
       setInternalSelectedOption(option);
       setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
-      if (!onKeyUp && !onKeyDown) {
+      if (!asyncOptionList) {
         setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
       }
       return;
@@ -2874,7 +2876,7 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       return optionsList.options.find(option => option.id === value);
     })[0] || undefined);
     setIsFirstRender(false);
-  }, [currentOptionList, value, optionList, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id, isFirstRender, onKeyUp, onKeyDown]);
+  }, [currentOptionList, value, optionList, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id, isFirstRender, asyncOptionList]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     "data-testid": `${dataTestId}-container`,

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
     "@bolttech/atoms-icon": "0.22.1",
-    "@bolttech/atoms-input": "0.21.1",
+    "@bolttech/atoms-input": "0.0.1",
     "@bolttech/atoms-select": "0.21.0",
-    "@bolttech/default-theme": "0.3.0",
+    "@bolttech/default-theme": "0.3.1",
     "@bolttech/form-engine": "0.10.3",
     "@bolttech/frontend-foundations": "0.3.1",
     "@bolttech/ui-utils": "0.2.4",

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

@@ -18,5 +18,6 @@ export declare const DropdownWithHeaders: import("react").ForwardRefExoticCompon
     urlFilterOptions?: string | undefined;
     onChange: (selectedOption?: OptionType | undefined) => void | import("react").Dispatch<import("react").SetStateAction<OptionType>>;
     value?: string | undefined;
+    asyncOptionList?: boolean | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default DropdownWithHeaders;

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

@@ -18,5 +18,6 @@ export declare const Dropdown: import("react").ForwardRefExoticComponent<Pick<im
     urlFilterOptions?: string | undefined;
     onChange: (selectedOption?: OptionType | undefined) => void | import("react").Dispatch<import("react").SetStateAction<OptionType>>;
     value?: string | undefined;
+    asyncOptionList?: boolean | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default Dropdown;

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

@@ -39,6 +39,7 @@ type DefaultDropdownProps = {
   @property urlFilterOptions - An optional string representing the url to fetch options
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
+  @property asyncOptionList - A boolean prop that controls a different behavior when OptionList are set by an API request
   */
 export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionType[];
@@ -90,6 +91,10 @@ export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'o
      */
     onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
     value?: string;
+    /**
+     * A boolean prop that controls a different behavior when OptionList are set by an API request
+     */
+    asyncOptionList?: boolean;
 };
 /**
   Props for DropdownOptionsWithHeaders component
@@ -99,6 +104,7 @@ export type DropdownProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'o
   @property urlFilterOptions - An optional string representing the url to fetch options
   @property setSelectedOption - A function to set the selected option
   @property selectedOption - An optional object representing the currently selected option
+  @property asyncOptionList - A boolean prop that controls a different behavior when OptionList are set by an API request
   */
 export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultProps & DefaultDropdownProps & {
     optionList?: OptionWithHeaderType[];
@@ -156,6 +162,10 @@ export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'on
      */
     onChange: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
     value?: string;
+    /**
+     * A boolean prop that controls a different behavior when OptionList are set by an API request
+     */
+    asyncOptionList?: boolean;
 };
 /**
   Props for ReusableDropdownComponent component