@engagebay/engagebay-form-module 1.0.7-beta.1 → 1.0.7-beta.3

package/package.json

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

package/src/form/formfields/TypeaheadMultiSelect.tsx

@@ -165,7 +165,7 @@ const TypeaheadMultiSelect: React.FC<FormFieldComponentPropSchema> = (
           const chossenOptions = listOptions.filter((op) =>
             selectedOptions.includes(op.value),
           );
-          setSelectedValues((prev) => [...prev, ...chossenOptions]);
+          // setSelectedValues((prev) => [...prev, ...chossenOptions]);
           handleChange(
             selectedOptions,
             formContext,

package/src/form/formfields/UrlField.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { RegisterOptions } from "react-hook-form";
 import { FormContext } from "../context/FormContext";
-import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { FormFieldComponentPropSchema, FormFieldPatternsImpl } from "../schema/FormFieldSchema";
 import { Input } from "@headlessui/react";
 import RenderFormField from "../util/RenderFormField";
 import { handleChange, registerFormField } from "../util";
@@ -11,7 +11,12 @@ const UrlField: React.FC<FormFieldComponentPropSchema> = (
 ) => {
   const formContext = useContext(FormContext);
 
-  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  // Apply URL pattern by default unless the consumer has already set a formFieldPattern
+  const fieldConfigWithUrlPattern = props.fieldConfig.formFieldPattern
+    ? props.fieldConfig
+    : { ...props.fieldConfig, formFieldPattern: [FormFieldPatternsImpl.URL] };
+
+  let registerOptions: RegisterOptions = registerFormField(fieldConfigWithUrlPattern);
 
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
@@ -47,7 +52,7 @@ const UrlField: React.FC<FormFieldComponentPropSchema> = (
   };
 
   return (
-    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    <RenderFormField fieldConfig={fieldConfigWithUrlPattern} getInput={getInput} />
   );
 };
 export default UrlField;

package/src/form/util/RenderListOptions.tsx

@@ -102,15 +102,15 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     const filteredList = query
       ? resultList.filter((item) => {
-        const normalizedLabel = fieldConfig.dropdownFieldConfig
-          ?.isCaseSensitive
-          ? item.label
-          : item.label.toLowerCase();
+          const normalizedLabel = fieldConfig.dropdownFieldConfig
+            ?.isCaseSensitive
+            ? item.label
+            : item.label.toLowerCase();
 
-        return normalizedLabel
-          .replace(/\s+/g, "")
-          .includes(caseSensitive.replace(/\s+/g, ""));
-      })
+          return normalizedLabel
+            .replace(/\s+/g, "")
+            .includes(caseSensitive.replace(/\s+/g, ""));
+        })
       : resultList;
 
     let nullGroupOptions: any[] = [];
@@ -169,10 +169,11 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
           key={option.value}
           disabled={option.isDisabled}
           onClick={() => setTimeout(resetToDefault, 300)}
-          className={`form-listbox-option ${selected
-            ? " bg-gray-100 text-gray-900"
-            : "hover:bg-gray-100 text-gray-700"
-            }`}
+          className={`form-listbox-option ${
+            selected
+              ? " bg-gray-100 text-gray-900"
+              : "hover:bg-gray-100 text-gray-700"
+          }`}
           value={option.value}
         >
           {fieldConfig.fieldOptionWrapper ? (
@@ -181,8 +182,9 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
             <>
               <div className="flex items-center justify-between gap-x-1.5">
                 <span
-                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${selected ? "font-medium" : "font-normal"
-                    }`}
+                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${
+                    selected ? "font-medium" : "font-normal"
+                  }`}
                 >
                   {option.icon && (
                     <span className="listbox-svg">{option.icon}</span>
@@ -204,7 +206,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   )}
                 </span>
                 {isTypeahead &&
-                  !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
+                !fieldConfig.dropdownFieldConfig?.isSuggestionBox ? (
                   <input
                     type="checkbox"
                     className="form-checkbox"
@@ -322,7 +324,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
                   fill="currentColor"
                   aria-hidden="true"
                   data-slot="icon"
-                  className="h-5 w-5 text-gray-400"
+                  className="h-4.5 w-4.5 text-gray-400"
                 >
                   <path
                     fillRule="evenodd"
@@ -403,28 +405,28 @@ export function renderListBoxValue(
           {values.length > 1
             ? `${values.length} selected`
             : listOptions.find((option) => option.value == value[0])?.label ||
-            values[0]}
+              values[0]}
         </span>
         {getDeleteButton()}
       </span>
     ) : (
       Array.isArray(values) &&
-      values.map((opt: any) => {
-        const option = listOptions.find((option) => option.value == opt);
-        if (!option && values.length == 0) return getPlaceholder();
+        values.map((opt: any) => {
+          const option = listOptions.find((option) => option.value == opt);
+          if (!option && values.length == 0) return getPlaceholder();
 
-        return (
-          <span key={option?.value} className="form-selected-badge">
-            <Tippy content={option?.label} delay={500}>
-              <span className="form-selected-badge-name">
-                {option?.label}
-              </span>
-            </Tippy>
+          return (
+            <span key={option?.value} className="form-selected-badge">
+              <Tippy content={option?.label} delay={500}>
+                <span className="form-selected-badge-name">
+                  {option?.label}
+                </span>
+              </Tippy>
 
-            {getDeleteButton(opt)}
-          </span>
-        );
-      })
+              {getDeleteButton(opt)}
+            </span>
+          );
+        })
     );
   };
   const getDeleteButton = (option?: string) => {