@northlight/ui 2.33.13 → 2.33.15

package/dist/umd/northlight.cjs

@@ -3721,14 +3721,16 @@
       isLoading,
       loadingList = () => null,
       "data-testid": testId,
-      value = []
+      value = [],
+      onError
     } = _b, rest = __objRest$1Q(_b, [
       "options",
       "onChange",
       "isLoading",
       "loadingList",
       "data-testid",
-      "value"
+      "value",
+      "onError"
     ]);
     const [borderColor] = react.useToken("border.select", ["focus"]);
     const [menuIsOpen, setMenuIsOpen] = React.useState(false);
@@ -3743,44 +3745,33 @@
       setSelectedOptions(values);
       onChange(values, actionMeta);
     };
-    const isValidNewOption = (input, availableOptions) => {
-      const optionAlreadyExists = ramda.any(
-        (option) => option.value === input,
-        availableOptions
-      );
-      return !ramda.isEmpty(input) && !optionAlreadyExists;
-    };
+    const isValidNewOption = (input, availableOptions) => !ramda.any(
+      (option) => option.value === input,
+      availableOptions
+    );
     const addNewOption = (newOption) => {
-      onChange(selectedOptions, { action: "select-option", option: newOption });
-      setSelectedOptions(ramda.append(newOption));
+      const updatedOptions = [...selectedOptions, newOption];
+      onChange(updatedOptions, { action: "select-option", option: newOption });
+      setSelectedOptions(updatedOptions);
     };
-    const isInputChangeValid = (newInput, event) => isValidNewOption(newInput, selectedOptions) && newInput !== "" && newInput !== "," && newInput.endsWith(",") && event.action !== "input-blur";
     const clearInput = () => {
       setInputValue("");
     };
-    const handleInputChange = (newInput, event) => {
+    const handleInputChange = (newInput) => {
       setInputValue(newInput);
-      if (!isInputChangeValid(newInput, event))
-        return;
-      const newOption = {
-        value: ramda.init(newInput),
-        label: ramda.init(newInput).slice(0, -1)
-      };
-      addNewOption(newOption);
-      clearInput();
     };
     const handleKeyDown = (event) => {
-      if (!isValidNewOption(inputValue, selectedOptions) && !ramda.isEmpty(inputValue) && event.key !== " ") {
-        clearInput();
-        event.preventDefault();
+      const shouldAddOption = event.key === "Enter" || event.key === "Tab" || event.key === ",";
+      if (!shouldAddOption || ramda.isEmpty(inputValue))
         return;
-      }
-      if ((event.key === "Enter" || event.key === "Tab") && !ramda.isEmpty(inputValue)) {
-        const newOption = { value: inputValue, label: inputValue };
+      const trimmedInputValue = inputValue.trim();
+      if (isValidNewOption(trimmedInputValue, selectedOptions)) {
+        const newOption = { value: trimmedInputValue, label: trimmedInputValue };
         addNewOption(newOption);
-        clearInput();
-        event.preventDefault();
+      } else {
+        onError == null ? void 0 : onError("Tag already exists");
       }
+      clearInput();
     };
     const handleFocus = () => {
       setIsFocused(true);
@@ -7418,7 +7409,8 @@
       minValue,
       maxValue,
       firstDayOfWeek,
-      onSave
+      onSave,
+      buttonLabel = "Save"
     } = props;
     const { locale } = i18n.useLocale();
     const ref = React.useRef(null);
@@ -7490,7 +7482,7 @@
         range: value,
         firstDayOfWeek
       }
-    ))), /* @__PURE__ */ React.createElement(react.HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, "Save"))))))));
+    ))), /* @__PURE__ */ React.createElement(react.HStack, { pt: "2", alignSelf: "end" }, isClearable && /* @__PURE__ */ React.createElement(Button, { onClick: resetDate, variant: "ghost", size: "sm" }, "Clear"), /* @__PURE__ */ React.createElement(Button, { variant: "brand", onClick: handleSave, size: "sm" }, buttonLabel))))))));
   };
 
   const isValidDateRange = (value) => ramda.is(Object, value) && ramda.has("startDate", value) && ramda.has("endDate", value) && ramda.is(String, value.startDate) && ramda.is(String, value.endDate);
@@ -7544,7 +7536,8 @@
       maxValue,
       renderInPortal = false,
       firstDayOfWeek,
-      onSave
+      onSave,
+      buttonLabel = "Save"
     } = props;
     const ref = React.useRef();
     const { group } = react.useMultiStyleConfig("DatePicker");
@@ -7628,7 +7621,8 @@
           fiscalStartDay: fiscalStartDay || 0,
           isClearable,
           firstDayOfWeek,
-          onSave
+          onSave,
+          buttonLabel
         })
       )))))
     );
@@ -7817,7 +7811,8 @@
       firstDayOfWeek = "monday",
       onChange: onChangeCallback = ramda.identity,
       isClearable = true,
-      onSave
+      onSave,
+      buttonLabel = "Save"
     } = _b, rest = __objRest$19(_b, [
       "name",
       "minValue",
@@ -7829,7 +7824,8 @@
       "firstDayOfWeek",
       "onChange",
       "isClearable",
-      "onSave"
+      "onSave",
+      "buttonLabel"
     ]);
     const { setValue, setError, trigger } = reactHookForm.useFormContext();
     const handleChange = (dateRange) => {
@@ -7867,7 +7863,8 @@
           minValue,
           maxValue,
           validationState: errors.name ? "invalid" : "valid",
-          isClearable
+          isClearable,
+          buttonLabel
         }, rest)
       )
     );