@engagebay/engagebay-form-module 1.0.8-beta.3 → 1.0.8-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.8-beta.3",
+    "version": "1.0.8-beta.5",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/src/form/formfields/FileUploadField.tsx

@@ -9,6 +9,7 @@ import { Description } from "@headlessui/react";
 import React from "react";
 import RenderFormField from "../util/RenderFormField";
 import clsx from "clsx";
+import { XMarkIcon } from "@heroicons/react/20/solid";
 const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
     props: FormFieldComponentPropSchema
 ) => {
@@ -103,7 +104,7 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                     <Description>Loading...</Description>
                 ) : (
                     props.fieldConfig.fieldContainer ? <props.fieldConfig.fieldContainer /> :
-                        <div className={"flex flex-col items-center justify-center pt-5 pb-6"}>
+                        <div className={"flex flex-col items-center justify-center pt-5 pb-6 px-2"}>
                             {file ? (
                                 <>
                                     {isImageFile(file) ? (
@@ -125,7 +126,7 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                                         </div>
                                     ) : (
                                         <div className="flex">
-                                            <span className="m-2">
+                                            <span className="m-2 max-w-xs truncate">
                                             {file?.name || file?.toString?.() || ''}
                                             </span>{" "}
                                             <button
@@ -136,8 +137,8 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                                                     );
                                                     setFile(null);
                                                 }}
-                                                className="btn btn-outline-dark btn-sm ">
-                                                X
+                                                className="btn btn-sm ">
+                                                <XMarkIcon className="w-3.5 h-3.5 text-gray-800"/>
                                             </button>
                                         </div>
                                     )}

package/src/form/formfields/Typeahead2.tsx

@@ -199,7 +199,12 @@ const Typeahead2: React.FC<FormFieldComponentPropSchema> = (
       : result.includes(resData.value)
         ? [...result.filter((v: string) => v != resData.value), resData.value]
         : [...result, resData.value];
-    formContext.setValue(props.fieldConfig.name, result);
+    handleChange(
+      result,
+      formContext,
+      props.fieldConfig,
+      props.onChange,
+    );    
   };
 
   const getInput = () => {

package/src/form/schema/FormFieldSchema.ts

@@ -243,7 +243,7 @@ export class FormFieldPatternsImpl implements FormFieldPatterns {
     static readonly EMAIL = new FormFieldPatternsImpl(
         "EMAIL",
         "Please enter a valid email address",
-        /^([A-Za-z0-9\._%+\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z]{2,})$/
+        /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i
     );
     // static readonly PASSWORD = new FormFieldPatternsImpl(
     //     "PASSWORD",

package/src/form/util/RenderListOptions.tsx

@@ -476,7 +476,7 @@ export function renderListBoxValue(
     if (!value && !listOptions) {
       return getPlaceholder();
     }
-    if (!outputFormat && Array.isArray(value)) {
+    if (Array.isArray(value)) {
       return renderAsArray();
     }
     return renderAsString();