@integry/sdk 4.6.91 → 4.6.93

package/package.json

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

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

@@ -1,11 +1,12 @@
+'use client';
+
 import { html } from 'htm/preact';
 import { connect } from 'unistore/preact';
-import { useContext, useEffect, useState } from 'preact/hooks';
-import { DynamicField, NestedObject } from '@/interfaces';
+import { useContext, useEffect, useState, useRef } from 'preact/hooks';
+import type { DynamicField, NestedObject } from '@/interfaces';
 import AppContext from '@/contexts/AppContext';
-import { StoreType } from '@/types/store';
-import { IntegryAPI } from '@/modules/api';
-import { Input } from '@/components/Input';
+import type { StoreType } from '@/types/store';
+import type { IntegryAPI } from '@/modules/api';
 import { MultipurposeField } from '@/components/MultipurposeField';
 import { Loader } from '@/components/Loader';
 import { actionFunctions } from '@/store';
@@ -36,6 +37,8 @@ export type DynamicFieldsProps = {
   value?: any;
   isDisabled?: boolean;
   onChangeCallback?: (val: any) => void;
+  dependsOn?: string[];
+  isArray?: boolean; // New prop to determine if the output should be an array
 } & StoreType;
 
 interface DynamicDataItem {
@@ -55,8 +58,6 @@ interface ApiResponse {
 const DynamicTypedFields = (props: DynamicFieldsProps) => {
   const {
     dynamicField,
-    endpointData,
-    sourceFunctionData = {},
     sourceFlowIntegrataionInvocationUrl = '',
     selectedAuthId = '',
     dataSourceBody,
@@ -67,21 +68,35 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     onChange,
     isDisabled = false,
     onChangeCallback = () => null,
+    dependsOn = [],
+    isArray = false, // Default to false for backward compatibility
   } = props;
   const [dynamicItems, setDynamicItems] = useState<DynamicDataItem[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
-  const [customFieldsData, setCustomFieldsData] = useState<any>(
-    value && value !== '' && typeof value === 'string' ? JSON.parse(value) : {},
-  );
+  const [customFieldsData, setCustomFieldsData] = useState<any>(() => {
+    // Initialize from value prop if available
+    if (value) {
+      const parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+
+      // If isArray is true and the value is an array, extract the first object
+      if (isArray && Array.isArray(parsedValue) && parsedValue.length > 0) {
+        return parsedValue[0];
+      }
+
+      return parsedValue;
+    }
+    return {};
+  });
   const [
     isErrorOnLoadingCustomFields,
     setIsErrorOnLoadingCustomFields,
   ] = useState<boolean>(false);
 
   const context = useContext(AppContext);
-  const isReadOnly = context?.isReadOnly;
   const apiHandlerRef = context?.apiHandler || props.apiHandler;
 
+  const fieldsHaveBeenFetched = useRef(false);
+
   const resolveValue = (path: string, item: any): any => {
     // If the path contains template tags, process it
     if (/{([^}]+)}/.test(path)) {
@@ -149,25 +164,61 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
     }
   };
 
+  // Split the effects - one for fetching fields, one for handling value changes
   useEffect(() => {
-    if (value && Object.keys(value).length > 0) {
-      setCustomFieldsData(value);
+    // Only fetch fields on initial mount or when parentFieldsChanged changes
+    if (dependsOn.length > 0 && !parentFieldsChanged) {
+      setLoading(false);
+      setIsErrorOnLoadingCustomFields(false);
+      return;
     }
-    fetchDynamicFields();
-  }, [parentFieldsChanged]);
-
-  const onFieldChange = (id: string, val: string, type: string) => {
-    const data = {
-      ...customFieldsData,
-      [id]: val,
-    };
-    setCustomFieldsData(data);
-    if (onChange) {
-      onChange(data);
+    if (!fieldsHaveBeenFetched.current || parentFieldsChanged) {
+      fetchDynamicFields();
+      fieldsHaveBeenFetched.current = true;
     }
-    if (onChangeCallback) {
-      onChangeCallback(JSON.stringify(data));
+  }, [parentFieldsChanged]); // Remove value from dependencies
+
+  // Separate effect for handling external value changes
+  useEffect(() => {
+    // Only update from props if the value is different from current state
+    // AND it's not coming from our own onChange (which would cause a loop)
+    if (value && !loading) {
+      let parsedValue = typeof value === 'string' ? JSON.parse(value) : value;
+
+      // If isArray is true and the value is an array, extract the first object for internal state
+      if (isArray && Array.isArray(parsedValue) && parsedValue.length > 0) {
+        [parsedValue] = parsedValue;
+      }
+
+      // Compare if the value is actually different to avoid unnecessary updates
+      const currentValueStr = JSON.stringify(customFieldsData);
+      const newValueStr = JSON.stringify(parsedValue);
+
+      if (currentValueStr !== newValueStr) {
+        setCustomFieldsData(parsedValue);
+      }
     }
+  }, [value, loading, isArray]);
+
+  // Modify the onFieldChange function to handle array output if isArray is true
+  const onFieldChange = (id: string, val: string, type: string) => {
+    // Update local state immediately
+    setCustomFieldsData((prevData: any) => {
+      const newData = {
+        ...prevData,
+        [id]: val,
+      };
+
+      // Call parent callbacks with the new data, wrapping in array if isArray is true
+      if (onChange) {
+        onChange(isArray ? [newData] : newData);
+      }
+      if (onChangeCallback) {
+        onChangeCallback(JSON.stringify(isArray ? [newData] : newData));
+      }
+
+      return newData;
+    });
   };
 
   return html`
@@ -182,7 +233,7 @@ const DynamicTypedFields = (props: DynamicFieldsProps) => {
         : html`
             ${dynamicItems.map(
               (el) => html`
-                <div class=${styles.dynamicTypedFieldWrapper}>
+                <div class=${styles.dynamicTypedFieldWrapper} key=${el.id}>
                   <${MultipurposeField}
                     id="${el.id}"
                     title="${el.title}"

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

@@ -52,6 +52,8 @@ interface ActionFormStateType {
   parentFields: any;
   parentFieldsChanged: boolean;
   aiAssistedFields: string[]; // New state to track fields with AI assist enabled
+  changedParentMachineName?: string; // New prop to track changes in parent machine name
+  parentChangeVersion?: number; // New prop to track changes in parent machine name
 }
 
 interface StepDataMapping {
@@ -78,6 +80,8 @@ class FunctionForm extends Component<
       parentFields: [],
       parentFieldsChanged: false,
       aiAssistedFields: [], // Initialize empty array for AI assisted fields
+      changedParentMachineName: '',
+      parentChangeVersion: 0,
     };
   }
 
@@ -411,7 +415,10 @@ class FunctionForm extends Component<
 
     // Check if the field is a parent field
     if (this.state.parentFields.includes(fieldId)) {
-      this.setState({ parentFieldsChanged: !this.state.parentFieldsChanged });
+      this.setState({
+        changedParentMachineName: fieldId,
+        parentChangeVersion: Date.now(),
+      });
     }
 
     if (this.props.customSaveCallback) {
@@ -894,7 +901,12 @@ class FunctionForm extends Component<
                       field.dataSourceBody,
                       this.state.dynamicFieldDataState,
                     )}
-                    parentFieldsChanged=${this.state.parentFieldsChanged}
+                    parentFieldsChanged=${field.dependsOn.length > 0 &&
+                    field.dependsOn.includes(
+                      this.state.changedParentMachineName,
+                    )
+                      ? this.state.parentChangeVersion
+                      : 0}
                     activityOutputData=${arrayToNestedJSONWithFirstValue(
                       JSONToActivityOutputData(this.props.variables || {}),
                       JSONToDynamicFieldData(this.props.variables || {}),
@@ -904,6 +916,8 @@ class FunctionForm extends Component<
                     )}
                     value=${this.state.dynamicFieldDataState[field.id] || {}}
                     isDisabled=${isAIAssisted}
+                    dependsOn=${field.dependsOn}
+                    isArray=${field.dataType === 'array'}
                   />
                 `,
               )}

package/src/index.ts

@@ -609,7 +609,8 @@ export class IntegryJS {
           if (
             options.connectedAccountId &&
             !response.meta.app.connected_accounts.find(
-              (account: any) => account.id === options.connectedAccountId,
+              (account: any) =>
+                Number(account.id) === Number(options.connectedAccountId),
             )
           ) {
             return reject(new Error('Connected account not found.'));
@@ -2055,6 +2056,11 @@ export class IntegryJS {
       onTagSelect: () => {
         // Placeholder function for future implementation
       },
+      renderValuesTab: false,
+      options: [],
+      onOptionClick: () => {
+        // Placeholder function for future implementation
+      },
     },
   ) => {
     const target = document.getElementById(options.containerId);
@@ -2074,6 +2080,9 @@ export class IntegryJS {
               <${TagsMenu}
                 tagsTree=${options.tagsTree}
                 onSelect=${options.onTagSelect}
+                renderValuesTab=${options.renderValuesTab}
+                options=${options.options}
+                onOptionClick=${options.onOptionClick}
               />
             <//>
           <//>

package/src/types/index.ts

@@ -304,6 +304,11 @@ export type RenderMappingMenuOptions = {
   containerId: string;
   tagsTree: any;
   onTagSelect: (tag: any) => void;
+  renderValuesTab?: boolean;
+  options?: {
+    [key: string]: any;
+  };
+  onOptionClick?: (option: any) => void;
 };
 export type ShowFunctionOptions = {
   params?: Record<string, any>;