@integry/sdk 4.6.39 → 4.6.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.39",
+  "version": "4.6.41",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/MultipurposeField/Dropdown/ListBoxItem.tsx

@@ -9,6 +9,7 @@ interface ListBoxItemProps {
   isSelected?: boolean;
   isHighlighted?: boolean;
   onClick(): void;
+  icon?: string;
 }
 
 const ListBoxItem = (props: ListBoxItemProps) => {

package/src/components/MultipurposeField/Dropdown/index.tsx

@@ -24,7 +24,9 @@ import { FieldDropdown, Tabs } from '../TagMenu';
 
 import styles from './styles.module.scss';
 
-type keyValueMapper = (input: any) => { id: any; value: any }[];
+type keyValueMapper = (
+  input: any,
+) => { id: any; value: any; icon?: any; description?: any }[];
 
 interface ListBoxProps {
   title: string;
@@ -70,6 +72,10 @@ interface ListBoxProps {
   parentFieldChanged?: boolean;
   allowWorkspaceConnectedAccounts: boolean;
   tagsTree?: any;
+  enableServerSideSearch?: boolean;
+  serverSideSearchParamName?: string;
+  iconKeyPath?: string;
+  optionDescriptionKeyPath?: string;
 }
 
 const ListBox = (props: ListBoxProps) => {
@@ -292,6 +298,15 @@ const ListBox = (props: ListBoxProps) => {
         if (allowWorkspaceConnectedAccounts) {
           data.allow_workspace_connected_accounts = true;
         }
+
+        // When server side search is available and results are paginated, then better to search the results as value might be in the next page
+        if (
+          props.enableServerSideSearch &&
+          props.serverSideSearchParamName &&
+          value
+        ) {
+          data[props.serverSideSearchParamName] = value;
+        }
       } catch (error) {
         data = '';
       }
@@ -311,8 +326,9 @@ const ListBox = (props: ListBoxProps) => {
           if (res) {
             setItems(dynamicResponseMapper(res));
             if (res.hasOwnProperty('_cursor') && res._cursor !== null) {
-              let tempFilteredItems = dynamicResponseMapper(res);
+              const tempFilteredItems = dynamicResponseMapper(res);
               setFilteredItems(tempFilteredItems);
+              setSortedFilteredItems(tempFilteredItems);
               if (tempFilteredItems.length === 1) {
                 setEditableTextValue(tempFilteredItems[0].value);
                 onChange(tempFilteredItems[0].id, true);
@@ -381,7 +397,11 @@ const ListBox = (props: ListBoxProps) => {
   const dynamicResponseMapper: keyValueMapper = (input) => {
     const keyPath = props.optionKeyPath || 'id';
     const valuePath = props.valueKeyPath || 'value';
-    const inputModified = input.hasOwnProperty('output') ? input.output : input;
+    const inputModified = Object.prototype.hasOwnProperty.call(input, 'output')
+      ? input.output
+      : Object.prototype.hasOwnProperty.call(input, 'functions')
+      ? input.functions
+      : input;
 
     // Check if inputModified is an array, if not, return an empty array
     if (!Array.isArray(inputModified)) {
@@ -414,12 +434,16 @@ const ListBox = (props: ListBoxProps) => {
       };
 
       // Resolve id and value using the helper function
-      let id = resolveValue(keyPath);
-      let value = resolveValue(valuePath);
+      const id = resolveValue(keyPath);
+      let optionValue = resolveValue(valuePath);
+      const icon = resolveValue(props.iconKeyPath || '');
+      const optionDescription = resolveValue(
+        props.optionDescriptionKeyPath || '',
+      );
 
       // Fallback: If 'value' is undefined or an empty string, use 'id' as the value
-      if (typeof value === 'undefined' || value === '') {
-        value = id;
+      if (typeof optionValue === 'undefined' || optionValue === '') {
+        optionValue = id;
       }
 
       if (id === '') {
@@ -427,13 +451,13 @@ const ListBox = (props: ListBoxProps) => {
           `${keyPath} was not found in the response for field ${fieldId}`,
         );
       }
-      if (value === '') {
+      if (optionValue === '') {
         console.warn(
           `${valuePath} was not found in the response for field ${fieldId}`,
         );
       }
 
-      return { id, value };
+      return { id, value: optionValue, icon, description: optionDescription };
     });
   };
 
@@ -626,6 +650,35 @@ const ListBox = (props: ListBoxProps) => {
     return index > -1 ? items[index].value : '';
   }, [items, value]);
 
+  const getSelectedItemIcon = useMemo(() => {
+    let index = -1;
+    if (isMultiSelect) {
+      let values = value ? JSON.parse(value) : [];
+      values = Array.isArray(values) ? values : [String(values)];
+      const indexes: any = [];
+      const selectedValues =
+        values.map((val: any) => {
+          index = items.findIndex((el) => el.id === val);
+          indexes.push(index);
+        }) || [];
+      if (indexes.length > 0 && items.length > 0) {
+        const firstItem = items[0] as ListBoxItemProps;
+        return firstItem.icon || undefined;
+      }
+    } else {
+      try {
+        index = items.findIndex((el) => el.id === value);
+      } catch (error) {
+        index = -1;
+      }
+      if (isMappable && selectedTab === 'AppFields') {
+        return index > -1 ? items[index].icon : '';
+      }
+    }
+
+    return index > -1 ? items[index].icon : '';
+  }, [items, value]);
+
   const getItemFromText = (
     textValue: string,
   ): {
@@ -696,11 +749,57 @@ const ListBox = (props: ListBoxProps) => {
       setTempPlaceholder(getSelectedItem || '');
     }
   };
-
-  const onSearchChange = (e: InputEvent) => {
+  const debounceTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onSearchChange = async (e: InputEvent) => {
     if (e.currentTarget instanceof HTMLInputElement) {
-      setSearchValue(e.currentTarget.value.trim());
-      setQuery(e.currentTarget.value.trim());
+      const searchTerm = e.currentTarget.value.trim();
+      if (!props.enableServerSideSearch) {
+        setSearchValue(searchTerm);
+        setQuery(searchTerm);
+      }
+
+      if (
+        isSearchable &&
+        props.enableServerSideSearch &&
+        props.serverSideSearchParamName &&
+        endpointUrl
+      ) {
+        if (debounceTimeout.current) {
+          clearTimeout(debounceTimeout.current);
+        }
+        debounceTimeout.current = setTimeout(async () => {
+          setLoading(true);
+          setItems([]);
+          setSortedFilteredItems([]);
+          try {
+            const params = new URLSearchParams();
+            params.append(props.serverSideSearchParamName || '', searchTerm);
+            params.append('include', 'meta');
+
+            const response = await props.apiHandler.callDynamicDataEndpoint<
+              {
+                id: string;
+                value: string;
+              }[]
+            >(new URL(`${endpointUrl}?${params.toString()}`), {}, 'POST');
+
+            if (response) {
+              const serverFilteredItems = dynamicResponseMapper(response);
+              setItems(serverFilteredItems);
+              setSortedFilteredItems(serverFilteredItems);
+            } else {
+              setItems([]);
+              setSortedFilteredItems([]);
+            }
+          } catch (error) {
+            console.error('Error performing server-side search:', error);
+            setItems([]);
+            setSortedFilteredItems([]);
+          } finally {
+            setLoading(false);
+          }
+        }, 500);
+      }
     }
   };
 
@@ -915,6 +1014,13 @@ const ListBox = (props: ListBoxProps) => {
                           `
                         : isDropdownOpen && !isEditable
                         ? html`
+                            ${getSelectedItem &&
+                            props.iconKeyPath &&
+                            html`<img
+                              src="${getSelectedItemIcon || ''}"
+                              alt="icon"
+                              class="${styles.selectedIcon}"
+                            />`}
                             <input
                               ref=${(r: any) => {
                                 if (r && isDropdownOpen) {
@@ -930,6 +1036,13 @@ const ListBox = (props: ListBoxProps) => {
                             />
                           `
                         : html`
+                            ${getSelectedItem &&
+                            props.iconKeyPath &&
+                            html`<img
+                              src="${getSelectedItemIcon || ''}"
+                              alt="icon"
+                              class="${styles.selectedIcon}"
+                            />`}
                             <input
                               ref=${(r: any) => {
                                 if (r && isDropdownOpen) {
@@ -952,7 +1065,24 @@ const ListBox = (props: ListBoxProps) => {
                             />
                           `}`}
                 </span>
-
+                <div class=${styles.chevronIcon}>
+                  <svg
+                    class="styles-module_accountFieldDropdownIcon__3161J"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    style=""
+                  >
+                    <path
+                      d="M15 8L10 13L5 8"
+                      stroke="#999999"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                    ></path>
+                  </svg>
+                </div>
                 <div ref=${dropdownRef} style="display: flex;">
                   ${taggedSelect &&
                   onAddTag &&

package/src/components/MultipurposeField/Dropdown/styles.module.scss

@@ -100,6 +100,11 @@
         color: #999999;
       }
     }
+    .selectedIcon {
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+    }
     &.readonly {
       cursor: auto;
     }

package/src/components/MultipurposeField/TagMenu/index.ts

@@ -24,6 +24,8 @@ interface Option {
   value: string;
   id: string;
   isSelected?: boolean;
+  icon?: string;
+  description?: string;
 }
 interface FieldMenuProps {
   tags: NestedObject;
@@ -279,6 +281,8 @@ const FieldDropdown = (props: FieldMenuProps) => {
                       return html`
                         <div
                           class=${`${styles.value} ${
+                            option.icon ? styles.valueWithIcon : ''
+                          } ${
                             selectedValues.includes(option.id)
                               ? styles.selected
                               : ''
@@ -294,7 +298,25 @@ const FieldDropdown = (props: FieldMenuProps) => {
                               : ''
                           }`}
                         >
-                          ${option.value}
+                          ${option.icon &&
+                          html`<img
+                            src="${option.icon}"
+                            alt="icon"
+                            class="${styles.icon}"
+                          />`}
+                          <div class="label-text">
+                            <div
+                              class="${option.description
+                                ? styles.nameWithDescription
+                                : ''}"
+                            >
+                              ${option.value}
+                            </div>
+                            ${option.description &&
+                            html`<div class="${styles.description}">
+                              ${option.description}
+                            </div>`}
+                          </div>
                         </div>
 
                         ${i !== arr.length - 1

package/src/components/MultipurposeField/TagMenu/styles.module.scss

@@ -45,7 +45,7 @@
     .tagMenuHeaderItem {
       padding: 6px 12px;
       background: #f2f2f2;
-      border-radius: 100px;
+      border-radius: 5px;
       font-weight: 400;
       font-size: 10px;
       line-height: 12px;
@@ -75,12 +75,33 @@
         cursor: pointer;
         &:hover {
           background: rgba(66, 80, 240, 0.1);
-          border-radius: 100px;
+          border-radius: 5px;
         }
       }
+      .valueWithIcon {
+        display: flex;
+        align-items: center;
+        gap: 8px; /* Adjust spacing between image and text */
+        height: 40px;
+      }
+      .icon {
+        width: 20px;
+        height: 20px;
+      }
+
+      .description {
+        font-size: 0.85em;
+        color: #666;
+        width: 31.5rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .nameWithDescription {
+        font-weight: 500;
+      }
       .selected {
         background: rgba(66, 80, 240, 0.1);
-        border-radius: 100px;
+        border-radius: 5px;
       }
     }
   }

package/src/components/MultipurposeField/index.tsx

@@ -264,9 +264,9 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
                 class="tagify__tag ${tagData.class ? tagData.class : ''}"
             >
             <div class="${styles.tagifyTagTemplate}">
-            <div class="${styles.tagifyAppIcon}">
-              <img src="${tagData.appIcon}" alt="" />
-            </div>
+            <img class="${styles.tagifyAppIcon}" src="${
+        tagData.appIcon
+      }" alt="" />
               <span data-hint="${
                 typeof tagData.title === 'string' ? tagData.title : ''
               }" class='tagify__tag-text'>${originText}: ${tagData.text}</span>

package/src/components/MultipurposeField/styles.module.scss

@@ -62,13 +62,10 @@
   align-items: center; /* Ensures vertical alignment */
   gap: 4px; /* Optional spacing between icon and text */
   .tagifyAppIcon {
-    img {
-      margin-right: 5px;
-
-      width: 16px; /* Adjust based on your design */
-      height: 16px;
-      object-fit: contain;
-      display: block;
-    }
+    display: inline-block;
+    height: 16px;
+    margin-right: 3px;
+    border-radius: 2px;
+    pointer-events: none;
   }
 }

package/src/components/TagsMenu/styles.module.scss

@@ -281,7 +281,7 @@
             padding: 5px 10px;
             &:hover {
               background: rgba(66, 80, 240, 0.1);
-              border-radius: 100px;
+              border-radius: 5px;
             }
           }
         }