@northlight/ui 2.24.1 → 2.24.3

package/dist/umd/northlight.cjs

@@ -12199,6 +12199,7 @@
       "data-testid": testId,
       customOption = null,
       customTag = null,
+      isClearable = false,
       value,
       icon
     } = _b, rest = __objRest$l(_b, [
@@ -12212,6 +12213,7 @@
       "data-testid",
       "customOption",
       "customTag",
+      "isClearable",
       "value",
       "icon"
     ]);
@@ -12243,7 +12245,7 @@
         useBasicStyles: true,
         closeMenuOnSelect: !isMulti,
         hideSelectedOptions: false,
-        isClearable: false,
+        isClearable,
         onChange: handleChange,
         selectedOptionStyle: "check",
         chakraStyles: customSelectStyles,
@@ -13809,18 +13811,35 @@
     onOptionChange,
     width = "100%",
     variant = "outline",
-    initialValue = ""
+    initialValue
   }) => {
     const initialSelectedOption = React.useMemo(
-      () => standardOptions.find(
-        (option) => option.value === initialValue
-      ) || null,
+      () => {
+        var _a;
+        if (ramda.isNil(initialValue)) {
+          return null;
+        }
+        return (_a = standardOptions.find((option) => option.value === initialValue)) != null ? _a : null;
+      },
       []
     );
     const [selectedOption, setSelectedOption] = React.useState(initialSelectedOption);
     const [newOptionText, setNewOptionText] = React.useState("");
     const [newOptionPlaceholder, setNewOptionPlaceholder] = React.useState(initialPlaceholder);
     const [createdOptions, setCreatedOptions] = React.useState([]);
+    function isCreationOption(option) {
+      return option && typeof option.isCreation === "boolean";
+    }
+    const ref = React.useRef(null);
+    react.useOutsideClick({
+      ref,
+      handler: () => {
+        if (isCreationOption(selectedOption)) {
+          setSelectedOption(initialSelectedOption);
+          setNewOptionPlaceholder(initialPlaceholder);
+        }
+      }
+    });
     const handleInputChange = (newValue) => {
       setNewOptionText(newValue);
     };
@@ -13836,9 +13855,6 @@
       setNewOptionText("");
       setNewOptionPlaceholder(initialPlaceholder);
     };
-    function isCreationOption(option) {
-      return option && typeof option.isCreation === "string";
-    }
     const handleChange = (newValue, _actionMeta) => {
       const option = newValue;
       if (option === null) {
@@ -13846,11 +13862,10 @@
       }
       if (isCreationOption(option)) {
         setNewOptionPlaceholder(addOptionPlaceholder);
-        setSelectedOption(null);
       } else {
         setNewOptionPlaceholder(initialPlaceholder);
-        setSelectedOption(option);
       }
+      setSelectedOption(option);
       onOptionChange(option);
     };
     const handleKeyDown = (event) => {
@@ -13862,11 +13877,11 @@
     const combinedOptions = [...standardOptions, ...createdOptions];
     const customOptions = [
       __spreadProps(__spreadValues({}, creationOption), {
-        icon: /* @__PURE__ */ React.createElement(Icon$1, { as: icons.PlusSolid, color: "brand" })
+        icon: /* @__PURE__ */ React.createElement(react.Icon, { as: icons.PlusSolid, color: "brand" })
       }),
       ...combinedOptions
     ];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { ref }, /* @__PURE__ */ React.createElement(
       chakraReactSelect.CreatableSelect,
       {
         chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
@@ -13890,7 +13905,7 @@
         useBasicStyles: true,
         variant
       }
-    );
+    ));
   };
 
   Object.defineProperty(exports, 'AbsoluteCenter', {