@integry/sdk 4.6.16 → 4.6.18

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

@@ -31,6 +31,10 @@
       cursor: pointer;
       position: relative;
 
+      svg {
+        margin-right: 4px;
+      }
+
       &.tabWithResults {
         font-weight: 500;
         color: #4f46e5;
@@ -104,7 +108,7 @@
 
         &.searchMatch {
           > .listItemContent {
-            background-color: rgba(79, 70, 229, 0.1);
+            // background-color: rgba(79, 70, 229, 0.1);
             border-radius: 4px;
           }
         }
@@ -131,14 +135,20 @@
           }
           span.tagIcon {
             margin-right: 10px;
-            svg {
+            svg,
+            img {
               width: 1rem;
               height: 1rem;
+              position: relative;
+              top: 2px;
+            }
+            img {
+              margin-right: 0px;
             }
           }
           span.key {
             mark {
-              background-color: rgba(79, 70, 229, 0.2);
+              // background-color: rgba(79, 70, 229, 0.2);
               color: inherit;
               font-weight: 500;
               border-radius: 2px;
@@ -157,10 +167,10 @@
               color: #3b82f6;
             }
           }
-          span.value,
-          span.key {
-            color: hsl(240 3.8% 46.1%);
+          span.value {
+            color: hsl(240 3.8% 60%);
             font-size: 0.75rem;
+            font-weight: 400;
             line-height: 1rem;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -168,7 +178,25 @@
             margin-left: 5px;
 
             mark {
-              background-color: rgba(79, 70, 229, 0.2);
+              // background-color: rgba(79, 70, 229, 0.2);
+              color: inherit;
+              font-weight: 500;
+              border-radius: 2px;
+              padding: 0 2px;
+            }
+          }
+          span.key {
+            color: hsl(240 10% 3.9%);
+            font-weight: 500;
+            font-size: 0.8rem;
+            line-height: 1rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-left: 5px;
+
+            mark {
+              // background-color: rgba(79, 70, 229, 0.2);
               color: inherit;
               font-weight: 500;
               border-radius: 2px;
@@ -185,12 +213,23 @@
       }
     }
     .outputSection {
-      margin-top: 5px;
-      margin-bottom: 5px;
-      padding: 5px;
       background-color: rgba(0, 0, 0, 0.02);
       border-radius: 4px;
       border-left: 2px solid #e2e8f0;
+
+      // Remove padding when the section is empty
+      ul {
+        padding: 5px;
+        &:empty {
+          padding: 0;
+          border-left: none;
+          background-color: transparent;
+        }
+      }
+    }
+    .tagsListWrapper {
+      max-height: 300px;
+      overflow-y: scroll;
     }
   }
 }

package/src/features/common/ActionForm/index.ts

@@ -50,6 +50,7 @@ interface ActionFormPropsType extends StoreType {
   onFieldChangeCallback?: (fieldId: string, value: string) => void;
   tagsComponent?: any;
   tagsTree?: any;
+  showMappingMenu: boolean;
 }
 
 interface ActionFormStateType {
@@ -1633,6 +1634,11 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       el.data_type === 'NUMBER[]'
                                     )}
                                     tagsComponent=${this.props.tagsComponent}
+                                    tagsTree=${
+                                      this.props.showMappingMenu
+                                        ? this.props.tagsTree
+                                        : null
+                                    }
                                   ><//>
                                   </${ConfigureFieldWrapper}>
                                 </div>
@@ -1996,6 +2002,11 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                     this.refreshRootStepData
                                   }
                                   tagsComponent=${this.props.tagsComponent}
+                                  tagsTree=${
+                                    this.props.showMappingMenu
+                                      ? this.props.tagsTree
+                                      : null
+                                  }
                                 />
                               
                                 </${ConfigureFieldWrapper}>

package/src/index.ts

@@ -1995,6 +1995,7 @@ export class IntegryJS {
       onFieldChangeCallback: () => {
         // Placeholder function for future implementation
       },
+      showMappingMenu: false,
     },
   ) => {
     const target = document.getElementById(options.containerId);
@@ -2023,6 +2024,7 @@ export class IntegryJS {
                 tagsComponent=${options.tagsComponent}
                 onFieldChangeCallback=${options.onFieldChangeCallback}
                 tagsTree=${options.tagsTree}
+                showMappingMenu=${options.showMappingMenu}
               />
             <//>
           <//>

package/src/types/index.ts

@@ -296,6 +296,7 @@ export type RenderFlowStepOptions = {
   tagsComponent?: any;
   onFieldChangeCallback: (fieldId: string, value: any) => void;
   tagsTree: any;
+  showMappingMenu: boolean;
 };
 export type ShowFunctionOptions = {
   params?: Record<string, any>;