@bolttech/molecules-dropdown 0.24.0 → 0.25.1

package/README.md

@@ -67,7 +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 |
-| `selectMaxHeight`        | `string`       | An optional string to indicate the select height  |
+| `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,10 +2690,10 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder,
       onKeyUp,
       onKeyDown,
-      selectMaxHeight,
-      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", "selectMaxHeight", "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([]);
@@ -2736,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`,
@@ -2792,8 +2792,7 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
           }
         },
         active: internalSelectedOption,
-        options: currentOptionList,
-        maxHeight: selectMaxHeight
+        options: currentOptionList
       }, uiUtils.applyDataAttributes(props, 'select')))
     })]
   }));
@@ -2817,10 +2816,10 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder,
       onKeyUp,
       onKeyDown,
-      selectMaxHeight,
-      disableSearch
+      disableSearch,
+      asyncOptionList = false
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "selectMaxHeight", "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([]);
@@ -2867,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;
@@ -2877,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`,
@@ -2918,8 +2917,7 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
           (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         },
         active: internalSelectedOption,
-        options: currentOptionList,
-        maxHeight: selectMaxHeight
+        options: currentOptionList
       }, uiUtils.applyDataAttributes(props, 'select')))
     })]
   }));

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.24.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-select": "0.20.0",
-    "@bolttech/default-theme": "0.3.0",
-    "@bolttech/form-engine": "0.5.0",
+    "@bolttech/atoms-input": "0.0.1",
+    "@bolttech/atoms-select": "0.21.0",
+    "@bolttech/default-theme": "0.3.1",
+    "@bolttech/form-engine": "0.10.3",
     "@bolttech/frontend-foundations": "0.3.1",
-    "@bolttech/ui-utils": "0.2.3",
+    "@bolttech/ui-utils": "0.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "6.1.1"

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

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

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

@@ -17,7 +17,6 @@ Default props for Dropdown component
 @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
-@property selectMaxHeight - An optional string to indicate the select height
 */
 type DefaultDropdownProps = {
     label: string;
@@ -29,7 +28,6 @@ type DefaultDropdownProps = {
     required?: boolean;
     variant?: StyleVariants;
     disableSearch?: boolean;
-    selectMaxHeight?: string;
     onBlur?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
     onFocus?: ((value?: unknown) => void) | ((evt: React.FocusEvent<HTMLElement, Element>) => void);
 };
@@ -41,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[];
@@ -92,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
@@ -101,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[];
@@ -158,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
@@ -172,7 +180,7 @@ export type DropdownWithHeadersProps = Pick<DOMAttributes<HTMLInputElement>, 'on
   @property setSelectedOptionOnInputValue - A function to set the selected option based on the input value
   @property inputRef - A ref to the input element of the dropdown
   */
-export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & Omit<DefaultDropdownProps, 'selectMaxHeight'> & {
+export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & DefaultDropdownProps & {
     setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;