@integration-app/react 2.0.3-beta.1 → 2.0.3-beta.2

package/dist/esm/components/DataBuilder/Formula/mergeObjects.mjs

@@ -0,0 +1,84 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { schemaWithTitle } from '@integration-app/sdk';
+import { Formula, Variable, VariableSvgIcon } from '../../Formula/index.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { DrilldownBlockContentWrapper } from '../../DataBuilderUI/index.mjs';
+import DataBuilderFormField from '../Field.mjs';
+import useDataBuilderField from '../field-context.mjs';
+import { DataBuilderFieldControlPanel } from '../Nested/FieldControlPanel/index.mjs';
+import { makeSubField } from '../data-field.mjs';
+
+const MergeObjectsFormula = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(Formula, { ref, onClick: props.onClick, children: /* @__PURE__ */ jsxs(Variable, { children: [
+      /* @__PURE__ */ jsx(VariableSvgIcon, { type: SvgIconType.Function }),
+      " Merge objects"
+    ] }) });
+  }
+);
+MergeObjectsFormula.displayName = "MergeObjectsFormula";
+function MergeObjectsDropdown({
+  onChange,
+  formula
+}) {
+  const { field } = useDataBuilderField();
+  const renderedField = {
+    ...field,
+    value: {
+      $mergeObjects: formula.args
+    }
+  };
+  return /* @__PURE__ */ jsx(MergeObjectsNested, { field: renderedField, onChange });
+}
+function MergeObjectsNested({ field, onChange }) {
+  const values = field.value?.$mergeObjects ?? [];
+  function handleChangeValue(index, value) {
+    const newValues = [...values];
+    newValues[index] = value;
+    onChange?.({ $mergeObjects: newValues });
+  }
+  function handleDeleteValue(index) {
+    const newValues = [...values];
+    newValues.splice(index, 1);
+    onChange?.({ $mergeObjects: newValues });
+  }
+  function handleAddValue() {
+    const newValues = [...values];
+    newValues.push(null);
+    onChange?.({ $mergeObjects: newValues });
+  }
+  return /* @__PURE__ */ jsxs(DrilldownBlockContentWrapper, { children: [
+    values.map((value, index) => {
+      const subField = makeSubField(field, {
+        schema: schemaWithTitle(field?.schema, "") ?? {
+          type: "object",
+          additionalProperties: true
+        },
+        valueLocator: `${field.valueLocator}.$mergeObjects.${index}`,
+        value,
+        isDeletable: true
+      });
+      return /* @__PURE__ */ jsx(
+        DataBuilderFormField,
+        {
+          field: subField,
+          onDelete: () => handleDeleteValue(index),
+          onChange: (value2) => handleChangeValue(index, value2)
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleAddValue })
+  ] });
+}
+
+export { MergeObjectsDropdown, MergeObjectsFormula as default };

package/dist/esm/components/DataBuilder/Formula/noUi.mjs

@@ -0,0 +1,15 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+
+function NoUiFormula() {
+  return /* @__PURE__ */ jsx("span", { children: "This value cannot be displayed" });
+}
+
+export { NoUiFormula as default };

package/dist/esm/components/DataBuilder/Formula/options-factory.mjs

@@ -0,0 +1,44 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { filterOptionsByLabel } from '../../ComboBox/options-factories/base.mjs';
+import { ValueType } from '../../ComboBox/value-spec.mjs';
+import '../../SvgIcon/index.mjs';
+import { getFormulas } from './index.mjs';
+
+class FormulaListOptionsFactory {
+  async getOptions({ input, spec }) {
+    const formulaTypes = getFormulaTypesForSpec(spec);
+    const options = [];
+    for (const type of formulaTypes) {
+      const formulaSpec = getFormulas()[type];
+      options.push({
+        label: formulaSpec.name,
+        value: {
+          [`$${type}`]: null
+        }
+      });
+    }
+    const filteredOptions = filterOptionsByLabel(options, input);
+    return filteredOptions;
+  }
+}
+function getFormulaTypesForSpec(spec) {
+  const result = [];
+  for (const [formulaType, formulaSpec] of Object.entries(getFormulas())) {
+    if (!formulaSpec.appliesToSpec) {
+      continue;
+    }
+    if (!spec?.type || spec.type === ValueType.ANY || formulaSpec.appliesToSpec(spec)) {
+      result.push(formulaType);
+    }
+  }
+  return result;
+}
+
+export { FormulaListOptionsFactory };

package/dist/esm/components/DataBuilder/Formula/record.mjs

@@ -0,0 +1,32 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { Truncate } from '../../Truncate/index.mjs';
+import classes from './styles.module.css.mjs';
+
+const RecordFormula = forwardRef(
+  (props, ref) => {
+    const { formula } = props;
+    const name = formula.record.name ?? formula.record?.id;
+    return /* @__PURE__ */ jsx(ComboBoxTag, { ref, disabled: props.disabled, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(classes.valueRef, classes.valueRefFlex),
+        title: name,
+        children: /* @__PURE__ */ jsx(Truncate, { children: name })
+      }
+    ) });
+  }
+);
+RecordFormula.displayName = "RecordFormula";
+
+export { RecordFormula as default };

package/dist/esm/components/DataBuilder/Formula/styles.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+var css_248z = ".styles-module_valueRef__ZFG-S {\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap\n}\n.styles-module_valueRef__ZFG-S img,\n.styles-module_valueRef__ZFG-S svg {\n  display: inline-block;\n  vertical-align: middle;\n  margin-top: -0.1rem;\n  max-height: 1rem\n}\n.styles-module_valueRef__ZFG-S img {\n  margin-right: -0.125rem\n}\n.styles-module_valueRefFlex__G5lJH {\n  display: inline-flex;\n  justify-content: center\n}\n.styles-module_name__VBTS9 {\n  white-space: nowrap\n}\n.styles-module_valueRefTruncate__Nh-Hg {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center\n}\n.styles-module_truncatedSegment__w48mz {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap\n}\n.styles-module_visibleSegment__--BWS {\n  flex-shrink: 0;\n  flex-grow: 0\n}\n.styles-module_tagIcon__uOapU {\n  margin-right: 0.25rem;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem\n}\n.styles-module_caseContainer__rb67a {\n  margin-top: 0.5rem\n}\n.styles-module_caseContainer__rb67a .styles-module_field__lJDbN {\n  position: relative\n}\n.styles-module_caseContainer__rb67a .styles-module_field__lJDbN .styles-module_deleteButton__qo19I {\n  position: absolute;\n  top: 50%;\n  right: 0px;\n  margin-top: -0.625rem\n}\n";
+var classes = {"valueRef":"styles-module_valueRef__ZFG-S","valueRefFlex":"styles-module_valueRefFlex__G5lJH","name":"styles-module_name__VBTS9","valueRefTruncate":"styles-module_valueRefTruncate__Nh-Hg","truncatedSegment":"styles-module_truncatedSegment__w48mz","visibleSegment":"styles-module_visibleSegment__--BWS","tagIcon":"styles-module_tagIcon__uOapU","caseContainer":"styles-module_caseContainer__rb67a","field":"styles-module_field__lJDbN","deleteButton":"styles-module_deleteButton__qo19I"};
+styleInject(css_248z);
+
+export { classes as default };

package/dist/esm/components/DataBuilder/Formula/tpl.mjs

@@ -0,0 +1,33 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StandAloneEditor } from '../../ComboBoxElements/TipTapEditor/EditorStandAlone.mjs';
+
+const TplFormula = forwardRef(
+  (props, ref) => {
+    const {
+      formula,
+      schema: _,
+      variablesSchema: __,
+      optionFactories: ___,
+      ...editorProps
+    } = props;
+    const value = {
+      $tpl: {
+        template: formula.args.template,
+        values: formula.args.values
+      }
+    };
+    return /* @__PURE__ */ jsx(StandAloneEditor, { ref, value, ...editorProps });
+  }
+);
+TplFormula.displayName = "TplFormula";
+
+export { TplFormula as default };

package/dist/esm/components/DataBuilder/Formula/var.mjs

@@ -0,0 +1,88 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef, Fragment as Fragment$1 } from 'react';
+import clsx from 'clsx';
+import { getIconUriForLocator, getNameComponentsForLocator, getFullNameForLocator } from '@integration-app/sdk';
+import { ComboBoxTag } from '../../ComboBoxElements/ComboBoxTag.mjs';
+import { Tag } from '../../Tag/index.mjs';
+import { SegmentSeparator } from '../../Tag/SegmentSeparator.mjs';
+import classes from './styles.module.css.mjs';
+
+const VarFormula = 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 = getIconUriForLocator(variablesSchema, formula.locator);
+    const nameComponents = getNameComponentsForLocator(
+      variablesSchema,
+      formula.locator
+    );
+    if (nameComponents === void 0) {
+      return /* @__PURE__ */ jsx(ComboBoxTag, { invalid: true, tooltip: "Source variable doesn't exist", children: formula.locator });
+    }
+    const nameComponentTags = nameComponents.map((t, i) => /* @__PURE__ */ jsx("span", { className: classes.name, children: t }, i));
+    if (iconUri) {
+      nameComponentTags.unshift(/* @__PURE__ */ jsx(Tag.Image, { src: iconUri }));
+    }
+    const fullName = getFullNameForLocator(variablesSchema, formula.locator) || "Unknown Var";
+    return /* @__PURE__ */ jsx(ComboBoxTag, { ref, disabled: props.disabled, ...restProps, children: /* @__PURE__ */ jsx(
+      VarFormulaName,
+      {
+        nameComponents: nameComponentTags,
+        fullName
+      }
+    ) });
+  }
+);
+VarFormula.displayName = "VarFormula";
+function VarFormulaName({
+  nameComponents,
+  fullName
+}) {
+  if (nameComponents.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, { children: "Error: undefined" });
+  }
+  if (nameComponents.length <= 2) {
+    const reducesComponents = nameComponents.length === 1 ? [nameComponents] : nameComponents.reduce((prev, curr) => [
+      prev,
+      /* @__PURE__ */ jsx(SegmentSeparator, {}),
+      curr
+    ]);
+    return /* @__PURE__ */ jsx("span", { className: classes.valueRef, title: fullName, children: reducesComponents.map((segment, i) => /* @__PURE__ */ jsx(Fragment$1, { children: segment }, i)) });
+  }
+  const {
+    0: first,
+    [nameComponents.length - 1]: last,
+    ...rest
+  } = nameComponents;
+  const middle = Object.values(rest);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(classes.valueRef, classes.valueRefTruncate),
+      title: fullName,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: classes.visibleSegment, children: first }),
+        /* @__PURE__ */ jsx("span", { className: classes.truncatedSegment, children: middle.map((segment, idx) => [/* @__PURE__ */ jsx(SegmentSeparator, {}, idx), segment]).flat().map((segment, i) => /* @__PURE__ */ jsx(Fragment$1, { children: segment }, i)) }),
+        /* @__PURE__ */ jsxs("span", { className: classes.visibleSegment, children: [
+          /* @__PURE__ */ jsx(SegmentSeparator, {}),
+          last
+        ] })
+      ]
+    }
+  );
+}
+
+export { VarFormula as default };

package/dist/esm/components/DataBuilder/Nested/ArrayItems.mjs

@@ -0,0 +1,78 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { NestedLevel, Row, Cell } from '../../DataBuilderUI/index.mjs';
+import { SvgIconType } from '../../SvgIcon/index.mjs';
+import { DataBuilderFieldProvider } from '../field-context.mjs';
+import { FieldDelete } from '../FieldDelete.mjs';
+import DataBuilderFormFieldValue from '../FieldValue/index.mjs';
+import DataBuilderFormNested from '../Nested.mjs';
+import { DataBuilderFieldControlPanel } from './FieldControlPanel/index.mjs';
+
+function DataBuilderFormNestedArrayItems({
+  field,
+  onChange
+}) {
+  const allowToAdd = !field.schema?.maxItems || (field?.subFields ?? [])?.length < field.schema.maxItems;
+  function handleAddItem() {
+    onChange([...field.value ?? [], null]);
+  }
+  if (Array.isArray(field.value)) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ArrayItems, { field, onChange }),
+      allowToAdd && /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleAddItem })
+    ] });
+  } else if (field.value) {
+    return null;
+  } else {
+    return /* @__PURE__ */ jsx(Fragment, { children: allowToAdd && /* @__PURE__ */ jsx(DataBuilderFieldControlPanel, { field, onAdd: handleAddItem }) });
+  }
+}
+function ArrayItems({ field, onChange }) {
+  function handleItemChange(index, value) {
+    const newValue = [...field.value || []];
+    newValue[index] = value;
+    onChange(newValue);
+  }
+  function handleDeleteItem(index) {
+    const newValue = [...field.value || []];
+    newValue.splice(index, 1);
+    onChange(newValue.length > 0 ? newValue : void 0);
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: field.subFields.map((itemField, index) => {
+    return /* @__PURE__ */ jsx(
+      DataComposerFieldArrayItem,
+      {
+        field: itemField,
+        onChange: (value) => handleItemChange(index, value),
+        onDelete: () => handleDeleteItem(index)
+      },
+      index
+    );
+  }) });
+}
+function DataComposerFieldArrayItem({
+  field,
+  onChange,
+  onDelete = void 0
+}) {
+  function handleChange(value) {
+    onChange?.(value);
+  }
+  return /* @__PURE__ */ jsxs(DataBuilderFieldProvider, { field, children: [
+    /* @__PURE__ */ jsx(NestedLevel, { level: field.level, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Cell.Icon, { type: SvgIconType.Array }),
+      /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, children: /* @__PURE__ */ jsx(DataBuilderFormFieldValue, { field, onChange: handleChange }) }),
+      onDelete && /* @__PURE__ */ jsx(FieldDelete, { onClick: onDelete })
+    ] }) }),
+    /* @__PURE__ */ jsx(DataBuilderFormNested, { field, onChange: handleChange })
+  ] });
+}
+
+export { DataBuilderFormNestedArrayItems as default };

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/AddingFieldSelector.mjs

@@ -0,0 +1,52 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getFullNameForLocator } from '@integration-app/sdk';
+import { Row, Cell } from '../../../DataBuilderUI/index.mjs';
+import { ComboBox } from '../../../ComboBox/index.mjs';
+import { SvgIconType } from '../../../SvgIcon/index.mjs';
+import { TagPlaceholder } from '../../../Tag/TagPlaceholder.mjs';
+import { isObjectAllowedAdditionalProperties, fieldLabel } from '../../data-field.mjs';
+
+function AddingFieldSelector({
+  parentField,
+  fieldsToAdd,
+  onChange,
+  onClose
+}) {
+  const allowAdditionalProperties = isObjectAllowedAdditionalProperties(parentField);
+  const options = fieldsToAdd.map((f) => ({
+    value: f.key,
+    label: getFullNameForLocator(parentField.schema, f.key) || fieldLabel(f)
+  }));
+  allowAdditionalProperties && options.unshift({
+    value: "",
+    label: "Add custom field",
+    iconType: SvgIconType.Add
+  });
+  return /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsx(Cell.Combobox, { width: "14rem", children: /* @__PURE__ */ jsx(
+      ComboBox,
+      {
+        value: void 0,
+        options,
+        schema: {
+          type: "string",
+          allowCustom: allowAdditionalProperties
+        },
+        onChange,
+        onClose,
+        autoOpen: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Cell.Combobox, { grow: true, disabled: true, children: /* @__PURE__ */ jsx(TagPlaceholder, { children: "Select value" }) })
+  ] });
+}
+
+export { AddingFieldSelector };

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/ControlPanel.mjs

@@ -0,0 +1,108 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, Fragment as Fragment$1 } from 'react';
+import { Truncate } from '../../../Truncate/index.mjs';
+import { isFieldVisible, isObjectAllowedAdditionalProperties, DEFAULT_FIELD_KEY } from '../../data-field.mjs';
+import useEventStopPropagation from '../../../../hooks/useEventStopPropagation.mjs';
+import { SvgIcon, SvgIconType } from '../../../SvgIcon/index.mjs';
+import useDataBuilderField from '../../field-context.mjs';
+import { useDataBuilderFieldCanUseVarFromVariables } from '../../hooks.mjs';
+import { AddingFieldSelector } from './AddingFieldSelector.mjs';
+import '../../../DataBuilderUI/index.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+
+function ControlPanel({
+  field,
+  additionalFields = [],
+  addFieldLabel = "Add Field",
+  onAdd
+}) {
+  const fieldIsVisible = isFieldVisible(field);
+  const [showFieldSelector, setShowFieldSelector] = useState(false);
+  const fieldCanUseVarFromVariables = useDataBuilderFieldCanUseVarFromVariables();
+  const showAddFieldButtonGroup = isObjectAllowedAdditionalProperties(field) || additionalFields.length > 0;
+  const showUseFromVariablesButtonGroup = fieldIsVisible && fieldCanUseVarFromVariables;
+  if (showFieldSelector) {
+    return /* @__PURE__ */ jsx(
+      AddingFieldSelector,
+      {
+        parentField: field,
+        fieldsToAdd: additionalFields,
+        onChange: onAdd,
+        onClose: () => setShowFieldSelector(false)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showAddFieldButtonGroup && /* @__PURE__ */ jsx(
+      GroupAddField,
+      {
+        additionalFields,
+        addFieldLabel,
+        onAdd,
+        onShowFieldSelector: () => setShowFieldSelector(true)
+      }
+    ),
+    showUseFromVariablesButtonGroup && /* @__PURE__ */ jsx(GroupUseFromVariables, { labelOr: showAddFieldButtonGroup })
+  ] });
+}
+function GroupAddField({
+  additionalFields = [],
+  addFieldLabel = "Add Field",
+  onAdd,
+  onShowFieldSelector
+}) {
+  const handleAddNewFieldClick = useEventStopPropagation(() => {
+    if (additionalFields.length > 0) {
+      onShowFieldSelector();
+    } else {
+      onAdd(DEFAULT_FIELD_KEY);
+    }
+  });
+  return /* @__PURE__ */ jsx(FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxs(
+    FieldControlPanel.Button,
+    {
+      onClick: handleAddNewFieldClick,
+      "aria-label": addFieldLabel,
+      children: [
+        /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Add }),
+        /* @__PURE__ */ jsx(Truncate, { mode: "middle", children: addFieldLabel })
+      ]
+    }
+  ) });
+}
+function GroupUseFromVariables({ labelOr }) {
+  const { setAutoOpen, localSchema } = useDataBuilderField();
+  const localSchemaType = localSchema?.type;
+  function handleUseVarsFromVariables() {
+    setAutoOpen(true);
+  }
+  if (!["array", "object"].includes(localSchemaType)) {
+    return null;
+  }
+  const title = getButtonUseFromVariablesTitle(localSchemaType);
+  const Wrapper = labelOr ? FieldControlPanel : Fragment$1;
+  return /* @__PURE__ */ jsxs(Wrapper, { noWrap: true, children: [
+    labelOr && /* @__PURE__ */ jsx(FieldControlPanel.Text, { children: "or" }),
+    /* @__PURE__ */ jsx(FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsx(FieldControlPanel.Button, { onClick: handleUseVarsFromVariables, children: /* @__PURE__ */ jsx(Truncate, { mode: "end", children: title }) }) })
+  ] });
+}
+function getButtonUseFromVariablesTitle(schemaType) {
+  switch (schemaType) {
+    case "array":
+      return "Use list from variables";
+    case "object":
+      return "Use object from variables";
+    default:
+      return "Use from variables";
+  }
+}
+
+export { ControlPanel };

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/ControlPanelForNonObjectRootField.mjs

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx, jsxs } from 'react/jsx-runtime';
+import useEventStopPropagation from '../../../../hooks/useEventStopPropagation.mjs';
+import { SvgIcon, SvgIconType } from '../../../SvgIcon/index.mjs';
+import { DEFAULT_FIELD_KEY } from '../../data-field.mjs';
+import '../../../DataBuilderUI/index.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+
+function ControlPanelForNonObjectRootField({
+  addFieldLabel = "Add Field",
+  onAdd
+}) {
+  const handleOnClick = useEventStopPropagation(() => onAdd(DEFAULT_FIELD_KEY));
+  return /* @__PURE__ */ jsx(FieldControlPanel.ButtonGroup, { children: /* @__PURE__ */ jsxs(FieldControlPanel.Button, { onClick: handleOnClick, children: [
+    /* @__PURE__ */ jsx(SvgIcon, { type: SvgIconType.Add }),
+    addFieldLabel
+  ] }) });
+}
+
+export { ControlPanelForNonObjectRootField };

package/dist/esm/components/DataBuilder/Nested/FieldControlPanel/index.mjs

@@ -0,0 +1,74 @@
+"use strict";
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import { jsx } from 'react/jsx-runtime';
+import { NestedLevel } from '../../../DataBuilderUI/index.mjs';
+import { isObjectAllowedAdditionalProperties, isFieldVisible, fieldLabel } from '../../data-field.mjs';
+import useDataBuilderField from '../../field-context.mjs';
+import { ControlPanelForNonObjectRootField } from './ControlPanelForNonObjectRootField.mjs';
+import { ControlPanel } from './ControlPanel.mjs';
+import { FieldControlPanel } from '../../../DataBuilderUI/FieldControlPanel/index.mjs';
+
+function DataBuilderFieldControlPanel({
+  field,
+  onAdd,
+  addFieldLabel,
+  additionalFields = []
+}) {
+  const showAddFieldButton = isObjectAllowedAdditionalProperties(field) || additionalFields.length !== 0;
+  const fieldIsVisible = isFieldVisible(field);
+  let level = field.level;
+  const computedAddFieldLabel = useAddFieldLabel(addFieldLabel);
+  if (level < 0 || !showAddFieldButton) {
+    return null;
+  }
+  if (!fieldIsVisible) {
+    level--;
+  }
+  if (field?.schema?.type !== "object" && level <= 0) {
+    return /* @__PURE__ */ jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsx(
+      ControlPanelForNonObjectRootField,
+      {
+        addFieldLabel: computedAddFieldLabel,
+        onAdd
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(FieldControlPanelWrapper, { field, children: /* @__PURE__ */ jsx(
+    ControlPanel,
+    {
+      field,
+      addFieldLabel: computedAddFieldLabel,
+      onAdd,
+      additionalFields
+    }
+  ) });
+}
+function FieldControlPanelWrapper({
+  field,
+  children
+}) {
+  const fieldIsVisible = isFieldVisible(field);
+  const level = fieldIsVisible ? field.level + 1 : field.level;
+  return /* @__PURE__ */ jsx(NestedLevel, { level, children: /* @__PURE__ */ jsx(FieldControlPanel, { compact: fieldIsVisible, children }) });
+}
+function useAddFieldLabel(labelFromProps) {
+  const { field, localSchema } = useDataBuilderField();
+  if (labelFromProps) {
+    return labelFromProps;
+  }
+  const resultArray = ["Add"];
+  const label = fieldLabel(field);
+  if (label) {
+    resultArray.push(label);
+  }
+  resultArray.push(localSchema?.type === "object" ? "Field" : "Item");
+  return resultArray.join(" ");
+}
+
+export { ControlPanel, ControlPanelForNonObjectRootField, DataBuilderFieldControlPanel };

package/dist/esm/components/DataBuilder/Nested/FieldListWrapper/FieldListWrapper.module.css.mjs

@@ -0,0 +1,14 @@
+/*
+ * Integration App React package
+ * {@link https://www.npmjs.com/package/@integration-app/react}
+ * v2.0.3-beta.2
+ */
+'use client';
+
+import styleInject from 'style-inject';
+
+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),\n    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))\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))\n}\n";
+var classes = {"container":"FieldListWrapper-module_container__gog9U","container__collapsed":"FieldListWrapper-module_container__collapsed__9x5Po","button":"FieldListWrapper-module_button__fkFJa"};
+styleInject(css_248z);
+
+export { classes as default };