@northlight/ui 2.23.0 → 2.24.0

package/dist/umd/northlight.cjs

@@ -13808,9 +13808,16 @@
     },
     onOptionChange,
     width = "100%",
-    variant = "outline"
+    variant = "outline",
+    initialValue = ""
   }) => {
-    const [selectedOption, setSelectedOption] = React.useState(null);
+    const initialSelectedOption = React.useMemo(
+      () => standardOptions.find(
+        (option) => option.value === initialValue
+      ) || null,
+      []
+    );
+    const [selectedOption, setSelectedOption] = React.useState(initialSelectedOption);
     const [newOptionText, setNewOptionText] = React.useState("");
     const [newOptionPlaceholder, setNewOptionPlaceholder] = React.useState(initialPlaceholder);
     const [createdOptions, setCreatedOptions] = React.useState([]);
@@ -13832,7 +13839,8 @@
     function isCreationOption(option) {
       return option && typeof option.isCreation === "string";
     }
-    const handleChange = (option) => {
+    const handleChange = (newValue, _actionMeta) => {
+      const option = newValue;
       if (option === null) {
         return;
       }
@@ -13861,18 +13869,19 @@
     return /* @__PURE__ */ React.createElement(
       chakraReactSelect.CreatableSelect,
       {
-        chakraStyles: {
+        chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
           container: (provided) => __spreadProps(__spreadValues({}, provided), {
             width
           }),
           option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
             color: "black"
           })
-        },
+        }),
         components: customComponents,
         options: customOptions,
         value: selectedOption,
         onChange: handleChange,
+        isMulti: false,
         onInputChange: handleInputChange,
         onKeyDown: handleKeyDown,
         onCreateOption: handleCreateOption,