@engagebay/engagebay-form-module 1.0.8-beta.2 → 1.0.8-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.8-beta.2",
+    "version": "1.0.8-beta.4",
     "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,19 +126,19 @@ const FileUploadField: React.FC<FormFieldComponentPropSchema> = (
                                         </div>
                                     ) : (
                                         <div className="flex">
-                                            <span className="m-2">
-                                                {file?.name}
+                                            <span className="m-2 max-w-xs truncate">
+                                            {file?.name || file?.toString?.() || ''}
                                             </span>{" "}
                                             <button
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     formContext.setValue(
-                                                        props.fieldConfig.name,cnull
+                                                        props.fieldConfig.name,null
                                                     );
                                                     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/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

@@ -11,14 +11,14 @@ import { handleChange } from ".";
 import { LoaderWithText } from "../../util/LoaderWithText";
 import SVGIcon from "../../util/svg/SVGIcon";
 import { FormContextType } from "../context/FormContext";
+import Tippy from "@tippyjs/react";
 import {
   FieldOptionsSchema,
   FormFieldSchema,
   FormFieldType,
   OutputFormatType,
 } from "../schema/FormFieldSchema";
-import Tippy from "@tippyjs/react";
-import { normalizeMultiSelectValue } from "./normalizeCustomFieldValues";
+import { normalizeMultiSelectValue, normalizeMultiSelectValueForStringArrayValues } from "./normalizeCustomFieldValues";
 type RenderListOptionsProps = {
   formContext: FormContextType;
   fieldConfig: FormFieldSchema;
@@ -373,7 +373,7 @@ export function renderListBoxValue(
   listOptions: FieldOptionsSchema[],
   onChange?: (value: any) => void,
 ): JSX.Element {
-  let value = normalizeMultiSelectValue(formContext.getValues(fieldConfig.name));
+  let value = normalizeMultiSelectValueForStringArrayValues(fieldConfig, formContext.getValues(fieldConfig.name));
   const renderAsString = () => {
     // if (!listOptions) {
     //     return value;
@@ -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();

package/src/form/util/normalizeCustomFieldValues.ts

@@ -1,4 +1,5 @@
 import moment from "moment";
+import { FormFieldSchema, OutputFormatType } from "../schema/FormFieldSchema";
 
 const normalizeStringToken = (value: unknown): string => {
   return typeof value === "string" ? value.trim() : String(value).trim();
@@ -113,3 +114,10 @@ export const normalizeDateInputValue = (
 };
 
 
+export const normalizeMultiSelectValueForStringArrayValues = (fieldConfig: FormFieldSchema, value: any): string[] => {
+  if (fieldConfig.outputFormat === OutputFormatType.STRING) {
+    return normalizeMultiSelectValue(value);  
+  }
+  return value; 
+};
+