@northlight/ui 2.26.1 → 2.27.0

package/dist/umd/northlight.cjs

@@ -9997,7 +9997,15 @@
       }
     return a;
   };
-  const EditableControls = ({ size }) => {
+  const mapEditableVariantsToButtonSubmitVariants = {
+    brand: "brand",
+    default: "success"
+  };
+  const mapEditableVariantsToButtonCancelVariants = {
+    brand: "ghost",
+    default: "danger"
+  };
+  const EditableControls = ({ size, variant = "default" }) => {
     const {
       getSubmitButtonProps,
       getCancelButtonProps
@@ -10009,7 +10017,7 @@
       __spreadValues$O({
         "aria-label": "Cancel",
         sx: button,
-        variant: "danger"
+        variant: mapEditableVariantsToButtonCancelVariants[variant]
       }, getCancelButtonProps()),
       /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: icons.XCloseSolid })
     ), /* @__PURE__ */ React.createElement(
@@ -10017,7 +10025,7 @@
       __spreadValues$O({
         "aria-label": "Save",
         sx: button,
-        variant: "success"
+        variant: mapEditableVariantsToButtonSubmitVariants[variant]
       }, getSubmitButtonProps()),
       /* @__PURE__ */ React.createElement(Icon$1, { sx: icon, as: icons.CheckDuo })
     )) : /* @__PURE__ */ React.createElement(
@@ -10065,12 +10073,14 @@
       size = "md",
       value: inputValue,
       onSubmit,
-      leftItem
+      leftItem,
+      variant = "default"
     } = _b, rest = __objRest$E(_b, [
       "size",
       "value",
       "onSubmit",
-      "leftItem"
+      "leftItem",
+      "variant"
     ]);
     const [value, setValue] = React.useState(inputValue);
     const { input, preview } = react.useMultiStyleConfig("EditableText", { size, value });
@@ -10099,7 +10109,7 @@
           size,
           sx: input
         }
-      ), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size })))
+      ), /* @__PURE__ */ React.createElement(react.InputRightElement, { sx: { width: "min-content" } }, /* @__PURE__ */ React.createElement(EditableControls, { size, variant })))
     );
   };
 
@@ -13840,10 +13850,28 @@
       }
     return target;
   };
+  const { Option: ChakraOption } = chakraReactSelect.chakraComponents;
   const customComponents = {
     Option: (_a) => {
       var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-      return /* @__PURE__ */ React.createElement(chakraReactSelect.chakraComponents.Option, __spreadValues$1({}, props), /* @__PURE__ */ React.createElement(React.Fragment, null, props.data.isCreation ? /* @__PURE__ */ React.createElement(react.Flex, { mr: 3, width: 1.5, mb: 0.5, justifyContent: "center", alignItems: "center" }, /* @__PURE__ */ React.createElement(Icon$1, { mb: "4px", as: icons.PlusSolid, color: "brand" })) : /* @__PURE__ */ React.createElement(react.Box, { mr: 3, width: 1.5 }), children));
+      return /* @__PURE__ */ React.createElement(ChakraOption, __spreadValues$1({}, props), props.data.isCreation && /* @__PURE__ */ React.createElement(
+        react.Flex,
+        {
+          mr: 3,
+          width: 1.5,
+          mb: 0.5,
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        /* @__PURE__ */ React.createElement(Icon$1, { as: icons.PlusSolid, color: "brand" })
+      ), !props.data.isCreation && /* @__PURE__ */ React.createElement(react.Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React.createElement(
+        react.Text,
+        {
+          color: props.data.isCreation ? "text.brand" : "text.default",
+          fontWeight: props.data.isCreation ? "semibold" : "normal"
+        },
+        children
+      ));
     }
   };
 
@@ -13866,70 +13894,67 @@
     return a;
   };
   var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+  const CREATION_OPTION_VALUE = "add_field";
   const CreatableSelectDropdown = ({
     standardOptions,
     initialPlaceholder = "Select or create...",
-    addOptionPlaceholder = "Enter text...",
+    addOptionPlaceholder = "Select or create...",
     creationOption = {
-      label: "Add option...",
-      value: "Add option...",
+      label: "Add field",
+      value: CREATION_OPTION_VALUE,
       isCreation: true
     },
     onOptionChange,
-    width = "100%",
     variant = "outline",
     defaultValue,
     value,
     menuPlacement = "bottom"
   }) => {
-    const initialSelectedOption = React.useMemo(
-      () => {
-        var _a, _b;
-        if (!ramda.isNil(value)) {
-          return (_a = standardOptions.find((option) => option.value === value)) != null ? _a : null;
-        }
-        if (!ramda.isNil(defaultValue)) {
-          return (_b = standardOptions.find((option) => option.value === defaultValue)) != null ? _b : null;
-        }
-        return null;
-      },
-      [value]
-    );
-    const [selectedOption, setSelectedOption] = React.useState(initialSelectedOption);
-    const [newOptionText, setNewOptionText] = React.useState("");
+    const [selectedOption, setSelectedOption] = React.useState(() => {
+      var _a, _b;
+      const targetValue = (_a = value != null ? value : defaultValue) != null ? _a : null;
+      return targetValue ? (_b = standardOptions.find((option) => option.value === targetValue)) != null ? _b : null : null;
+    });
     const [newOptionPlaceholder, setNewOptionPlaceholder] = React.useState(initialPlaceholder);
     const [createdOptions, setCreatedOptions] = React.useState([]);
+    const [createNewOption, setCreateNewOption] = React.useState(false);
+    const [addFieldInputValue, setAddFieldInputValue] = 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 checkIfNewOptionTextExistsInOptions = (string, options) => ramda.any((option) => ramda.toLower(option.value) === string, options);
+    const handleCreateOption = (newOptionTextString) => {
+      setCreateNewOption(true);
+      if (ramda.isEmpty(ramda.trim(newOptionTextString))) {
+        return;
       }
-    });
-    const handleInputChange = (newValue) => {
-      setNewOptionText(newValue);
-    };
-    const handleCreateOption = () => {
-      const newOptionTextLower = newOptionText.toLowerCase();
-      const newOptionExists = standardOptions.some((option) => option.value.toLowerCase() === newOptionTextLower);
-      if (!newOptionExists) {
-        const newOption = { label: newOptionText, value: newOptionText };
-        setCreatedOptions((currentCreatedOptions) => [...currentCreatedOptions, newOption]);
+      const newOptionTextLower = ramda.toLower(newOptionTextString);
+      const newOptionExistsInStandardOptions = checkIfNewOptionTextExistsInOptions(newOptionTextLower, standardOptions);
+      const newOptionExistsInCreatedOptions = checkIfNewOptionTextExistsInOptions(
+        newOptionTextLower,
+        createdOptions
+      );
+      if (!newOptionExistsInCreatedOptions && !newOptionExistsInStandardOptions) {
+        const newOption = {
+          label: newOptionTextString,
+          value: newOptionTextString
+        };
+        setCreatedOptions((currentCreatedOptions) => [
+          ...currentCreatedOptions,
+          newOption
+        ]);
         setSelectedOption(newOption);
         onOptionChange(newOption);
       }
-      setNewOptionText("");
       setNewOptionPlaceholder(initialPlaceholder);
     };
     const handleChange = (newValue, _actionMeta) => {
       const option = newValue;
-      if (option === null) {
+      if (newValue == null ? void 0 : newValue.isCreation) {
+        setCreateNewOption(true);
+      }
+      if (option == null) {
         return;
       }
       if (isCreationOption(option)) {
@@ -13937,14 +13962,10 @@
       } else {
         setNewOptionPlaceholder(initialPlaceholder);
       }
-      setSelectedOption(option);
-      onOptionChange(option);
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Enter" && newOptionText) {
-        handleCreateOption();
-        event.preventDefault();
+      if (option.value !== CREATION_OPTION_VALUE) {
+        setSelectedOption(option);
       }
+      onOptionChange(option);
     };
     const combinedOptions = [...standardOptions, ...createdOptions];
     const customOptions = [
@@ -13953,13 +13974,36 @@
       }),
       ...combinedOptions
     ];
-    return /* @__PURE__ */ React.createElement(react.Box, { ref }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, { ref, w: "sm", maxW: "full" }, createNewOption && /* @__PURE__ */ React.createElement(
+      EditableText,
+      {
+        value: addFieldInputValue,
+        startWithEditView: true,
+        onChange: (v) => {
+          setAddFieldInputValue(v);
+        },
+        submitOnBlur: false,
+        onCancel: () => {
+          setAddFieldInputValue("");
+          setCreateNewOption(false);
+        },
+        onSubmit: (v) => {
+          handleCreateOption(v);
+          setCreateNewOption(false);
+        },
+        variant: "brand",
+        sx: {
+          minWidth: "100%",
+          width: "100%"
+        }
+      }
+    ), !createNewOption && /* @__PURE__ */ React.createElement(
       chakraReactSelect.CreatableSelect,
       {
         menuPlacement,
         chakraStyles: __spreadProps(__spreadValues({}, customSelectStyles), {
           container: (provided) => __spreadProps(__spreadValues({}, provided), {
-            width
+            width: "100%"
           }),
           option: (provided, { isSelected }) => __spreadValues(__spreadValues({}, provided), isSelected && {
             color: "black"
@@ -13970,11 +14014,11 @@
         value: selectedOption,
         onChange: handleChange,
         isMulti: false,
-        onInputChange: handleInputChange,
-        onKeyDown: handleKeyDown,
-        onCreateOption: handleCreateOption,
+        onCreateOption: (v) => {
+          setCreateNewOption(true);
+          setAddFieldInputValue(v);
+        },
         placeholder: newOptionPlaceholder,
-        inputValue: newOptionText,
         useBasicStyles: true,
         variant
       }