@trackunit/react-form-components 0.0.272 → 0.0.275

package/index.cjs.js

@@ -662,6 +662,9 @@ const DropZone = (_a) => {
         } }, rest, { children: [jsxRuntime.jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxRuntime.jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsxRuntime.jsx(reactComponents.Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsxRuntime.jsx("span", { children: label })] })] })));
 };
 
+// Doing the same check as we do on the backend
+// Using OWASP pattern from: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
+const EMAIL_REGEX = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/;
 /**
  * @description Validate given email id.
  * @param email The address to validate.
@@ -672,10 +675,7 @@ const validateEmailAddress = (email) => {
     if (!email) {
         return false;
     }
-    // Doing the same check as we do on the backend
-    // Using OWASP pattern from: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
-    const emailValidationPattern = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/;
-    return emailValidationPattern.test(email);
+    return EMAIL_REGEX.test(email);
 };
 
 /**
@@ -1072,7 +1072,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
             return (jsxRuntime.jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "inline-flex shrink-0", onClose: e => {
                     e.stopPropagation();
                     item.onClick();
-                }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text, disabled: disabled, children: item.text }, item.text + index));
+                }, color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, children: item.text }, item.text + index));
         }
         const fromTheItems = item.text !== "";
         if (fromTheItems) {
@@ -1133,8 +1133,8 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
                                                 ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            }, color: disabled ? "unknown" : "primary", dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString(), children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                                            }, color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
                 }
                 return (jsxRuntime.jsx(ReactSelect.components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
@@ -1526,7 +1526,7 @@ const PhoneInput = React.forwardRef((_a, ref) => {
         // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
         onChange && onChange(event);
     }, [phoneNumber, onChange]);
-    return (jsxRuntime.jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
+    return (jsxRuntime.jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid, readOnly: readOnly }), jsxRuntime.jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
                     onBlurHandler();
                 }, onChange: e => {
                     var _a;
@@ -2247,6 +2247,7 @@ exports.CreatableSelect = CreatableSelect;
 exports.DateField = DateField;
 exports.DateInput = DateInput;
 exports.DropZone = DropZone;
+exports.EMAIL_REGEX = EMAIL_REGEX;
 exports.EmailField = EmailField;
 exports.EmailInput = EmailInput;
 exports.FormGroup = FormGroup;

package/index.esm.js

@@ -632,6 +632,9 @@ const DropZone = (_a) => {
         } }, rest, { children: [jsx("input", { title: "Hidden File Input", type: "file", id: "input-file-upload", onChange: handleChange, className: "hidden" }), jsxs("label", { className: cvaDropZoneLabel(), htmlFor: "input-file-upload", "data-testid": dataTestId && `${dataTestId}-label`, children: [jsx(Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx("span", { children: label })] })] })));
 };
 
+// Doing the same check as we do on the backend
+// Using OWASP pattern from: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
+const EMAIL_REGEX = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/;
 /**
  * @description Validate given email id.
  * @param email The address to validate.
@@ -642,10 +645,7 @@ const validateEmailAddress = (email) => {
     if (!email) {
         return false;
     }
-    // Doing the same check as we do on the backend
-    // Using OWASP pattern from: https://owasp.org/www-community/OWASP_Validation_Regex_Repository
-    const emailValidationPattern = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/;
-    return emailValidationPattern.test(email);
+    return EMAIL_REGEX.test(email);
 };
 
 /**
@@ -1042,7 +1042,7 @@ const TagsContainer = ({ items, width = "100%", itemsGap = 5, postFix, disabled
             return (jsx(TagWithWidth, { onWidthKnown: onWidthKnownHandler, className: "inline-flex shrink-0", onClose: e => {
                     e.stopPropagation();
                     item.onClick();
-                }, color: item.disabled ? "unknown" : "primary", dataTestId: item.text, disabled: disabled, children: item.text }, item.text + index));
+                }, color: item.disabled ? "unknown" : "primary", dataTestId: `${item.text}-tag`, disabled: disabled, children: item.text }, item.text + index));
         }
         const fromTheItems = item.text !== "";
         if (fromTheItems) {
@@ -1103,8 +1103,8 @@ const useCustomComponents = (componentsProps, disabled, menuIsOpen, refMenuIsEna
                                                 e.stopPropagation();
                                                 refMenuIsEnabled.current = false;
                                                 ((_a = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _a === void 0 ? void 0 : _a.onClick) && ((_b = tagProps === null || tagProps === void 0 ? void 0 : tagProps.removeProps) === null || _b === void 0 ? void 0 : _b.onClick(e));
-                                            }, color: disabled ? "unknown" : "primary", dataTestId: (_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString(), children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
-                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
+                                            }, color: disabled ? "unknown" : "primary", dataTestId: tagProps.children ? `${(_a = tagProps.children) === null || _a === void 0 ? void 0 : _a.toString()}-tag` : undefined, children: tagProps.children }, (_b = tagProps.children) === null || _b === void 0 ? void 0 : _b.toString()));
+                                    }), tags && tags.length > maxSelectedDisplayCount && (jsxs(Tag, { color: "neutral", dataTestId: "counter-tag", children: ["+", tags.length - maxSelectedDisplayCount] })), searchInput] })) })));
                 }
                 return (jsx(components.ValueContainer, Object.assign({}, props, { isDisabled: props.selectProps.isDisabled, children: props.children })));
             }, LoadingIndicator: props => {
@@ -1496,7 +1496,7 @@ const PhoneInput = forwardRef((_a, ref) => {
         // the event's type is inferred as Event, which doesn't have a target property, whereas ChangeEvent does.
         onChange && onChange(event);
     }, [phoneNumber, onChange]);
-    return (jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
+    return (jsxs("div", { className: "grid-cols-min-fr grid gap-2", "data-testid": dataTestId && `${dataTestId}-container`, children: [jsx("input", { hidden: true, id: "phone-input", "data-testid": dataTestId, value: phoneNumber, ref: hiddenInputRef, onChange: onChange, "aria-invalid": isInvalid, readOnly: readOnly }), jsx(CountryCodeSelect, { dataTestId: dataTestId && `${dataTestId}-countryCodeSelect`, countryCode: code, onBlur: e => {
                     onBlurHandler();
                 }, onChange: e => {
                     var _a;
@@ -2206,4 +2206,4 @@ const UrlField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EMAIL_REGEX, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getCountryAbbreviation, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.272",
+  "version": "0.0.275",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Select/Select.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./useSelect";
-export interface SelectOption<T extends string> {
+export interface SelectOption<T extends string | number> {
     label: string;
     value: T;
     disabled?: boolean;

package/src/utilities/emailUtils.d.ts

@@ -1,3 +1,4 @@
+export declare const EMAIL_REGEX: RegExp;
 /**
  * @description Validate given email id.
  * @param email The address to validate.