@integry/sdk 4.6.83 → 4.6.85

package/package.json

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

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

@@ -77,6 +77,7 @@ interface ListBoxProps {
   iconKeyPath?: string;
   optionDescriptionKeyPath?: string;
   skipInitialLoad?: boolean;
+  showMenuOnLeft?: boolean;
 }
 
 const ListBox = (props: ListBoxProps) => {
@@ -122,6 +123,7 @@ const ListBox = (props: ListBoxProps) => {
     allowWorkspaceConnectedAccounts = false,
     tagsTree = null,
     skipInitialLoad = false,
+    showMenuOnLeft = false,
   } = props;
 
   const [query, setQuery] = useState<string>('');
@@ -1171,6 +1173,7 @@ const ListBox = (props: ListBoxProps) => {
                       nextPage=${nextPage}
                       isDynamic=${isDynamic}
                       tagsTree=${tagsTree}
+                      showMenuOnLeft=${props.showMenuOnLeft || false}
                     />`}
                   </div>
                 `}

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

@@ -50,6 +50,7 @@ interface FieldMenuProps {
   tagsComponent?: any;
   isDynamic?: boolean;
   tagsTree?: any;
+  showMenuOnLeft?: boolean; // used when showing mapping menu in web app.
 }
 
 const customComponent = (props: { element: any }) => {
@@ -77,10 +78,10 @@ const FieldDropdown = (props: FieldMenuProps) => {
     isMultiSelect = false,
     loadingOptions = false,
     nextPage = '',
-    tagsComponent = null,
     isDynamic = true,
     tagsTree = null,
     isMappable = false,
+    showMenuOnLeft = false,
   } = props;
 
   // Set active tab in state
@@ -164,10 +165,72 @@ const FieldDropdown = (props: FieldMenuProps) => {
     }
     return tagMenuStyle;
   };
-  tagMenyStyleRef.current = getDynamicTagMenuPosition();
+
+  const getDynamicTagMenuPositionLeftAligned = (): any => {
+    let tagMenuStyle = {} as any;
+
+    if (parentContainer) {
+      const parentRect = parentContainer.getBoundingClientRect();
+      const estimatedMenuWidth = 210; // Estimated width for the menu
+      const estimatedMenuHeight = 400; // Estimated height for the menu (same as the 210 value mentioned in your original code)
+
+      // Position the menu to the left of the parent container
+      tagMenuStyle = {
+        top: `${parentRect.top}px`,
+        right: `${window.innerWidth - parentRect.left}px`, // This positions it to the left of the container
+        display: !isScrolledIntoView(parentContainer, 'steps-body-container')
+          ? 'none'
+          : 'block',
+      };
+
+      // Check if the tag menu would overflow to the left of the window
+      if (parentRect.left - estimatedMenuWidth < 0) {
+        // If it would overflow to the left, position it to the right of the parent instead
+        tagMenuStyle = {
+          ...tagMenuStyle,
+          right: 'auto', // Clear the right property
+          left: `${parentRect.right}px`,
+        };
+      }
+
+      // Check if the menu would overflow vertically
+      if (parentRect.top + estimatedMenuHeight > window.innerHeight - 8) {
+        // If it would overflow at the bottom, adjust the top position
+        const availableHeight = window.innerHeight - 8 - parentRect.top;
+        tagMenuStyle.maxHeight = `${availableHeight}px`;
+
+        // If available height is too small, position above the parent instead
+        if (availableHeight < 300) {
+          // Minimum usable height
+          tagMenuStyle.top = 'auto';
+          tagMenuStyle.bottom = `${
+            window.innerHeight - parentRect.top - parentRect.height
+          }px`;
+          tagMenuStyle.maxHeight = `${Math.min(
+            estimatedMenuHeight,
+            parentRect.top - 8,
+          )}px`;
+        }
+      } else {
+        tagMenuStyle.maxHeight = `${estimatedMenuHeight}px`;
+      }
+    } else {
+      tagMenuStyle = {
+        display: 'none',
+      };
+    }
+
+    return tagMenuStyle;
+  };
+
+  tagMenyStyleRef.current = showMenuOnLeft
+    ? getDynamicTagMenuPositionLeftAligned()
+    : getDynamicTagMenuPosition();
 
   const onScroll = (): void => {
-    tagMenyStyleRef.current = getDynamicTagMenuPosition();
+    tagMenyStyleRef.current = showMenuOnLeft
+      ? getDynamicTagMenuPositionLeftAligned()
+      : getDynamicTagMenuPosition();
     setRenderAgain((prev) => !prev);
   };
 

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

@@ -159,6 +159,7 @@
 .tagMenuV2 {
   height: max-content;
   max-height: 400px !important;
-  max-width: fit-content;
+  max-width: fit-content !important;
   overflow: hidden;
+  min-width: 470px;
 }

package/src/components/MultipurposeField/index.tsx

@@ -56,6 +56,7 @@ interface MultipurposeFieldProps {
   tagsComponent?: any;
   tagsTree?: any;
   isDisabled?: boolean;
+  showMenuOnLeft?: boolean;
 }
 
 const MultipurposeField = (props: MultipurposeFieldProps) => {
@@ -91,6 +92,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     tagsComponent = null,
     tagsTree = null,
     isDisabled = false,
+    showMenuOnLeft = false,
   } = props;
   const [showTagMenu, setShowTagMenu] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -764,6 +766,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
             refreshRootStepData=${refreshRootStepData}
             tagsComponent=${tagsComponent}
             tagsTree=${tagsTree}
+            showMenuOnLeft=${showMenuOnLeft}
           />
         </div>`}
       </div>

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

@@ -51,6 +51,7 @@ interface ActionFormPropsType extends StoreType {
   tagsComponent?: any;
   tagsTree?: any;
   showMappingMenu: boolean;
+  showMenuOnLeft: boolean;
 }
 
 interface ActionFormStateType {
@@ -1568,6 +1569,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       ? this.props.tagsTree
                                       : null
                                   }
+                                  showMenuOnLeft=${
+                                    this.props.showMenuOnLeft || false
+                                  }
                                   skipInitialLoad=${
                                     (elParentFields.length ?? 0) > 0 &&
                                     !elParentFields?.some(
@@ -1763,6 +1767,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                         ? this.props.tagsTree
                                         : null
                                     }
+                                    showMenuOnLeft=${
+                                      this.props.showMenuOnLeft || false
+                                    }
                                   ><//>
                                   </${ConfigureFieldWrapper}>
                                 </div>
@@ -1972,6 +1979,8 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       tagsTree=${this.props.showMappingMenu
                                         ? this.props.tagsTree
                                         : null}
+                                      showMenuOnLeft=${this.props
+                                        .showMenuOnLeft || false}
                                     />
                                   </div>
                                 `;
@@ -2067,6 +2076,8 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       tagsTree=${this.props.showMappingMenu
                                         ? this.props.tagsTree
                                         : null}
+                                      showMenuOnLeft=${this.props
+                                        .showMenuOnLeft || false}
                                       dataSourceBody=${this.replacePlaceholders(
                                         uiField?.data_source.body || {},
                                         this.state.dynamicFieldsData,
@@ -2322,6 +2333,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                       ? this.props.tagsTree
                                       : null
                                   }
+                                  showMenuOnLeft=${
+                                    this.props.showMenuOnLeft || false
+                                  }
                                 />
                               
                                 </${ConfigureFieldWrapper}>

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

@@ -30,6 +30,7 @@ export type DynamicFieldsProps = {
   onChangeCallback?: (val: any) => void;
   objectValue?: any;
   tagsTree?: any;
+  showMenuOnLeft?: boolean;
 } & StoreType;
 
 interface DynamicDataItem {
@@ -58,6 +59,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     onChangeCallback = () => null,
     objectValue = null,
     tagsTree = null,
+    showMenuOnLeft = false,
   } = props;
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -220,6 +222,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
                   refreshRootStepData=${refreshRootStepData}
                   fieldId=${el.id || ''}
                   tagsTree=${tagsTree}
+                  showMenuOnLeft=${showMenuOnLeft}
                 />
               </div>
             `;

package/src/index.ts

@@ -2003,6 +2003,7 @@ export class IntegryJS {
       },
       showMappingMenu: false,
       isReadOnly: false,
+      showMenuOnLeft: false,
     },
   ) => {
     const target = document.getElementById(options.containerId);
@@ -2033,6 +2034,7 @@ export class IntegryJS {
                 tagsTree=${options.tagsTree}
                 showMappingMenu=${options.showMappingMenu}
                 isReadOnly=${options.isReadOnly}
+                showMenuOnLeft=${options.showMenuOnLeft}
               />
             <//>
           <//>

package/src/types/index.ts

@@ -298,6 +298,7 @@ export type RenderFlowStepOptions = {
   tagsTree: any;
   showMappingMenu?: boolean;
   isReadOnly?: boolean;
+  showMenuOnLeft?: boolean;
 };
 export type RenderMappingMenuOptions = {
   containerId: string;