@integration-app/react 2.19.0 → 2.21.0

package/dist/cjs/components/DataBuilder/Formula/styles.module.css.cjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Formula/tpl.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -14,12 +14,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ComboBoxTag = require('../../ComboBoxElements/ComboBoxTag.cjs');
 
-const TplFormula = React.forwardRef(
-  (_, ref) => {
-    console.error("TplFormula: Unsupported formula type used");
-    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, disabled: true, children: "Unsupported formula type" });
-  }
-);
+const TplFormula = React.forwardRef((_, ref) => {
+  console.error("TplFormula: Unsupported formula type used");
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, disabled: true, children: "Unsupported formula type" });
+});
 TplFormula.displayName = "TplFormula";
 
 exports.default = TplFormula;

package/dist/cjs/components/DataBuilder/Formula/var.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -20,74 +20,45 @@ var Tag = require('../../Tag/Tag.cjs');
 require('../../Tag/TagPlaceholder.cjs');
 var SegmentSeparator = require('../../Tag/SegmentSeparator.cjs');
 
-const VarFormula = React.forwardRef(
-  (props, ref) => {
-    const {
-      formula,
-      variablesSchema,
-      // We do not use the `optionFactories` prop, but we need to remove it from restProps
-      optionFactories: _of,
-      ...restProps
-    } = props;
-    const iconUri = sdk.getIconUriForLocator(variablesSchema, formula.locator);
-    const nameComponents = sdk.getNameComponentsForLocator(
-      variablesSchema,
-      formula.locator
-    );
-    if (nameComponents === void 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { invalid: true, tooltip: "Source variable doesn't exist", children: formula.locator });
-    }
-    const nameComponentTags = nameComponents.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.name, children: t }, i));
-    if (iconUri) {
-      nameComponentTags.unshift(/* @__PURE__ */ jsxRuntime.jsx(Tag.Tag.Image, { src: iconUri }));
-    }
-    const fullName = sdk.getFullNameForLocator(variablesSchema, formula.locator) || "Unknown Var";
-    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, disabled: props.disabled, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-      VarFormulaName,
-      {
-        nameComponents: nameComponentTags,
-        fullName
-      }
-    ) });
+const VarFormula = React.forwardRef((props, ref) => {
+  const {
+    formula,
+    variablesSchema,
+    // We do not use the `optionFactories` prop, but we need to remove it from restProps
+    optionFactories: _of,
+    ...restProps
+  } = props;
+  const iconUri = sdk.getIconUriForLocator(variablesSchema, formula.locator);
+  const nameComponents = sdk.getNameComponentsForLocator(variablesSchema, formula.locator);
+  if (nameComponents === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { invalid: true, tooltip: "Source variable doesn't exist", children: formula.locator });
+  }
+  const nameComponentTags = nameComponents.map((t, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.name, children: t }, i));
+  if (iconUri) {
+    nameComponentTags.unshift(/* @__PURE__ */ jsxRuntime.jsx(Tag.Tag.Image, { src: iconUri }));
   }
-);
+  const fullName = sdk.getFullNameForLocator(variablesSchema, formula.locator) || "Unknown Var";
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboBoxTag.ComboBoxTag, { ref, disabled: props.disabled, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(VarFormulaName, { nameComponents: nameComponentTags, fullName }) });
+});
 VarFormula.displayName = "VarFormula";
-function VarFormulaName({
-  nameComponents,
-  fullName
-}) {
+function VarFormulaName({ nameComponents, fullName }) {
   if (nameComponents.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Error: undefined" });
   }
   if (nameComponents.length <= 2) {
-    const reducesComponents = nameComponents.length === 1 ? [nameComponents] : nameComponents.reduce((prev, curr) => [
-      prev,
-      /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}),
-      curr
-    ]);
+    const reducesComponents = nameComponents.length === 1 ? [nameComponents] : nameComponents.reduce((prev, curr) => [prev, /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}), curr]);
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.valueRef, title: fullName, children: reducesComponents.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) });
   }
-  const {
-    0: first,
-    [nameComponents.length - 1]: last,
-    ...rest
-  } = nameComponents;
+  const { 0: first, [nameComponents.length - 1]: last, ...rest } = nameComponents;
   const middle = Object.values(rest);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      className: clsx.clsx(styles_module.default.valueRef, styles_module.default.valueRefTruncate),
-      title: fullName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.visibleSegment, children: first }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.truncatedSegment, children: middle.map((segment, idx) => [/* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default.visibleSegment, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}),
-          last
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx.clsx(styles_module.default.valueRef, styles_module.default.valueRefTruncate), title: fullName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.visibleSegment, children: first }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_module.default.truncatedSegment, children: middle.map((segment, idx) => [/* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: segment }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default.visibleSegment, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SegmentSeparator.SegmentSeparator, {}),
+      last
+    ] })
+  ] });
 }
 
 exports.default = VarFormula;

package/dist/cjs/components/DataBuilder/Nested/ArrayItems.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -61,11 +61,7 @@ function ArrayItems({ field, onChange }) {
     );
   }) });
 }
-function DataComposerFieldArrayItem({
-  field,
-  onChange,
-  onDelete = void 0
-}) {
+function DataComposerFieldArrayItem({ field, onChange, onDelete = void 0 }) {
   function handleChange(value) {
     onChange?.(value);
   }

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/AddingFieldSelector.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanel.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -71,17 +71,10 @@ function GroupAddField({
       onAdd(dataField.DEFAULT_FIELD_KEY);
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    index.FieldControlPanel.Button,
-    {
-      onClick: handleAddNewFieldClick,
-      "aria-label": addFieldLabel,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Add }),
-        addFieldLabel
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(index.FieldControlPanel.Button, { onClick: handleAddNewFieldClick, "aria-label": addFieldLabel, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index$1.SvgIcon, { type: svgIconType.SvgIconType.Add }),
+    addFieldLabel
+  ] }) });
 }
 function GroupUseFromVariables({ labelOr }) {
   const { setAutoOpen, localSchema } = fieldContext.default();

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/FieldControlPanel/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -33,13 +33,7 @@ function DataBuilderFieldControlPanel({
     level--;
   }
   if (field?.schema?.type !== "object" && level <= 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ControlPanelForNonObjectRootField.ControlPanelForNonObjectRootField,
-      {
-        addFieldLabel: computedAddFieldLabel,
-        onAdd
-      }
-    ) });
+    return /* @__PURE__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(ControlPanelForNonObjectRootField.ControlPanelForNonObjectRootField, { addFieldLabel: computedAddFieldLabel, onAdd }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsxRuntime.jsx(
     ControlPanel.ControlPanel,
@@ -51,10 +45,7 @@ function DataBuilderFieldControlPanel({
     }
   ) });
 }
-function FieldControlPanelWrapper({
-  field,
-  children
-}) {
+function FieldControlPanelWrapper({ field, children }) {
   const fieldIsVisible = dataField.isFieldVisible(field);
   const level = fieldIsVisible ? field.level + 1 : field.level;
   return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.FieldControlPanel, { compact: fieldIsVisible, children }) });

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.cjs

@@ -1,7 +1,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject = require('style-inject');
 
-var css_248z = ".FieldListWrapper-module_container__gog9U {\n\n  padding-bottom:\n    0.25rem;\n\n  padding-top:\n    0.75rem;\n\n  cursor:\n    pointer\n}\n.FieldListWrapper-module_container__collapsed__9x5Po {\n\n  margin-top:\n    -2.5rem;\n\n  padding-top:\n    2.5rem;\n\n  position:\n    relative;\n\n  z-index:\n    10;\n\n  background-image:\n    linear-gradient(to bottom, var(--tw-gradient-stops));\n\n  --tw-gradient-from:\n    transparent var(--tw-gradient-from-position);\n\n  --tw-gradient-to:\n    rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n\n  --tw-gradient-stops:\n    var(--tw-gradient-from), var(--tw-gradient-to);\n\n  --tw-gradient-to:\n    #fff var(--tw-gradient-to-position);\n\n  --tw-gradient-stops:\n    var(--tw-gradient-from), var(--tw-gradient-to, transparent) 40%\n}\n.FieldListWrapper-module_button__fkFJa {\n\n  padding-left:\n    0px;\n\n  padding-right:\n    0px;\n\n  padding-top:\n    0.125rem;\n\n  padding-bottom:\n    0.125rem;\n\n  border-bottom-width:\n    1px;\n\n  border-color:\n    transparent;\n\n  display:\n    flex;\n\n  flex-direction:\n    row;\n\n  align-items:\n    center;\n\n  gap:\n    0.25rem;\n\n  --tw-text-opacity:\n    1;\n\n  color:\n    rgb(13 121 194 / var(--tw-text-opacity, 1))\n}\n.FieldListWrapper-module_button__fkFJa svg {\n\n  height:\n    1rem;\n\n  width:\n    1rem\n}\n.FieldListWrapper-module_button__fkFJa:hover,\n.FieldListWrapper-module_container__gog9U:hover button {\n\n  border-style:\n    dashed;\n\n  --tw-border-opacity:\n    1;\n\n  border-color:\n    rgb(13 121 194 / var(--tw-border-opacity, 1))\n}\n";
+var css_248z = ".FieldListWrapper-module_container__gog9U {\n\n  padding-bottom: 0.25rem;\n\n  padding-top: 0.75rem;\n\n  cursor: pointer\n}\n.FieldListWrapper-module_container__collapsed__9x5Po {\n\n  margin-top: -2.5rem;\n\n  padding-top: 2.5rem;\n\n  position: relative;\n\n  z-index: 10;\n\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n\n  --tw-gradient-from: transparent var(--tw-gradient-from-position);\n\n  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);\n\n  --tw-gradient-to: #fff var(--tw-gradient-to-position);\n\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) 40%\n}\n.FieldListWrapper-module_button__fkFJa {\n\n  padding-left: 0px;\n\n  padding-right: 0px;\n\n  padding-top: 0.125rem;\n\n  padding-bottom: 0.125rem;\n\n  border-bottom-width: 1px;\n\n  border-color: transparent;\n\n  display: flex;\n\n  flex-direction: row;\n\n  align-items: center;\n\n  gap: 0.25rem;\n\n  --tw-text-opacity: 1;\n\n  color: rgb(13 121 194 / var(--tw-text-opacity, 1))\n}\n.FieldListWrapper-module_button__fkFJa svg {\n\n  height: 1rem;\n\n  width: 1rem\n}\n.FieldListWrapper-module_button__fkFJa:hover,\n.FieldListWrapper-module_container__gog9U:hover button {\n\n  border-style: dashed;\n\n  --tw-border-opacity: 1;\n\n  border-color: rgb(13 121 194 / var(--tw-border-opacity, 1))\n}\n";
 var classes = {"container":"FieldListWrapper-module_container__gog9U","container__collapsed":"FieldListWrapper-module_container__collapsed__9x5Po","button":"FieldListWrapper-module_button__fkFJa"};
 styleInject(css_248z);
 

package/dist/cjs/components/DataBuilder/Nested/FieldListWrapper/index.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -23,25 +23,10 @@ function FieldListWrapper({
   const buttonTitle = collapsed ? `Show ${fieldsToShow} more fields` : "Collapse fields";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx.clsx(
-          FieldListWrapper_module.default.container,
-          collapsed && FieldListWrapper_module.default.container__collapsed
-        ),
-        onClick,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: FieldListWrapper_module.default.button, children: [
-          buttonTitle,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            index.SvgIcon,
-            {
-              type: collapsed ? svgIconType.SvgIconType.ChevronDown : svgIconType.SvgIconType.ChevronUp
-            }
-          )
-        ] })
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(FieldListWrapper_module.default.container, collapsed && FieldListWrapper_module.default.container__collapsed), onClick, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { className: FieldListWrapper_module.default.button, children: [
+      buttonTitle,
+      /* @__PURE__ */ jsxRuntime.jsx(index.SvgIcon, { type: collapsed ? svgIconType.SvgIconType.ChevronDown : svgIconType.SvgIconType.ChevronUp })
+    ] }) })
   ] });
 }
 

package/dist/cjs/components/DataBuilder/Nested/LevelKeysConflictProvider.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/NoSchema.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/Nested/ObjectFields.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -26,9 +26,7 @@ function DataBuilderFormNestedObjectFields({
 }) {
   const { showNullValueFields, hideReadOnlyFields } = dataBuilderContext.default();
   const [conflictedKeys, setConflictedKeys] = React.useState(/* @__PURE__ */ new Set());
-  const [fieldToShowKeys, setFieldToShowKeys] = React.useState(
-    getInitialFieldsToShow(field)
-  );
+  const [fieldToShowKeys, setFieldToShowKeys] = React.useState(getInitialFieldsToShow(field));
   React.useEffect(() => {
     if (field?.subFields) {
       setFieldToShowKeys(getInitialFieldsToShow(field));
@@ -68,9 +66,7 @@ function DataBuilderFormNestedObjectFields({
     if (handleKeyConflict(oldKey, newKey)) return;
     positionSafeKeyChange(oldKey, newKey);
     if (!newKey) return;
-    setFieldToShowKeys(
-      fieldToShowKeys.map((key) => key === oldKey ? newKey : key)
-    );
+    setFieldToShowKeys(fieldToShowKeys.map((key) => key === oldKey ? newKey : key));
   }
   function handlePropertyValueChange(key, value) {
     const newProperties = { ...field.value };
@@ -128,22 +124,12 @@ function getInitialFieldsToShow(field) {
   const getKeysFromSubFields = (subFields2) => {
     return subFields2.map((x) => x.key).filter((x) => x !== void 0);
   };
-  const requiredFieldKeys = getKeysFromSubFields(
-    subFields.filter((x) => x.isRequired)
-  );
-  const fieldsWithValueKeys = getKeysFromSubFields(
-    subFields.filter((x) => x.value !== void 0)
-  );
+  const requiredFieldKeys = getKeysFromSubFields(subFields.filter((x) => x.isRequired));
+  const fieldsWithValueKeys = getKeysFromSubFields(subFields.filter((x) => x.value !== void 0));
   const minimalVisibleSetOfFields = getKeysFromSubFields(
     subFields.filter((_, index) => index < MIN_FIELDS_VISIBLE_BY_DEFAULT)
   );
-  const allUniqueFields = [
-    .../* @__PURE__ */ new Set([
-      ...requiredFieldKeys,
-      ...fieldsWithValueKeys,
-      ...minimalVisibleSetOfFields
-    ])
-  ];
+  const allUniqueFields = [.../* @__PURE__ */ new Set([...requiredFieldKeys, ...fieldsWithValueKeys, ...minimalVisibleSetOfFields])];
   const amountFieldsToShow = allUniqueFields.length;
   if (dataField.isRootField(field) && amountFieldsToShow === 0) {
     return getKeysFromSubFields(subFields);
@@ -178,46 +164,24 @@ function FieldListCollapsible({
           onDelete
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        index.DataBuilderFieldControlPanel,
-        {
-          field,
-          onAdd,
-          additionalFields
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd, additionalFields })
     ] });
   }
   const renderedFields = collapsed ? baseFields.slice(0, initialVisibleFieldCount) : baseFields;
   const fieldsToShow = baseFields.length - initialVisibleFieldCount;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    index$1.FieldListWrapper,
-    {
-      collapsed,
-      onClick: toggleCollapsed,
-      fieldsToShow,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BaseFieldsList,
-          {
-            baseFields: renderedFields,
-            onChange,
-            onKeyChange,
-            onAdd,
-            onDelete
-          }
-        ),
-        !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
-          index.DataBuilderFieldControlPanel,
-          {
-            field,
-            onAdd,
-            additionalFields
-          }
-        )
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(index$1.FieldListWrapper, { collapsed, onClick: toggleCollapsed, fieldsToShow, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      BaseFieldsList,
+      {
+        baseFields: renderedFields,
+        onChange,
+        onKeyChange,
+        onAdd,
+        onDelete
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsx(index.DataBuilderFieldControlPanel, { field, onAdd, additionalFields })
+  ] }) });
 }
 function BaseFieldsList({
   baseFields,

package/dist/cjs/components/DataBuilder/Nested/ValueMapping.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -28,10 +28,7 @@ function ValueMapping({ field, onChange }) {
   if (formula?.type !== sdk.DataBuilderFormulaType.MAP) {
     return null;
   }
-  const valueSchema = sdk.buildDataSchema(
-    formula?.args?.value,
-    field.variablesSchema
-  );
+  const valueSchema = sdk.buildDataSchema(formula?.args?.value, field.variablesSchema);
   const [fieldRecords, fieldRecordsError] = reactUsePromise.default(
     () => loadSchemaRecords(field.schema, client, connectionId),
     [JSON.stringify(field.schema)]
@@ -58,14 +55,7 @@ function ValueMapping({ field, onChange }) {
       field,
       onChange
     }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    CustomMapping,
-    {
-      field,
-      valueSchema,
-      onChange
-    }
-  ) });
+  ) : /* @__PURE__ */ jsxRuntime.jsx(CustomMapping, { field, valueSchema, onChange }) });
 }
 function AutoExpandedMapping({ valueRecords, field, fieldRecords, onChange }) {
   const mapping = field.value?.$map?.mapping ?? [];
@@ -97,13 +87,7 @@ function AutoExpandedMapping({ valueRecords, field, fieldRecords, onChange }) {
     return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Name, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index.Title, { childrenWrap: true, children: valueRecord.name ?? valueRecord.id }) }),
       /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Icon, { type: svgIconType.SvgIconType.ValueMapping }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(
-        index$1.default,
-        {
-          field: subField,
-          onChange: (value) => handleMappingChange(valueRecord, value)
-        }
-      ) })
+      /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: subField, onChange: (value) => handleMappingChange(valueRecord, value) }) })
     ] }) }, idx);
   }) });
 }
@@ -137,14 +121,7 @@ function CustomMapping({ field, valueSchema, onChange }) {
       },
       idx
     )),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      index$2.DataBuilderFieldControlPanel,
-      {
-        field,
-        addFieldLabel: "Add Mapping",
-        onAdd: handleAddMapping
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(index$2.DataBuilderFieldControlPanel, { field, addFieldLabel: "Add Mapping", onAdd: handleAddMapping })
   ] });
 }
 function MappingListItem({
@@ -182,21 +159,9 @@ function MappingListItem({
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(index.NestedLevel, { level: field.level + 1, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Row, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.default,
-      {
-        field: fromField,
-        onChange: (value) => handleFromChange(value)
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: fromField, onChange: (value) => handleFromChange(value) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Icon, { type: svgIconType.SvgIconType.ValueMapping }),
-    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.default,
-      {
-        field: toField,
-        onChange: (value) => handleToChange(value)
-      }
-    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Cell.Combobox, { grow: true, width: "49%", children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { field: toField, onChange: (value) => handleToChange(value) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(FieldDelete.FieldDelete, { onClick: onDelete })
   ] }) });
 }

package/dist/cjs/components/DataBuilder/Nested.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/data-builder-context.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 

package/dist/cjs/components/DataBuilder/data-field.cjs

@@ -2,7 +2,7 @@
 /*
  * Integration App React package
  * {@link https://www.npmjs.com/package/@integration-app/react}
- * v2.19.0
+ * v2.21.0
  */
 'use client';
 
@@ -69,10 +69,7 @@ function schemaTypeFromValue(value, variablesSchema) {
   if (sdk.isFormula(value)) {
     const formula = sdk.getFormula(value);
     if (formula.type === sdk.DataBuilderFormulaType.VAR) {
-      const schema = sdk.getSchemaByLocator(
-        variablesSchema,
-        formula.locator
-      );
+      const schema = sdk.getSchemaByLocator(variablesSchema, formula.locator);
       return schema?.type ?? "string";
     } else if (formula.type == sdk.DataBuilderFormulaType.PLAIN) {
       return schemaTypeFromValue(formula.value);
@@ -105,14 +102,8 @@ function extractFieldSubFields(field) {
   } else if (schema?.type === "object") {
     const subfieldsFromObjectSchema = getSubfieldsFromObjectSchema(field);
     const subfieldsFromValue = getSubfieldsFromValue(field);
-    subfields = mergeSubfieldsFromObjectSchemaAndValues(
-      subfieldsFromObjectSchema,
-      subfieldsFromValue
-    );
-    subfields = subfields.length > 0 ? [
-      ...subfields.slice(0, -1),
-      { ...subfields.slice(-1)[0], isLastChild: true }
-    ] : subfields;
+    subfields = mergeSubfieldsFromObjectSchemaAndValues(subfieldsFromObjectSchema, subfieldsFromValue);
+    subfields = subfields.length > 0 ? [...subfields.slice(0, -1), { ...subfields.slice(-1)[0], isLastChild: true }] : subfields;
   } else if (schema?.type === "array") {
     if (Array.isArray(field.value)) {
       subfields = getSubfieldsFromValue(field);
@@ -193,19 +184,10 @@ function getSubfieldsFromValue(field) {
   const fields = [];
   if (Array.isArray(field.value)) {
     return field.value.map((item, idx) => {
-      const dynamicSchemaVariables = structuredClone(
-        field.dynamicSchemaVariables
-      );
+      const dynamicSchemaVariables = structuredClone(field.dynamicSchemaVariables);
       const valueLocatorForDynamicSchema = field?.valueLocator?.replace(/\[\d+\]/g, "") ?? "";
-      sdk.setValueAtLocator(
-        dynamicSchemaVariables,
-        valueLocatorForDynamicSchema,
-        item
-      );
-      const currentEvaluatedSchema = sdk.buildData(
-        field.dynamicSchema,
-        sdk.buildData(dynamicSchemaVariables)
-      );
+      sdk.setValueAtLocator(dynamicSchemaVariables, valueLocatorForDynamicSchema, item);
+      const currentEvaluatedSchema = sdk.buildData(field.dynamicSchema, sdk.buildData(dynamicSchemaVariables));
       const valueLocator = `${field.valueLocator}[${idx}]`;
       const schema = sdk.getSchemaByLocator(currentEvaluatedSchema, valueLocator);
       return makeSubField(field, {