@northlight/ui 2.33.14 → 2.33.15

package/dist/es/northlight.d.ts

@@ -299,6 +299,7 @@ interface TagsInputProps<T> extends Omit<SelectProps<T, true>, 'value' | 'format
     value?: MultiValue<T>;
     formatCreateLabel?: (textInputValue: string) => string;
     isValidNewOption?: (option: string, selectOptions: MultiValue<T>) => boolean;
+    onError?: (message: string) => void;
 }
 
 /**
@@ -319,7 +320,7 @@ interface TagsInputProps<T> extends Omit<SelectProps<T, true>, 'value' | 'format
  * ?)
  *
  */
-declare function TagsInput<T extends Option>({ options, onChange, isLoading, loadingList, 'data-testid': testId, value, ...rest }: TagsInputProps<T>): JSX.Element;
+declare function TagsInput<T extends Option>({ options, onChange, isLoading, loadingList, 'data-testid': testId, value, onError, ...rest }: TagsInputProps<T>): JSX.Element;
 
 interface OrganizationLogoProps extends AvatarProps$1 {
     name: string;

package/dist/es/northlight.js

@@ -3,7 +3,7 @@ export { AbsoluteCenter, AccordionIcon, AlertDescription, AlertDialog, AlertDial
 import React, { useState, useEffect, useRef, isValidElement, cloneElement, Children, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, memo, useMemo, useCallback } from 'react';
 import { CreatableSelect, chakraComponents, AsyncSelect, Select as Select$3 } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, chakraComponents as selectChakraComponents } from 'chakra-react-select';
-import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, merge, isEmpty, identity, any, init, append, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
+import { isNil, last, map, prop, difference, replace, split, path, T, keys, omit, merge, isEmpty, identity, any, ifElse, gt, always, defaultTo, take, inc, dec, forEach, is, trim, values, equals, mergeAll, toLower, find, times, has, not, all, filter, test, indexOf, remove, insert, intersection, findIndex, concat, head, match, length, propEq } from 'ramda';
 import { useFocusManager, FocusScope, useFocusRing } from '@react-aria/focus';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
@@ -3759,14 +3759,16 @@ function TagsInput(_a) {
     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] = useToken$1("border.select", ["focus"]);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
@@ -3781,44 +3783,33 @@ function TagsInput(_a) {
     setSelectedOptions(values);
     onChange(values, actionMeta);
   };
-  const isValidNewOption = (input, availableOptions) => {
-    const optionAlreadyExists = any(
-      (option) => option.value === input,
-      availableOptions
-    );
-    return !isEmpty(input) && !optionAlreadyExists;
-  };
+  const isValidNewOption = (input, availableOptions) => !any(
+    (option) => option.value === input,
+    availableOptions
+  );
   const addNewOption = (newOption) => {
-    onChange(selectedOptions, { action: "select-option", option: newOption });
-    setSelectedOptions(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: init(newInput),
-      label: init(newInput).slice(0, -1)
-    };
-    addNewOption(newOption);
-    clearInput();
   };
   const handleKeyDown = (event) => {
-    if (!isValidNewOption(inputValue, selectedOptions) && !isEmpty(inputValue) && event.key !== " ") {
-      clearInput();
-      event.preventDefault();
+    const shouldAddOption = event.key === "Enter" || event.key === "Tab" || event.key === ",";
+    if (!shouldAddOption || isEmpty(inputValue))
       return;
-    }
-    if ((event.key === "Enter" || event.key === "Tab") && !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);