@bolttech/molecules-dropdown 0.17.0 → 0.17.2

package/index.cjs

@@ -2484,6 +2484,7 @@ const ReusableDropdownComponent = _a => {
             value: inputLabel,
             variant: variant,
             placeholder: placeholder,
+            autoComplete: "off",
             onChange: e => {
               var _a, _b;
               onChangeInputValue(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || '');
@@ -2667,12 +2668,12 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder
     } = _a,
     props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "id", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
+  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
   const [inputLabel, setInputLabel] = react.useState('');
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
-  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2699,10 +2700,14 @@ const Dropdown = /*#__PURE__*/react.forwardRef((_a, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalSelectedOption]);
   react.useEffect(() => {
+    if (value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
+      setInternalSelectedOption(optionList === null || optionList === void 0 ? void 0 : optionList.find(option => option.id === value));
+      return;
+    }
     if (!isFirstRender || currentOptionList.length === 0) return;
     setInternalSelectedOption(currentOptionList.find(option => option.id === value));
     setIsFirstRender(false);
-  }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
+  }, [currentOptionList, setSelectedOptionOnInputValue, value, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id, optionList, isFirstRender]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;
@@ -2774,12 +2779,12 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
       placeholder
     } = _a,
     props = __rest(_a, ["label", "variant", "required", "optionList", "disabled", "errorMessage", "urlFilterOptions", "dataTestId", "filterOptionsParam", "value", "onChange", "onBlur", "onFocus", "placeholder"]);
+  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const [showSelectComponent, setShowSelectComponent] = react.useState(false);
   const [currentOptionList, setCurrentOptionList] = react.useState([]);
   const [inputValue, setInputValue] = react.useState('');
   const [inputLabel, setInputLabel] = react.useState('');
   const [internalSelectedOption, setInternalSelectedOption] = react.useState();
-  const [isFirstRender, setIsFirstRender] = react.useState(true);
   const inputRef = react.useRef(null);
   react.useEffect(() => {
     const normalizeOptionList = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -2810,12 +2815,21 @@ const DropdownWithHeaders = /*#__PURE__*/react.forwardRef((_a, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [internalSelectedOption]);
   react.useEffect(() => {
+    if (value !== (internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id)) {
+      const option = (optionList === null || optionList === void 0 ? void 0 : optionList.map(currentOptionsList => {
+        return currentOptionsList.options.find(option => option.id === value);
+      })[0]) || undefined;
+      setInternalSelectedOption(option);
+      setInputValue((option === null || option === void 0 ? void 0 : option.value) || '');
+      setInputLabel((option === null || option === void 0 ? void 0 : option.label) || '');
+      return;
+    }
     if (!isFirstRender || currentOptionList.length === 0) return;
     setInternalSelectedOption(currentOptionList.map(optionsList => {
       return optionsList.options.find(option => option.id === value);
     })[0] || undefined);
     setIsFirstRender(false);
-  }, [currentOptionList, isFirstRender, setSelectedOptionOnInputValue, value]);
+  }, [currentOptionList, value, optionList, internalSelectedOption === null || internalSelectedOption === void 0 ? void 0 : internalSelectedOption.id, isFirstRender]);
   return jsxRuntime.jsxs(SectionContainer, Object.assign({
     onClick: () => {
       var _a;

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@bolttech/molecules-dropdown",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "main": "./index.cjs",
   "type": "commonjs",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@bolttech/atoms-icon": "0.21.0",
-    "@bolttech/atoms-input": "0.20.0",
-    "@bolttech/atoms-select": "0.18.0",
-    "@bolttech/default-theme": "0.0.1",
+    "@bolttech/atoms-icon": "0.21.2",
+    "@bolttech/atoms-input": "0.20.1",
+    "@bolttech/atoms-select": "0.18.1",
+    "@bolttech/default-theme": "0.0.3",
     "@bolttech/form-engine": "0.5.0",
-    "@bolttech/frontend-foundations": "0.0.1",
-    "@bolttech/ui-utils": "0.1.1",
+    "@bolttech/frontend-foundations": "0.1.1",
+    "@bolttech/ui-utils": "0.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "styled-components": "5.3.6"