@integry/sdk 4.6.17 → 4.6.18

package/package.json

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

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

@@ -8,6 +8,7 @@ import { isScrolledIntoView } from '@/utils/common';
 import { searchJSON } from '@/utils/searchJson';
 import { Input } from '@/components/Input';
 // import TagsMenuComponent from '@/components/React/TagsMenu';
+import { TagsMenu } from '@/components/TagsMenu';
 import { TagOptions } from '../TagOptions';
 import { ThreeDotLoader } from '../../ThreeDotLoader';
 import styles from './styles.module.scss';
@@ -46,6 +47,7 @@ interface FieldMenuProps {
   nextPage?: string;
   tagsComponent?: any;
   isDynamic?: boolean;
+  tagsTree?: any;
 }
 
 const customComponent = (props: { element: any }) => {
@@ -75,6 +77,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
     nextPage = '',
     tagsComponent = null,
     isDynamic = true,
+    tagsTree = null,
   } = props;
 
   // Set active tab in state
@@ -127,7 +130,9 @@ const FieldDropdown = (props: FieldMenuProps) => {
           ? 'none'
           : 'block',
       maxWidth: parentContainer
-        ? `${parentContainer.getBoundingClientRect().width}px`
+        ? `${
+            parentContainer.getBoundingClientRect().width - (tagsTree ? 25 : 0)
+          }px`
         : '342px',
     } as any;
     if (
@@ -215,12 +220,15 @@ const FieldDropdown = (props: FieldMenuProps) => {
   }
 
   return html` <div
-    class=${`${styles.tagMenu} ${enableSearch ? styles.tagMenuWithSearch : ''}`}
+    class=${`${styles.tagMenu} ${tagsTree ? styles.tagMenuV2 : ''} ${
+      enableSearch && !tagsTree ? styles.tagMenuWithSearch : ''
+    }`}
     style=${parentContainer && tagMenyStyleRef?.current
       ? tagMenyStyleRef.current
       : ''}
   >
     ${enableSearch &&
+    !tagsTree &&
     html`
       <div class=${styles.tagMenuSearch}>
         <${Input}
@@ -252,7 +260,7 @@ const FieldDropdown = (props: FieldMenuProps) => {
     </div>`}
     <div
       class=${`${styles.tagMenuBody} ${
-        enableSearch ? styles.tagMenuBodyWithSearch : ''
+        enableSearch && !tagsTree ? styles.tagMenuBodyWithSearch : ''
       }`}
     >
       ${activeTab === Tabs.Values
@@ -340,8 +348,11 @@ const FieldDropdown = (props: FieldMenuProps) => {
                 </div>`}
           </div>`
         : html` <div className="${styles.mappedFieldMenu}">
-            ${tagsComponent
-              ? html``
+            ${tagsTree
+              ? html`<${TagsMenu}
+                  tagsTree=${tagsTree}
+                  onSelect=${onTagClick}
+                />`
               : html`${Object.keys(
                   !isEditable ? searchJSON(tags, searchValue) : tags,
                 ).length > 0

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

@@ -134,3 +134,10 @@
     padding-left: 3px !important;
   }
 }
+
+.tagMenuV2 {
+  height: max-content;
+  max-height: 400px;
+  max-width: fit-content;
+  overflow: hidden;
+}

package/src/components/MultipurposeField/index.tsx

@@ -54,6 +54,7 @@ interface MultipurposeFieldProps {
   onButtonClickScript?: string;
   buttonScriptRequiresAuthToken?: boolean;
   tagsComponent?: any;
+  tagsTree?: any;
 }
 
 const MultipurposeField = (props: MultipurposeFieldProps) => {
@@ -87,6 +88,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     onButtonClickScript = '',
     buttonScriptRequiresAuthToken = false,
     tagsComponent = null,
+    tagsTree = null,
   } = props;
   const [showTagMenu, setShowTagMenu] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -280,6 +282,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
       }
       tags.forEach((tag) => {
         const tagValue = tag.replace(/{|}/g, '');
+        const tagValueParts = tagValue.split('.');
         const tagData = (activityOutputDataRaw || []).find((element: any) => {
           return (
             element.value === tagValue ||
@@ -287,7 +290,10 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
           );
         }) || {
           value: tagValue,
-          text: tagValue,
+          text:
+            tagValueParts.length > 0
+              ? prettifyString(tagValueParts[tagValueParts.length - 1])
+              : tagValue,
           title: tagValue,
         };
         if (tagData) {
@@ -342,18 +348,38 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
       });
       return tagValue;
     }
-    return activityOutputData[tag];
+    return activityOutputData[tag] || '';
   };
 
-  const insertTag = (tag: string) => {
-    const result = activityOutputDataRaw.find((element: any) => {
+  const prettifyString = (str: string) => {
+    return str
+      .replace(/_/g, ' ') // Replace underscores with spaces
+      .replace(/\b\w/g, (c) => c.toUpperCase()); // Capitalize first letter of each word
+  };
+
+  const insertTag = (tag: string | any) => {
+    let result = activityOutputDataRaw.find((element: any) => {
       return element.text === tag;
     });
+    let isStandardTag = true;
+    if (
+      !result &&
+      tag.hasOwnProperty('value') &&
+      tag.hasOwnProperty('key') &&
+      tag.hasOwnProperty('currentPath')
+    ) {
+      result = {
+        value: tag.currentPath,
+        text: tag.key,
+        title: tag.value,
+      };
+      isStandardTag = false; // This tag is coming from TagsMenu component
+    }
     if (tagify) {
       var tagElm = tagify.createTagElem({
         value: result.value,
-        text: result.text,
-        title: getTagData(tag),
+        text: isStandardTag ? result.text : prettifyString(result.text),
+        title: isStandardTag ? getTagData(tag) : result.title,
         editable: false,
       });
       tagify.injectAtCaret(tagElm);
@@ -364,8 +390,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     }
   };
 
-  const onTagClick = (tag: string) => {
-    console.log('tag', tag);
+  const onTagClick = (tag: string | any) => {
     if (tagify) {
       if (!allowTagsInText) {
         tagify.removeAllTags();
@@ -683,6 +708,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
               : false}
             refreshRootStepData=${refreshRootStepData}
             tagsComponent=${tagsComponent}
+            tagsTree=${tagsTree}
           />
         </div>`}
       </div>

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

@@ -31,7 +31,7 @@
     }
     tags {
       width: 100%;
-      max-width: 682px;
+      // max-width: 682px;
       font-family: 'Inter';
       height: 40px;
       padding-top: 5px;