@bolttech/molecules-dropdown 0.22.1 → 0.23.0

package/README.md

@@ -67,6 +67,7 @@ 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  |
 
 ## Functionality
 

package/index.cjs

@@ -2475,11 +2475,17 @@ const ReusableDropdownComponent = _a => {
       "$hasError": hasError,
       disabled: disabled,
       "data-testid": `${dataTestId}-dropdown-container`,
+      onMouseDown: e => {
+        var _a, _b;
+        e.preventDefault();
+        if (showSelectComponent === false) {
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        } else {
+          (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        }
+      },
       children: [jsxRuntime.jsxs(ContentDropdown, {
         children: [label && jsxRuntime.jsxs(FieldLabelAndRequiredLabelDropdown, {
-          onClick: () => {
-            setShowSelectComponent(disabled ? false : !showSelectComponent);
-          },
           children: [jsxRuntime.jsx("label", {
             htmlFor: `${id}-input`,
             className: "fieldLabel",
@@ -2524,15 +2530,10 @@ const ReusableDropdownComponent = _a => {
           }, uiUtils.applyDataAttributes(props, 'input')))
         })]
       }), jsxRuntime.jsx(ClickableElement, {
-        onClick: () => {
-          if (!disabled) {
-            setShowSelectComponent(!showSelectComponent);
-          }
-        },
         children: jsxRuntime.jsx(atomsIcon.Icon, {
           dataTestId: `${dataTestId}-icon`,
           size: sizeIcon,
-          icon: !showSelectComponent ? 'keyboard_arrow_down' : 'keyboard_arrow_up'
+          icon: showSelectComponent ? 'keyboard_arrow_up' : 'keyboard_arrow_down'
         })
       })]
     }), !showSelectComponent && hasError && errorMessage && jsxRuntime.jsx("div", {
@@ -2688,9 +2689,11 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onFocus,
       placeholder,
       onKeyUp,
-      onKeyDown
+      onKeyDown,
+      selectMaxHeight,
+      disableSearch
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "selectMaxHeight", "disableSearch"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2733,12 +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) || '');
-      setInputLabel((foundOption === null || foundOption === void 0 ? void 0 : foundOption.label) || '');
+      if (!onKeyUp && !onKeyDown) {
+        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]);
+  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption, optionList, isFirstRender, onKeyUp, onKeyDown]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     "$variant": variant,
     id: `${id}-container`,
@@ -2746,11 +2751,7 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     style: {
       maxWidth: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.style.width
     },
-    ref: ref,
-    onClick: () => {
-      var _a;
-      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
+    ref: ref
   }, uiUtils.applyDataAttributes(props), {
     children: [jsxRuntime.jsx(ReusableDropdownComponent, Object.assign({
       id: id,
@@ -2772,23 +2773,27 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onBlur: onBlur,
       onFocus: onFocus,
       onKeyUp: onKeyUp,
-      onKeyDown: onKeyDown
+      onKeyDown: onKeyDown,
+      disableSearch: disableSearch
     }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.Select, Object.assign({
         id: `${id}-select`,
         dataTestId: `${dataTestId}-select`,
         onChange: selectedValue => {
           var _a;
-          setInputValue(selectedValue.value);
-          setInputLabel(selectedValue.label);
-          setInternalSelectedOption(Object.assign({}, selectedValue));
-          reactDom.flushSync(() => {
-            onChange(selectedValue);
-          });
-          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+          if (!selectedValue.disabled) {
+            setInputValue(selectedValue.value);
+            setInputLabel(selectedValue.label);
+            setInternalSelectedOption(Object.assign({}, selectedValue));
+            reactDom.flushSync(() => {
+              onChange(selectedValue);
+            });
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+          }
         },
         active: internalSelectedOption,
-        options: currentOptionList
+        options: currentOptionList,
+        maxHeight: selectMaxHeight
       }, uiUtils.applyDataAttributes(props, 'select')))
     })]
   }));
@@ -2811,9 +2816,11 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onFocus,
       placeholder,
       onKeyUp,
-      onKeyDown
+      onKeyDown,
+      selectMaxHeight,
+      disableSearch
     } = _a,
-    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown"]);
+    props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder", "onKeyUp", "onKeyDown", "selectMaxHeight", "disableSearch"]);
   const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
@@ -2860,7 +2867,9 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       })[0]) || undefined;
       setInternalSelectedOption(option);
       setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
-      setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      if (!onKeyUp && !onKeyDown) {
+        setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      }
       return;
     }
     if (!isFirstRender || currentOptionList.length === 0) return;
@@ -2868,12 +2877,8 @@ 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]);
+  }, [currentOptionList, value, optionList, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id, isFirstRender, onKeyUp, onKeyDown]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
-    onClick: () => {
-      var _a;
-      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    },
     "$variant": variant,
     "data-testid": `${dataTestId}-container`,
     ref: ref
@@ -2897,7 +2902,8 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       onBlur: onBlur,
       onFocus: onFocus,
       onKeyUp: onKeyUp,
-      onKeyDown: onKeyDown
+      onKeyDown: onKeyDown,
+      disableSearch: disableSearch
     }, props)), showSelectComponent && !disabled && jsxRuntime.jsx(DropdownOptionsContainer, {
       children: jsxRuntime.jsx(atomsSelect.SelectWithHeaders, Object.assign({
         dataTestId: `${dataTestId}-select`,
@@ -2912,7 +2918,8 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
           (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
         },
         active: internalSelectedOption,
-        options: currentOptionList
+        options: currentOptionList,
+        maxHeight: selectMaxHeight
       }, uiUtils.applyDataAttributes(props, 'select')))
     })]
   }));

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "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.19.3",
-    "@bolttech/default-theme": "0.1.1",
+    "@bolttech/atoms-select": "0.1.0",
+    "@bolttech/default-theme": "0.3.0",
     "@bolttech/form-engine": "0.5.0",
     "@bolttech/frontend-foundations": "0.3.1",
-    "@bolttech/ui-utils": "0.2.2",
+    "@bolttech/ui-utils": "0.2.3",
     "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,6 +10,7 @@ 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;
 } & {

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

@@ -10,6 +10,7 @@ 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;
 } & {

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

@@ -17,6 +17,7 @@ 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;
@@ -28,6 +29,7 @@ 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);
 };
@@ -170,7 +172,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'> & DefaultDropdownProps & {
+export type ReusableDropdownComponentProps = DefaultProps & Pick<DOMAttributes<HTMLInputElement>, 'onKeyUp' | 'onKeyDown'> & Omit<DefaultDropdownProps, 'selectMaxHeight'> & {
     setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
     showSelectComponent: boolean;
     onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;