@engagebay/engagebay-form-module 1.0.2 → 1.0.5

package/package.json

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

package/src/form/util/RenderListOptions.tsx

@@ -11,6 +11,7 @@ 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,
@@ -45,7 +46,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
       queryCallback,
       createCallback,
     },
-    ref
+    ref,
   ) => {
     const [query, setQuery] = useState<string>("");
     const [createdListItems, setCreatedListItems] = useState<
@@ -90,7 +91,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
         .filter((result) => result.label)
         .filter(
           (option, index, self) =>
-            index === self.findIndex((obj) => obj.value === option.value)
+            index === self.findIndex((obj) => obj.value === option.value),
         ),
     ]; // removing duplicate values
 
@@ -178,7 +179,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
             <>
               <div className="flex items-center justify-between gap-x-1.5">
                 <span
-                  className={`block truncate w-full !max-w-[150px] space-x-2 ${
+                  className={`block truncate w-full ${fieldConfig.customClassNames?.optionClassName} space-x-2 ${
                     selected ? "font-medium" : "font-normal"
                   }`}
                 >
@@ -318,7 +319,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
         </div>
       </ListboxOptions>
     );
-  }
+  },
 );
 
 export default RenderListOptions;
@@ -326,7 +327,7 @@ export function renderListBoxValue(
   formContext: FormContextType,
   fieldConfig: FormFieldSchema,
   listOptions: FieldOptionsSchema[],
-  onChange?: (value: any) => void
+  onChange?: (value: any) => void,
 ): JSX.Element {
   let value = formContext.getValues(fieldConfig.name);
   const renderAsString = () => {
@@ -338,10 +339,17 @@ export function renderListBoxValue(
     return icon ? (
       <span className="flex items-center fs-8  whitespace-nowrap text-gray-500">
         <span>{icon}</span>
-        <span>{label} </span>
+
+        <Tippy content={label} delay={500}>
+          <span className="block truncate">{label}</span>
+        </Tippy>
       </span>
+    ) : label ? (
+      <Tippy content={<>{label}</>} delay={500}>
+        <span className="block truncate">{label}</span>
+      </Tippy>
     ) : (
-      label || getPlaceholder()
+      getPlaceholder()
     );
   };
   const renderAsArray = () => {
@@ -370,7 +378,12 @@ export function renderListBoxValue(
 
           return (
             <span key={option?.value} className="form-selected-badge">
-              <span className="form-selected-badge-name">{option?.label}</span>
+              <Tippy content={option?.label} delay={500}>
+                <span className="form-selected-badge-name">
+                  {option?.label}
+                </span>
+              </Tippy>
+
               {getDeleteButton(opt)}
             </span>
           );