opus-toolkit-components 0.2.9 → 0.3.0

package/lib/{main.cbe51cd922acdf7e3218.js → main.13234ba8805408d911a7.js}

@@ -9020,33 +9020,41 @@ function Dropdown(_ref) {
     onChange,
     value
   } = _ref;
-  const [selectedItem, setSelectedItem] = (0,external_react_.useState)(value); // Initialize to null
-
+  const initialSelectedItem = items.find(item => item.value === value) || null;
+  const [selectedItem, setSelectedItem] = (0,external_react_.useState)(initialSelectedItem);
+  (0,external_react_.useEffect)(() => {
+    const newSelectedItem = items.find(item => item.value === value) || null;
+    setSelectedItem(newSelectedItem);
+  }, [value, items]);
   const inputClasses = `inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white border px-4 py-3 text-md font-normal text-gray-900 ${isValid ? 'border-slate-500' : 'border-rose-500'}`;
   const handleSelect = item => {
-    setSelectedItem(item); // Store the whole item
-
-    // Create a synthetic event
+    setSelectedItem(item);
     const event = {
       target: {
         name: name,
-        value: item.value // Use the value of the selected item
+        value: item.value
       }
     };
-    onChange(event); // Pass the synthetic event object
+    onChange(event);
   };
   return /*#__PURE__*/external_react_default().createElement(rn, {
     as: "div",
     className: "relative inline-block text-left",
     name: name
   }, /*#__PURE__*/external_react_default().createElement("label", null, label), /*#__PURE__*/external_react_default().createElement("div", null, /*#__PURE__*/external_react_default().createElement(It, {
-    className: inputClasses
-  }, selectedItem ? selectedItem.label : placeholder, " ", /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
+    className: inputClasses,
+    style: {
+      backgroundColor: 'white'
+    }
+  }, selectedItem ? selectedItem.label : placeholder, /*#__PURE__*/external_react_default().createElement(esm_ChevronDownIcon, {
     "aria-hidden": "true",
     className: "-mr-1 h-5 w-5 text-gray-400"
   }))), /*#__PURE__*/external_react_default().createElement(gt, {
     transition: true,
-    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none"
+    className: "absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition focus:outline-none",
+    style: {
+      backgroundColor: 'white'
+    }
   }, /*#__PURE__*/external_react_default().createElement("div", {
     className: "py-1"
   }, items.map((item, index) => /*#__PURE__*/external_react_default().createElement(Et, {
@@ -9056,15 +9064,13 @@ function Dropdown(_ref) {
       active
     } = _ref2;
     return /*#__PURE__*/external_react_default().createElement("button", {
-      type: "button" // Prevent form submission
-      ,
-      onClick: () => handleSelect(item) // Pass the whole item to handleSelect
-      ,
+      type: "button",
+      onClick: () => handleSelect(item),
       className: `block w-full px-4 py-2 text-left text-sm text-gray-700 ${active ? 'bg-gray-100 text-gray-900' : ''}`
     }, item.label);
   })))), !isValid && /*#__PURE__*/external_react_default().createElement("span", {
     className: "text-rose-500 text-sm"
-  }));
+  }, "Please select a valid option"));
 }
 ;// ./src/index.js
 
@@ -9079,4 +9085,4 @@ function Dropdown(_ref) {
 /******/ })()
 ;
 });
-//# sourceMappingURL=main.cbe51cd922acdf7e3218.js.map
+//# sourceMappingURL=main.13234ba8805408d911a7.js.map