@trackunit/react-form-components 0.0.104-alpha-895cee4b43.0 → 0.0.104

package/index.cjs.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
 var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var React = require('react');
 var reactDom = require('react-dom');
-var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -107,15 +107,9 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsxRuntime.jsx(ActionContainer, { children: jsxRuntime.jsx(StyledIconButton, { "$fieldSize": iconSize, disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsxRuntime.jsx("div", { className: "flex p-1", children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton(), disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsxRuntime.jsx(reactComponents.Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
 };
-const ActionContainer = tailwindStyledComponents.tw.div `
-  tu-action-container
-`;
-const StyledIconButton = tailwindStyledComponents.twx(reactComponents.IconButton) `
-  tu-action-button
-${({ $fieldSize }) => $fieldSize === "small" && tailwindStyledComponents.tws `tu-action-button--small`}
-`;
+const cvaActionButton = cssClassVarianceUtilities.cvaMerge(["drop-shadow-none", "rounded-md"]);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2849,14 +2843,16 @@ 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"]);
-    const [value, setValue] = React.useState(defaultValue);
+    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";
     }
-    // Check the regular expression only if value is a string
-    const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
+    // 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));
     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 })) }));
 });
 

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsx as jsx$1, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { registerTranslations } from '@trackunit/i18n-library-translation';
+import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { IconButton, Icon, Tip, Heading, Text, MenuItem, Tag, Spinner } from '@trackunit/react-components';
-import { tw, twx, tws } from '@trackunit/tailwind-styled-components';
+import { tws, tw, twx } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
 import React__default, { useMemo, forwardRef, useState, cloneElement, useEffect, useCallback, useLayoutEffect, useContext, createElement, Fragment, createContext, useRef, Component } from 'react';
 import { createPortal } from 'react-dom';
-import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 
 var defaultTranslations = {
 	
@@ -81,15 +81,9 @@ const ActionButton = ({ type, value, dataTestId, iconSize, disabled }) => {
                 return window.open(`tel:${value}`);
         }
     };
-    return (jsx$1(ActionContainer, { children: jsx$1(StyledIconButton, { "$fieldSize": iconSize, disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx$1(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
+    return (jsx$1("div", { className: "flex p-1", children: jsx$1(IconButton, { className: cvaActionButton(), disabled: disabled, dataTestId: dataTestId || "testIconButtonId", size: "small", color: "tertiary", icon: jsx$1(Icon, { size: "small", name: getIconName() }), onClick: ButtonAction }) }));
 };
-const ActionContainer = tw.div `
-  tu-action-container
-`;
-const StyledIconButton = twx(IconButton) `
-  tu-action-button
-${({ $fieldSize }) => $fieldSize === "small" && tws `tu-action-button--small`}
-`;
+const cvaActionButton = cvaMerge(["drop-shadow-none", "rounded-md"]);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2823,14 +2817,16 @@ 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"]);
-    const [value, setValue] = useState(defaultValue);
+    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";
     }
-    // Check the regular expression only if value is a string
-    const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
+    // 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));
     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 })) }));
 });
 

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.0.104-alpha-895cee4b43.0",
+  "version": "0.0.104",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=18.x"
   },
   "dependencies": {
-    "@trackunit/css-class-variance-utilities": "0.0.12-alpha-895cee4b43.0",
-    "@trackunit/i18n-library-translation": "0.0.68-alpha-895cee4b43.0",
-    "@trackunit/react-components": "0.1.140-alpha-895cee4b43.0",
-    "@trackunit/tailwind-styled-components": "0.0.61-alpha-895cee4b43.0",
+    "@trackunit/css-class-variance-utilities": "0.0.11",
+    "@trackunit/i18n-library-translation": "0.0.67",
+    "@trackunit/react-components": "0.1.139",
+    "@trackunit/tailwind-styled-components": "0.0.60",
     "date-fns": "2.29.3",
     "libphonenumber-js": "1.10.36",
     "react": "18.2.0",