@northlight/ui 2.33.13 → 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;
@@ -915,6 +916,7 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     fiscalStartMonth?: number;
     fiscalStartDay?: number;
     renderInPortal?: boolean;
+    buttonLabel?: string;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     name: string;
@@ -933,6 +935,7 @@ interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldP
 }
 interface DateRangePickerFieldProps extends Omit<DatePickerFieldProps, 'onChange'> {
     onChange?: (date: null | DateRange) => void;
+    buttonLabel?: string;
 }
 type FormBody = Record<string, DateRange>;
 

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);
@@ -7456,7 +7447,8 @@ const RangeCalendar = (props) => {
     minValue,
     maxValue,
     firstDayOfWeek,
-    onSave
+    onSave,
+    buttonLabel = "Save"
   } = props;
   const { locale } = useLocale();
   const ref = useRef(null);
@@ -7528,7 +7520,7 @@ const RangeCalendar = (props) => {
       range: value,
       firstDayOfWeek
     }
-  ))), /* @__PURE__ */ React.createElement(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(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) => is(Object, value) && has("startDate", value) && has("endDate", value) && is(String, value.startDate) && is(String, value.endDate);
@@ -7582,7 +7574,8 @@ const DateRangePicker = (props) => {
     maxValue,
     renderInPortal = false,
     firstDayOfWeek,
-    onSave
+    onSave,
+    buttonLabel = "Save"
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7666,7 +7659,8 @@ const DateRangePicker = (props) => {
         fiscalStartDay: fiscalStartDay || 0,
         isClearable,
         firstDayOfWeek,
-        onSave
+        onSave,
+        buttonLabel
       })
     )))))
   );
@@ -7855,7 +7849,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     firstDayOfWeek = "monday",
     onChange: onChangeCallback = identity,
     isClearable = true,
-    onSave
+    onSave,
+    buttonLabel = "Save"
   } = _b, rest = __objRest$19(_b, [
     "name",
     "minValue",
@@ -7867,7 +7862,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
     "firstDayOfWeek",
     "onChange",
     "isClearable",
-    "onSave"
+    "onSave",
+    "buttonLabel"
   ]);
   const { setValue, setError, trigger } = useFormContext();
   const handleChange = (dateRange) => {
@@ -7905,7 +7901,8 @@ const DateRangePickerField = forwardRef$1((_a, ref) => {
         minValue,
         maxValue,
         validationState: errors.name ? "invalid" : "valid",
-        isClearable
+        isClearable,
+        buttonLabel
       }, rest)
     )
   );