@trackunit/react-form-components 0.0.188 → 0.0.190

package/index.cjs.js

@@ -3068,6 +3068,22 @@ 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 })] })] })));
 };
 
+/**
+ * @description Validate given email id.
+ * @param email The address to validate.
+ * @returns {boolean} Returns true if the email address is valid else false.
+ * @example validateEmailAddress(test@gmail.com) // true
+ */
+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);
+};
+
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -3079,12 +3095,13 @@ const DropZone = (_a) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React__namespace.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid"]);
     const [email, setEmail] = React__namespace.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
     };
-    return (jsxRuntime.jsx(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: jsxRuntime.jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
+    const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
+    return (jsxRuntime.jsx(BaseInput, Object.assign({ dataTestId: dataTestId, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value), isInvalid: renderAsInvalid }, rest, { actions: jsxRuntime.jsx(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
 });
 
 /**
@@ -3093,17 +3110,14 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
  *
  */
 const EmailField = React.forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "isInvalid"]);
     const [value, setValue] = React.useState(defaultValue || "");
     const htmlForId = id ? id : "emailField-" + v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
         return typeof inputValue === "string";
     }
-    // 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}$/;
-    const renderAsInvalid = !!errorMessage || (isString(value) && emailValidationPattern.test(value));
+    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid;
     return (jsxRuntime.jsx(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsxRuntime.jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
@@ -15291,5 +15305,6 @@ exports.parseSchedule = parseSchedule;
 exports.serializeSchedule = serializeSchedule;
 exports.useCustomComponents = useCustomComponents;
 exports.usePhoneInput = usePhoneInput;
+exports.validateEmailAddress = validateEmailAddress;
 exports.validatePhoneNumber = validatePhoneNumber;
 exports.weekDay = weekDay;

package/index.esm.js

@@ -3042,6 +3042,22 @@ const DropZone = (_a) => {
         } }, rest, { children: [jsx$1("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$1(Icon, { type: "solid", name: "ArrowUpCircle", color: isInvalid ? "danger" : "neutral", style: !isInvalid ? { color: "rgb(156 163 175)" } : {} }), jsx$1("span", { children: label })] })] })));
 };
 
+/**
+ * @description Validate given email id.
+ * @param email The address to validate.
+ * @returns {boolean} Returns true if the email address is valid else false.
+ * @example validateEmailAddress(test@gmail.com) // true
+ */
+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);
+};
+
 /**
  * A Email Input component is used for input of the type Email.
  *
@@ -3053,12 +3069,13 @@ const DropZone = (_a) => {
  * For specific input types make sure to use the corresponding input component.
  */
 const EmailInput = React.forwardRef((_a, ref) => {
-    var { fieldSize = "medium", disabled = false, dataTestId } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId"]);
+    var { fieldSize = "medium", disabled = false, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["fieldSize", "disabled", "dataTestId", "isInvalid"]);
     const [email, setEmail] = React.useState("");
     const sendEmail = () => {
         return window.open(`mailto:${email}`);
     };
-    return (jsx$1(BaseInput, Object.assign({ dataTestId: dataTestId, fieldSize: fieldSize, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value) }, rest, { actions: jsx$1(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
+    const renderAsInvalid = (email && !validateEmailAddress(email)) || isInvalid;
+    return (jsx$1(BaseInput, Object.assign({ dataTestId: dataTestId, ref: ref, type: "email", placeholder: rest.placeholder || "mail@example.com", onChange: e => setEmail(e.target.value), isInvalid: renderAsInvalid }, rest, { actions: jsx$1(ActionButton, { disabled: disabled, value: email, type: "EMAIL", onClick: sendEmail, dataTestId: dataTestId && `${dataTestId}-emailIcon`, iconSize: fieldSize }) })));
 });
 
 /**
@@ -3067,17 +3084,14 @@ const EmailInput = React.forwardRef((_a, ref) => {
  *
  */
 const EmailField = forwardRef((_a, ref) => {
-    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid = false } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId", "isInvalid"]);
     const [value, setValue] = useState(defaultValue || "");
     const htmlForId = id ? id : "emailField-" + v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
         return typeof inputValue === "string";
     }
-    // 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}$/;
-    const renderAsInvalid = !!errorMessage || (isString(value) && emailValidationPattern.test(value));
+    const renderAsInvalid = !!errorMessage || (value && isString(value) && !validateEmailAddress(value)) || isInvalid;
     return (jsx$1(FormGroup, { htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup`, children: jsx$1(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) }));
 });
 
@@ -15204,4 +15218,4 @@ const UploadField = forwardRef((_a, ref) => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, checkIfPhoneNumberHasPlus, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, getOrderedOptions, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isMultiValue, parseSchedule, serializeSchedule, useCustomComponents, usePhoneInput, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, Checkbox, CreatableSelect, DateField, DateInput, DropZone, EmailField, EmailInput, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PhoneField, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, StateManagedSelect$1 as ValueType, checkIfPhoneNumberHasPlus, cvaInput, cvaInputAddon, cvaInputAddonAfter, cvaInputAddonBefore, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputPrefix, cvaInputSuffix, cvaSelect, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefix, cvaSelectXIcon, 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.188",
+  "version": "0.0.190",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,8 +9,8 @@
   "dependencies": {
     "@trackunit/css-class-variance-utilities": "0.0.15",
     "@trackunit/i18n-library-translation": "0.0.89",
-    "@trackunit/react-components": "0.1.188",
-    "@trackunit/shared-utils": "0.0.14",
+    "@trackunit/react-components": "0.1.189",
+    "@trackunit/shared-utils": "0.0.15",
     "@trackunit/ui-icons": "0.0.78",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",

package/src/index.d.ts

@@ -29,4 +29,5 @@ export * from "./components/TimeRangeField/TimeRangeField";
 export * from "./components/Toggle";
 export * from "./components/UploadField/UploadField";
 export * from "./components/UploadInput/UploadInput";
+export * from "./utilities/emailUtils";
 export * from "./utilities/usePhoneInput";

package/src/utilities/emailUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description Validate given email id.
+ * @param email The address to validate.
+ * @returns {boolean} Returns true if the email address is valid else false.
+ * @example validateEmailAddress(test@gmail.com) // true
+ */
+export declare const validateEmailAddress: (email: string) => boolean;